Dialog

Dialog (Modal) is used to display content that requires user interaction. They are used to display information, ask for input, or require a decision.

Basic Usage

import { Button, Dialog, useModal } from '@fluid-design/fluid-ui';
const SimpleModal = ({ dismiss, onConfirm }) => {
  return (
    <Dialog>
      <Dialog.Header>
        <Dialog.Title>Modal Title</Dialog.Title>
        <Dialog.CloseButton dismiss={dismiss} />
      </Dialog.Header>
      <Dialog.Body className='bg-whtie'>
        <Dialog.Description>
          This is a simple modal. It has a title, a description, and a footer.
        </Dialog.Description>
        <p>Modal Content</p>
      </Dialog.Body>
    </Dialog>
  );
};
const SimpleComponent = () => {
  const [presentModal] = useModal(SimpleModal, {
    // You can pass any props to the modal component
    onConfirm: () => console.log('Confirmed'),
  });
  return <Button label='Present Modal' onClick={() => presentModal()} />;
};

Nested modals are often used to display a confirmation dialog after a user has performed an action. Since the modal is built using Headless UI, it supports focus trapping out of the box. This means that when a modal is open, the user will be unable to interact with the rest of the page until the modal is closed. The keyboard focus will be trapped inside the modal, and the user will be able to navigate the modal using the keyboard.

Button.tsx

Modal.tsx

import { Button, useModal } from '@fluid-design/fluid-ui';
const NestedComponent = () => {
  const [presentModal] = useModal(NestedModal1);
  return <Button label='Nested Modal' onClick={() => presentModal()} />;
};

Dialog with Form

Having a form inside a modal is a common pattern. You can programmatically control weather the modal can be dismissed by clicking outside of the modal or pressing the escape key by passing the onClose prop to the useModal hook.

Component API

Dialog.Title

Prop	Default	Description
className		`string` The CSS class to apply to the component's root element
children		`ReactNode` The content to display inside the component

Dialog.Description

Prop	Default	Description
className		`string` The CSS class to apply to the component's root element
children		`ReactNode` The content to display inside the component

Dialog.Header

Prop	Default	Description
className		`string` The CSS class to apply to the component's root element
transparentBg	`false`	`boolean` If true, the background will be transparent
children		`ReactNode` The content to display inside the component

Dialog.Body

Prop	Default	Description
className		`string` The CSS class to apply to the component's root element
children		`ReactNode` The content to display inside the component

Dialog.Footer

Prop	Default	Description
className		`string` The CSS class to apply to the component's root element
transparentBg	`false`	`boolean` If true, the background will be transparent
children		`ReactNode` The content to display inside the component

Dialog.CloseButton

Prop	Default	Description
className		`string` The CSS class to apply to the component's root element
dismiss		`() => void` The function to call when the button is clicked

Dialog

Prop	Default	Description
className		`string` The CSS class to apply to the component's root element
children		`ReactNode` The content to display inside the component