Skip to content
Components

Dialog

Root component for a modal dialog. Manages open/closed state and accessibility. Import from "@instruments/materia-ui/components/dialog".

Usage

@instruments/materia-ui/components/dialog

<Dialog>
  <DialogTrigger
    render={<Button emphasis="outline" icon={FolderPlus} tone="neutral" />}
  >
    Add to palette
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Add to palette</DialogTitle>
      <DialogDescription>
        File Terrazzo Bianco under a palette, or start a new one.
      </DialogDescription>
    </DialogHeader>
    <Text variant="muted">Coastal Kitchen · 12 materials</Text>
    <DialogFooter>
      <DialogClose render={<Button emphasis="outline" tone="neutral" />}>
        Cancel
      </DialogClose>
      <DialogClose render={<Button />}>Add to palette</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Best practices

  • Use Dialog for a centred blocking modal (form, details, footer actions); a destructive confirm is AlertDialog, an anchored non-blocking panel is Popover.

  • A panel that slides in from a screen edge is a Sheet (or Drawer for a drag-to-dismiss bottom sheet), not a Dialog.

  • Always render a DialogTitle (wrap in sr-only if visually hidden) so the modal is announced; DialogContent uses the 36px --radius-modal corner.

Props

DialogContent

PropTypeDefaultDescription
classNamestring
overlayClassNamestring

Extra classes for the overlay behind the dialog.

showCloseButtonbooleantrue

Show close button in the top-right corner.

sizeDialogContentSize"default"

Panel geometry; see {@link DialogContentSize}.

DialogDescription

PropTypeDefaultDescription
classNamestring

DialogFooter

PropTypeDefaultDescription
justify"end" | "between""end"

Button alignment within the footer.

DialogOverlay

PropTypeDefaultDescription
classNamestring | undefined

DialogTitle

PropTypeDefaultDescription
classNamestring

Also exports

  • componentDialog
  • constdialogAnatomy
  • componentDialogClose
  • typeDialogContentSize
  • componentDialogHeader
  • componentDialogPortal
  • componentDialogTrigger

Anatomy

Dialog

dialog

Modal overlay for focused content

DialogTrigger

dialog-trigger

Button to open the dialog

DialogContent

dialog-content

Main modal container

DialogHeader

dialog-header

Header area

DialogTitle

dialog-title

Modal heading

DialogDescription

dialog-description

Modal description

DialogFooter

dialog-footer

Footer with action buttons

Composition

Builds on

Button, Flex