ExperimentalorganismFeedback

ConfirmDialog

The one "Are you sure?" dialog, for actions worth a second look.

import { … } from "@brdgapp/ui/components/confirm-dialog"

Usage

ConfirmDialog is Bridge's one "are you sure?" dialog, for actions worth a second look, such as stopping sharing or disconnecting an account. It asks a question, says what will happen, and offers Cancel and a confirm button that names the action. The usual mistake is the browser's window.confirm, or a confirm button that just says OK.

When to use

Before an action that's hard to undo or affects someone else: Stop sharing, Disconnect, Delete.
destructive when it removes something: red button and a warning icon.

When not to use

For changes that lose nothing, like a switch, a choice or a tag: they apply at once (Saving pattern). Bridge has no undo yet, so keep ConfirmDialog for real losses.
Never window.confirm.

One of each

Bridge has one button, one label, one menu, one tooltip, one confirm dialog and one table. Before building a control, look for it here. Never hand-make a second version (a <button> with pill classes, a <span> chip, a new kebab), even if it looks the same today: copies drift.

Say what happens

Buttons start with a verb and name the object: "Stop sharing", not "OK" or "Submit". A confirm dialog asks a question about the specific thing and its button repeats the verb. Errors say what happened and what to do next.

Anatomy

Stop sharing with Leah Okonkwo?

Leah Okonkwo will no longer see your network.

Drawn in place and smaller. The real dialog opens over the page.

Backdrop. Dims and blurs the page.
Panel. Up to 384px wide, raised surface, 16px corners, the dialog shadow.
Warning icon. destructive only: a red triangle in a soft red circle.
Title. A question, 16px Bold.
Body. What happens, 13px.
Buttons. Cancel (secondary) and the confirm button (primary, or destructive), each half the width.

Examples

Destructive

Confirm runs a pretend request: while it spins, the dialog can't be dismissed.

Not destructive

States

	Open	Busy
Destructive
Not destructive

State	What happens
Open	Focus moves into the dialog; the page behind can't be reached.
Busy	The confirm button spins; Cancel, Esc and the backdrop do nothing until it finishes.
Closed	Focus returns to the button that opened it.

Behavior

Built on Base UI AlertDialog: focus is trapped inside, and the title and body are linked to the dialog for screen readers.
Clicking the backdrop doesn't close it: an alert dialog needs a deliberate answer.
Confirm awaits onConfirm, then closes. While busy, nothing can dismiss it, so the person sees the outcome.
Rendered outside the page above menus (z 90), because it's often opened from a menu.

Do and don't

Ask about the specific thing: "Stop sharing with Leah Okonkwo?"

Don't

Ask "Are you sure?"

Name the action on the button: "Stop sharing".

Don't

Label it OK, Yes or Confirm.

Content

Title: a question naming the object. Body: what happens, and whether it can be undone.
Button: the same verb as the title. Cancel is always "Cancel".

Accessibility

The dialog is announced with its title and body when it opens.

Keys	Action
`Tab`	Moves between Cancel and confirm, and stays inside the dialog.
`Esc`	Cancels (unless busy).

API reference