Components

AlertDialog

A modal window that interrupts a task to ask one question, to confirm or cancel.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

The title asks the question and the description states the outcome. The confirm label is a verb that repeats the decision; the cancel label comes from the library.

import { AlertDialog, Button } from '@bigbang/ui';

export default function Default() {
  return (
    <AlertDialog
      trigger={<Button variant="secondary">Save changes</Button>}
      title="Save changes?"
      description="Saving replaces the previous version."
      confirmLabel="Save"
      onConfirm={() => {}}
    />
  );
}

Destructive decision

tone="danger" colours the confirm action red. Focus still starts on cancel, so Enter never deletes by accident.

import { AlertDialog, Button } from '@bigbang/ui';

export default function Danger() {
  return (
    <AlertDialog
      tone="danger"
      icon="trash"
      trigger={
        <Button variant="secondary" tone="danger">
          Delete item
        </Button>
      }
      title="Delete item?"
      description="This cannot be undone."
      confirmLabel="Delete"
      onConfirm={() => {}}
    />
  );
}

Running action

When onConfirm returns a promise the confirm button shows a spinner, cancel is disabled and Escape is ignored. The dialog closes when the promise resolves and stays open when it rejects.

import { AlertDialog, Button } from '@bigbang/ui';

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

export default function Async() {
  return (
    <AlertDialog
      tone="danger"
      trigger={
        <Button variant="secondary" tone="danger">
          Delete item
        </Button>
      }
      title="Delete item?"
      description="This cannot be undone."
      confirmLabel="Delete"
      onConfirm={() => wait(1500)}
    />
  );
}

Light and dark mode

The panel and backdrop use the same tokens as Dialog.

import { AlertDialog, Button } from '@bigbang/ui';

export default function Danger() {
  return (
    <AlertDialog
      tone="danger"
      icon="trash"
      trigger={
        <Button variant="secondary" tone="danger">
          Delete item
        </Button>
      }
      title="Delete item?"
      description="This cannot be undone."
      confirmLabel="Delete"
      onConfirm={() => {}}
    />
  );
}