Feedback & Status
Modal
A modal is an overlay element which blocks interaction with elements outside it.
A modal is an overlay element which blocks interaction with elements outside it.
Use Sheet for panels that slide in from an edge of the viewport.
Component props#
| Name | Type | Description |
|---|---|---|
| placement | string | "center" | "fullscreen" (default: "center") |
| isDismissable | boolean | Can be dismissed by clicking outside (default: true) |
| isKeyboardDismissDisabled | boolean | Disables Escape key dismissal |
| isOpen | boolean | Controlled open state. Used when the modal is not wrapped in a DialogTrigger |
| defaultOpen | boolean | Initial open state. Used when the modal is not wrapped in a DialogTrigger |
| onOpenChange | (open: boolean) => void | Called when the open state changes |
| showCloseButton | boolean | Renders a quiet close button in the top-right corner (default: false) |
Parts#
Modal can also be composed directly with the shadcn-style parts, which map onto the Base UI dialog primitives.
| Name | Type | Description |
|---|---|---|
| ModalTrigger | component | Opens the modal |
| ModalClose | component | Closes the modal |
| ModalTitle | component | Accessible title, rendered as a Heading |
| ModalDescription | component | Accessible description, rendered as muted Text |
A fullscreen modal now removes the inner dialog's border, radius and shadow automatically, so no
className override is needed.