@fluentui/react-dialog

@fluentui/react-dialog

React Dialog components for Fluent UI React

To import React Dialog components:

import * as React from 'react';
import {
  Button,
  Dialog,
  DialogTrigger,
  DialogSurface,
  DialogTitle,
  DialogBody,
  DialogActions,
  DialogContent,
} from '@fluentui/react-components';

export const DialogExample = () => {
  return (
    <Dialog>
      <DialogTrigger>
        <Button>Open dialog</Button>
      </DialogTrigger>
      <DialogSurface>
        <DialogBody>
          <DialogTitle>Dialog title</DialogTitle>
          <DialogContent>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque
            est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure
            cumque eaque?
          </DialogContent>
          <DialogActions>
            <DialogTrigger>
              <Button appearance="secondary">Close</Button>
            </DialogTrigger>
            <Button appearance="primary">Do Something</Button>
          </DialogActions>
        </DialogBody>
      </DialogSurface>
    </Dialog>
  );
};

Similar packages

Other packages similar to @fluentui/react-dialog

react-modal

react-modal is a popular package for creating accessible modal dialogs in React. It provides a simple API and is highly customizable. Compared to @fluentui/react-dialog, react-modal is more lightweight and focused solely on modals, whereas Fluent UI offers a broader set of UI components.

material-ui

Material-UI (now MUI) is a comprehensive library of React components that implement Google's Material Design. It includes a Dialog component similar to @fluentui/react-dialog, but with styling and behavior aligned with Material Design principles. MUI is a good choice if you are looking for a complete design system with a focus on Material Design.

antd

Ant Design (antd) is a React UI library with a set of high-quality components, including a Modal component. It is known for its rich set of features and design consistency. Ant Design's Modal is comparable to @fluentui/react-dialog in terms of functionality, but it follows Ant Design's aesthetic and design guidelines.