Dialog

MD3 basic dialog: focus is trapped inside, Escape and scrim click close it, and focus returns to the opener on close.

const [open, setOpen] = useState(false)

<Button onClick={() => setOpen(true)}>Open dialog</Button>
<Dialog
  open={open}
  onClose={() => setOpen(false)}
  title="Reset settings?"
  actions={<Button variant="text" onClick={() => setOpen(false)}>OK</Button>}
>
  This restores the default configuration.
</Dialog>

Props

Prop	Type	Default	Description
`actions`	`ReactNode`	—	Trailing action buttons (typically text Buttons).
`children`	`ReactNode`	—	Supporting content / body.
`closeLabel`	`string`	`Close`	Accessible label of the full-screen close button.
`fullScreen`	`boolean`	`false`	Full-screen dialog: a top bar (close + title + action) over full-bleed content.
`icon`	`ReactNode`	—	Optional hero icon (Secondary, 24dp, centers the title).
`onClose`	`(() => void)`	—	Called on scrim click or Escape.
`open` *	`boolean`	—	Whether the dialog is shown.
`title`	`ReactNode`	—	Dialog headline.

Props​

Props