Modal

The Modal component is a versatile UI element that displays content in a layer above the main application interface, requiring user interaction before returning to the main view. It is used for critical information, forms, confirmations, and other interactive tasks. Modals help focus user attention on specific content or actions, improving the overall user experience by preventing background interactions.

Body

animated

number | false | true

Determines whether the content should animate when it is shown or hidden. - If `true`, the `animating` state will be `true` when the content is shown or hidden and it will wait for a CSS animation/transition to end before becoming `false`. - If it's set to a number, the `animating` state will be `true` when the content is shown or hidden and it will wait for the number of milliseconds to pass before becoming `false`. @deprecated Manually setting the `animated` prop is no longer necessary. This will be removed in a future release.

defaultOpen

Boolean | undefined = false

Whether the content should be visible by default.

disclosure

DisclosureStore

A reference to another disclosure store that controls another disclosure component to keep them in sync. Element states like `contentElement` and `disclosureElement` won't be synced. For that, use the [`store`](https://ariakit.org/reference/disclosure-provider#store) prop instead. Live examples: - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)

setMounted

(mounted: boolean) => void

A callback that gets called when the `mounted` state changes. @example const [mounted, setMounted] = useState(false); const disclosure = useDisclosureStore({ setMounted });

setOpen

(open: boolean) => void

A callback that gets called when the [`open`](https://ariakit.org/reference/disclosure-provider#open) state changes. @example const [open, setOpen] = useState(false); const disclosure = useDisclosureStore({ open, setOpen });

Close

disabled

Boolean

isLoading

Boolean

shape

"circle" | "square"

size

"xxs" | "xs" | "sm" | "md" | "lg"

variant

"disabled" | "primary" | "secondary" | "tertiary" | "primary-info" | "secondary-info" | "primary-success" | "secondary-success" | "ghost" | "primary-warning" | "secondary-warning" | "primary-danger" | "secondary-danger"