Components

AlertDialog

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

Storybook: Storybook
Source: Source

When to use

AlertDialog is for moments that need an explicit decision before going on: deleting an item, overwriting the previous version, discarding unsaved changes.

When not to use

For a form or several fields: Use Dialog.
For actions that can be undone: Do the action and show a notification with an Undo action.
To inform: Use an inline alert.

Anatomy

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={() => {}}
    />
  );
}

Title: Asks the decision as a question.
Description: States what happens on confirm.
Cancel: Secondary button; focus starts here.
Confirm: Primary button that repeats the decision; red when destructive.
Icon (optional): a 40 px tile beside the title set with icon, on a red fill with tone="danger". Decorative; screen readers skip it.

Behaviour

A press on the backdrop does not close it; Escape and cancel do.
On open, focus moves to cancel.
The confirm button calls onConfirm; for a synchronous action the dialog closes at once.
For an action that returns a promise the dialog is busy (aria-busy), the confirm button shows its loading state, and cancel and Escape do nothing.
If the promise rejects the dialog stays open; show the error in the body.
It always stays centred; it does not become a bottom sheet on narrow screens.

Guidelines

Write the title as a question: “Delete item?”.
Let the confirm label repeat the verb in the title: “Delete”. Do not use “OK” or “Yes”.
State the irreversible outcome plainly in the description.
Do not confirm every action; only those with no way back.

Content

Turkish	English
Öğe silinsin mi?	Delete item?
Bu işlem geri alınamaz.	This cannot be undone.
Sil	Delete
Vazgeç	Cancel

Glass

Under a Provider material="glass", the confirmation turns glass with the higher-contrast tint. material="solid" keeps it solid. Set material="solid" when children holds a long list.

Dialog: A window for tasks and forms.
Button: tone="danger" and the loading state.