| animation | true | boolean, 'slide-up', 'slide-down' |
How the dialog comes in. Left out it fades in place, false turns the animation off, and a variant name picks one — the value names the variant, so further ones are added to the stylesheet rather than to this prop. |
| backdrop | true | boolean, 'static' |
Apply a backdrop while the dialog is open. 'static' keeps the dialog open on a backdrop click and bounces it instead. |
| backdropVariant6.0.0+ | - | 'scrim', 'translucent' |
Pick the backdrop's look: the dark scrim or the translucent tint of the page. Left out, the component keeps its own default. |
| className | - | string |
A string of all className you want applied to the base component. |
| dark6.0.0+ | - | boolean |
Flip the dialog to the dark color mode, whatever the page around it uses. |
| defaultShow6.0.0+ | - | boolean |
The initial open state of an uncontrolled dialog — read once on mount. |
| fullscreen | - | boolean, 'sm', 'md', 'lg', 'xl', '2xl' |
Cover the whole viewport — always with true, or only below the given breakpoint. |
| keyboard | true | boolean |
Closes the dialog when escape key is pressed. |
| modal | true | boolean |
Open the dialog modally, taking over the page. Set it to false for a dialog that leaves the rest of the page interactive. |
| onClose | - | (() => void) |
Callback fired once the component has closed. |
| onClosePrevented | - | (() => void) |
Callback fired when the dialog is shown, its backdrop is static and a click outside the dialog or an escape key press is performed with the keyboard option set to false. |
| onShow | - | (() => void) |
Callback fired when the component requests to be shown. |
| onShowChange6.0.0+ | - | ((show: boolean) => void) |
Callback fired when the dialog requests an open-state change — a dismiss gesture (Escape, backdrop click) or, in uncontrolled mode, any internal toggle. In controlled mode update show yourself, or the dialog stays as it is. |
| scrollable | - | boolean |
Create a scrollable dialog that allows scrolling the dialog body. |
| show6.0.0+ | - | boolean |
Control the open state. When set, the dialog renders what show says and dismiss gestures only call onShowChange — nothing closes until the parent flips the prop. |
| size | - | 'sm', 'lg', 'xl' |
Size the component small, large, or extra large. |
| unmountOnClose | true | boolean |
By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. |
| visibleDeprecated 6.0.0 | - | boolean |
Toggle the visibility of the dialog component. Use defaultShow / show / onShowChange instead — visible is ignored when either of them is set. |