Example
Related
- AlertDialog — For confirmation of an action or acknowledgment.
- DialogTrigger — A controller for dialog state, bound to an associated trigger.
- DialogContainer — A controller for dialog state, without the requirement for a trigger element.
Props
Dismissable
Dismissable dialogs support an optional onDismiss prop which is triggered whenever the dialog’s close button is clicked. If this event callback is not needed, the dismissiable dialog will behave as normal without passing this callback through.
Size
Only dialogs of type "modal" support a size prop. Sizes on mobile devices are unaffected by this prop due to screen constraints.
Slots
Use slots to populate the dialog content by providing the following components as children.
It is important to note that the Heading, Header, Content, and Footer components accept React.ReactNode, not just strings. This allows you to create dialogs for more complex workflows.
Heading
Heading is required, it acts as the title for the dialog, providing context for what the user should expect.
Content
Content is also required. It acts as the “body” of the dialog: this is where you’ll compose children.
Button group
Use the ButtonGroup component to provide actions for the dialog. Typically displayed below the content slot, except within fullscreen modal dialogs, where it is displayed alongside the header.
Header
You may optionally provide a Header component which will be rendered alongside the Heading, except on small devices where it will stack below the Heading content.
Footer
You may optionally provide a Footer component which will be rendered alongside the ButtonGroup, except on small devices where it will stack above the ButtonGroup actions.