💠 Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Usage

The Dialog component, often referred to as a modal, is an overlay window that appears in front of app content to provide critical information or prompt the user to make a decision.

These dialogs disable interaction with the underlying content until the overlay is dismissed, making them useful for focusing the user's attention on the task at hand.

When to use

• Critical information: Use a Dialog to display important information that requires the user's immediate attention or action, such as error messages or warnings.
• User decisions: Employ Dialogs to interrupt workflows to request user decisions or confirmation before proceeding with an action, like deleting data or confirming a purchase.
• Focused tasks: Utilize Dialogs to create a focused environment for the user to perform a specific task without distractions, such as filling out a form or configuring settings.

Avoid using Dialogs for non-critical information that could be presented less intrusively. Do not overuse Dialogs, as they can be disruptive and frustrating if not used sparingly and appropriately.

Examples

Default

Custom close button

Notes

To activate the Dialog component from within a Context Menu or Dropdown Menu, you must encase the Context Menu or Dropdown Menu component in the Dialog component.

<Dialog>
  <ContextMenu>
    <ContextMenuTrigger>Right click</ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Open</ContextMenuItem>
      <ContextMenuItem>Download</ContextMenuItem>
      <DialogTrigger asChild>
        <ContextMenuItem>
          <span>Delete</span>
        </ContextMenuItem>
      </DialogTrigger>
    </ContextMenuContent>
  </ContextMenu>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. Are you sure you want to permanently delete this file from our servers?
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button type="submit">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the Dialog WAI-ARIA design pattern (opens in a new tab).

Keyboard interactions