Skip to main content

Overlays and menus

Dialog

Render the shared modal dialog overlay pattern. Takes over the screen to command your user's undivided attention.

Curated demo

Delete release

This cannot be undone.

Reference

Render the shared modal dialog overlay pattern. Takes over the screen to command your user's undivided attention.

  • Use Dialog for blocking confirmations or focused tasks. It's the UI equivalent of 'Hold up, are you sure?'
  • Keep open-state wiring and trigger behavior in the page. We just handle the pretty box, you handle the state.
  • Always provide a way to close it. Nobody likes a hostage situation.

Example snippet

<Dialog open title="Delete release" closeOnBackdropClick>
  <p>This cannot be undone.</p>
</Dialog>