ConfirmDialog
A controlled confirmation decision with safe initial focus.@gemologic/sheen · overlaysPlayground
This example has no scalar controls. Its validated source remains interactive below.
<><Button onClick={() => { void decision.confirm({ title: "Remove workspace?", description: "Saved views will be removed.", tone: "danger" }); }}>Review removal</Button><decision.Dialog /></>Variant matrix
Imperative confirmation
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/ConfirmDialog.tsx- Tokens
--sheen-color-bg-raised--sheen-color-focus-ring--sheen-elevation-modal
Accessibility
Role: alertdialogKeyboard: Tab, Shift+Tab, Enter, Space, EscapeDo
- Mount the controller Dialog once in the creating owner's theme scope.
Do not
- Do not start irreversible work before the confirmation promise resolves true.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
open * | boolean | — | App-owned visibility. |
onConfirm * | () => void | — | Affirmative decision callback. The app owns closing and subsequent operations. |
onCancel * | () => void | — | Cancellation callback for the safe action or Escape. Outside clicks do not cancel. |
confirmLabel | string | — | Affirmative action label, defaulting to the scoped confirm message. |
cancelLabel | string | — | Safe action label, defaulting to the scoped cancel message. |
tone | "accent" | "danger" | accent | Affirmative action tone. |
title * | string | — | Required visible and accessible title. |
contentId | string | — | Optional unique content ID, forwarded to AlertDialog. |
description * | string | — | Required explanation of the decision and its consequences. |
returnFocus | (() => HTMLElement | undefined) | undefined | — | Optional surviving focus target when the prompt closes. |
shortcutScope | string | — | Unique modal shortcut scope ID, forwarded to AlertDialog. Open confirmations automatically suspend outer shortcut scopes within ShortcutProvider. |
class | string | — | Additional modal content classes. |