Dialog

A modal panel with a title and a row of actions.

import { Dialog } from '@textui/core';

<Dialog
  title="Delete namespace?"
  actions={[
    { id: 'cancel', label: 'Cancel' },
    { id: 'delete', label: 'Delete', tone: 'danger' },
  ]}
  onClose={() => {}}
>
  <text content="This cannot be undone." />
</Dialog>

Props

| Prop | Type | Default | | | — | — | — | — | | title | string | | | | actions | { id: string; label: string; tone?: 'default' \| 'primary' \| 'secondary' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'muted'; onPress?(): void }[] | [] | Buttons along the bottom. The first is the default action. | | onClose | () => void | | | | width | number | 50 | Cells wide. The dialog centres itself in whatever is left. |

Plus everything on BoxProps.

Role: dialog.

Rendered on the modal layer, which is what traps focus inside it and dismisses it on escape - the dialog does not implement either, and neither should anything else that needs them.

Actions are laid out for you, so OK and Cancel line up regardless of order - see Button on why solid and outline are the same height.

See also

• PromptDialog - a dialog that asks for a string
• Layers - trapping and dismissal
• DangerZone - for irreversible actions, a better guard