Modal

The Modal component is designed to render a modal dialog, providing a focused interface for users to complete a task or read information. The ModalContent component is used within Modal to structure the content of the modal, including the title, description and footer. The ModalTrigger component is used to render a trigger element that opens the Modal when clicked.

Usage Guidelines

Provide a clear and concise label for the ModalTrigger to indicate the purpose of the modal. Use the ModalContent component to structure the content of the modal, ensuring that each section is easily accessible and distinguishable.

<ModalTrigger>
  <Button>Open Modal</Button>
  <Modal>
    {({ close }) => (
      <ModalContent
        title="Are you sure?"
        description="Updating this order will automatically send an invoice to the customer."
        footer={
          <>
            <Button>Go back</Button>
            <Button>Continue</Button>
          </>
        }
      />
    )}
  </Modal>
</ModalTrigger>

Props

ModalTrigger Props

interface MenuTriggerProps

trigger ? MenuTriggerType

How the menu is triggered.

Defaults to 'press'

isOpen ? boolean

Whether the overlay is open by default (controlled).

defaultOpen ? boolean

Whether the overlay is open by default (uncontrolled).

onOpenChange ? (isOpen: boolean) => void

Handler that is called when the overlay's open state changes.

Modal Props

interface ModalProps

role ? "dialog" | "alertdialog"

The role of the dialog.

Defaults to dialog

children ({ close }: { close: () => void; })

The children to render in the dialog.

shouldCloseOnInteractOutside ? (element: Element) => boolean

When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.

isEntering ? boolean

Whether the modal is currently performing an entry animation.

isExiting ? boolean

Whether the modal is currently performing an exit animation.

UNSTABLE_portalContainer ? Element

The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.

Defaults to document.body

isDismissable ? boolean

Whether to close the modal when the user interacts outside it.

Defaults to false

isKeyboardDismissDisabled ? boolean

Whether pressing the escape key to close the modal should be disabled.

Defaults to false

isOpen ? boolean

Whether the overlay is open by default (controlled).

defaultOpen ? boolean

Whether the overlay is open by default (uncontrolled).

onOpenChange ? (isOpen: boolean) => void

Handler that is called when the overlay's open state changes.

className ? ClassNameOrFunction

The CSS className for the element. A function may be provided to compute the class based on component state.

style ? StyleOrFunction

The inline style for the element. A function may be provided to compute the style based on component state.

slot ? string | null

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.