Components
Dialog
Root component for a modal dialog. Manages open/closed state and accessibility. Import from "@instruments/materia-ui/components/dialog".
Usage
Best practices
Use
Dialogfor a centred blocking modal (form, details, footer actions); a destructive confirm isAlertDialog, an anchored non-blocking panel isPopover.A panel that slides in from a screen edge is a
Sheet(orDrawerfor a drag-to-dismiss bottom sheet), not aDialog.Always render a
DialogTitle(wrap insr-onlyif visually hidden) so the modal is announced;DialogContentuses the 36px--radius-modalcorner.
Props
DialogContent
DialogDescription
DialogFooter
DialogOverlay
DialogTitle
Also exports
- component
Dialog - const
dialogAnatomy - component
DialogClose - type
DialogContentSize - component
DialogHeader - component
DialogPortal - component
DialogTrigger