Dialog

Asks for a decision or shows focused content on top of the page: a title, a description, optional content, then the actions. Destructive marks an action that cannot be undone.

Usage

Import the component and render it.

import { Dialog } from 'src/components/Dialog/Dialog';
import { Button } from 'src/components/Button/Button';

<Dialog
  type="default"
  title="Dialog title"
  description="Add supporting information to help people understand the decision."
  primaryAction="Continue"
  secondaryAction="Cancel"
  dismissible
  trigger={<Button variant="outline" size="sm">Open dialog</Button>}
/>

Accessibility

Role: dialog (alertdialog when Destructive), named by the title and described by the description; modal with showModal().

Key	Action
`Tab / Shift+Tab`	Moves through the dialog’s controls only (the page behind is inert)
`Escape`	Closes the dialog
`Enter / Space`	Activates the focused Button

Opening moves focus into the dialog (to Cancel when Destructive, the safe choice); closing returns it to the trigger.
A click outside the panel closes Default, never Destructive.
Close is an icon-only Button whose label ("Close") is its accessible name.

Type

Set the type prop: Default is "default", Destructive is "destructive".

Default

Destructive

<Dialog type="default" title="Dialog title" primaryAction="Continue" />
<Dialog type="destructive" title="Dialog title" primaryAction="Continue" />

Composition

Use the following composition to build a Dialog:

Dialog
├── Button
└── Separator

Actions

Pass callbacks to respond to the component.

import { Dialog } from 'src/components/Dialog/Dialog';
import { Button } from 'src/components/Button/Button';

<Dialog
  type="default"
  title="Dialog title"
  description="Add supporting information to help people understand the decision."
  primaryAction="Continue"
  secondaryAction="Cancel"
  dismissible
  trigger={<Button variant="outline" size="sm">Open dialog</Button>}
  onPrimaryAction={() => console.log('onPrimaryAction')}
  onSecondaryAction={() => console.log('onSecondaryAction')}
  onOpenChange={(open) => console.log(open)}
/>

Callback	When
`onPrimaryAction`	Called when the primary action is activated.
`onSecondaryAction`	Called when the secondary action is activated.
`onOpenChange`	Called when the dialog opens or closes (trigger, actions, Close, Esc, backdrop).