BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

AlertDialog

Stable
Edit in Studio

Stops the user to confirm an action with consequences, usually destructive: delete tokens, revoke access, force publish. It asks one question and offers two answers.

Updated Oct 16, 2026

Rendered with the real component
Light
Dark

When to use

Use it for

  • Before an action that cannot be undone or that affects other people: deleting, revoking, overwriting.
  • tone primary for consequential but safe actions, like publishing a release to every consumer.

Not for

  • Actions that can be undone: do them right away and offer Undo in a Toast.
  • Collecting input: use Dialog.
  • Routine saves: confirmation fatigue teaches people to click through without reading.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Do

Ask a question that names the action and the object

"Delete 3 tokens?" with a confirm button "Delete tokens" is understood without reading the description.

Do

Say the consequence, including what cannot be undone

"Components that use them fall back to their defaults. This cannot be undone."

Don't

"Are you sure?" with Yes and No

It hides what is about to happen. Name the action in the title and on the button.

Accessibility

  • Base UI AlertDialog: role alertdialog, named by the title, described by the consequence.
  • Focus starts on Cancel, the safe choice, so a reflexive Enter does not destroy anything.
  • It does not close on an outside click; Escape and Cancel close it and focus returns to the trigger.
  • While loading, the confirm button keeps focus and announces aria-busy.

Anatomy and tokens

Read from packages/react/src/components/AlertDialog/AlertDialog.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

3 tokens 0 semantic or component, change with theme and brand 1 density, change with comfortable or compact 2 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/AlertDialog/AlertDialog.tsx, so this table cannot drift from the code.

Prop Type Default Description
open boolean none No description in the code yet.
defaultOpen boolean none No description in the code yet.
onOpenChange (open: boolean) => void none No description in the code yet.
children ReactNode none AlertDialogTrigger and AlertDialogContent.

Playground

AlertDialog has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.

Light
Dark

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open AlertDialog in Storybook) .

Embed Storybook stories here (4)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Destructive

Consequential

AsyncConfirm

AllStates

Changelog

  • New

    Overlays: Dialog (sizes, scrolling body, footer, close last in focus order), AlertDialog (destructive confirmations, async confirm), Drawer (start, end, bottom with swipe), Popover, Tooltip with TooltipProvider, Menu (icons, shortcuts, groups, submenus, checkbox and radio items, danger items). Every popup carries the theme, brand and density scope. Adds menu and drawer component tokens.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes