ConfirmDialog
A yes/no decision that says what happens before it happens (Figma "Confirm Dialog" 2056:55813, Product × Tone).
An alert dialog: Escape and Cancel close it, an outside click does not; focus is trapped and returns to the trigger. Use Tone=Destructive for anything that removes or stops.
<ConfirmDialog tone="destructive" trigger={<Button variant="destructive" size="44">Excluir conta</Button>}
title="Excluir a sua conta?" consequencesTitle="O que acontece:" consequences={["A proteção da Marlene para hoje."]}
acknowledgeLabel="Entendi que isso não dá pra desfazer." confirmLabel="Excluir conta" cancelLabel="Cancelar"
closeLabel="Fechar" onConfirm={deleteAccount} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Confirm Dialog
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Product · App
| Tone | Confirm Dialog |
|---|---|
| Default | Conectar só a Lia agora?A Marlene ainda não aceitou. Dá pra conectar a Marlene depois. O que acontece:
|
| Destructive | Excluir a sua conta?Tudo o que a Superdinda guarda sobre a sua família é apagado. O que acontece:
|
Product · Backoffice
| Tone | Confirm Dialog |
|---|---|
| Default | Comprar 2 IPs para o pool BR?A cobrança entra na fatura de novembro do fornecedor. O que acontece:
Fica registrado na auditoria com seu nome. |
| Destructive | Derrubar as sessões da Mariana?Ela precisa entrar de novo em todos os aparelhos. O que acontece:
Fica registrado na auditoria com seu nome. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
ConfirmBaseProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| open? | boolean | — | Controlled open state; pair with onOpenChange. |
| defaultOpen? | boolean | — | Uncontrolled initial state. |
| onOpenChange? | ((open: boolean) => void) | — | |
| trigger? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The element that opens it (a DS Button), wired as the dialog trigger. |
| product? | OverlayProduct | — | App (stacked 44 px buttons, radius 22) or Backoffice (inline dense). |
| tone? | OverlayTone | — | Destructive turns the icon chip, the consequences and the confirm red. |
| title | ReactNode | — | |
| description? | ReactNode | — | |
| icon? | ReactNode | — | A lucide glyph for the header chip (triangle-alert, shield-alert…). |
| consequencesTitle? | ReactNode | — | Title of the consequence list, e.g. "O que acontece:". |
| consequences? | ReactNode[] | — | The lines of the consequence list. |
| confirmLabel | ReactNode | — | Label of the main action, a verb that names it ("Desativar conta"). |
| cancelLabel | ReactNode | — | |
| closeLabel | string | — | Accessible name of the X button (pt-BR, e.g. "Fechar"). |
| helper? | ReactNode | — | The Dialog Footer "helper", e.g. "Fica registrado na auditoria com seu nome." |
| loading? | boolean | — | Busy from outside (the confirm shows its spinner and ignores presses). |
| preview? | boolean | — | Render in place, open and not modal: for /__ds and the docs only. |
| className? | string | — | Classes for the panel (e.g. a width in the docs). |
ConfirmDialogProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| open? | boolean | — | Controlled open state; pair with onOpenChange. |
| defaultOpen? | boolean | — | Uncontrolled initial state. |
| onOpenChange? | ((open: boolean) => void) | — | |
| trigger? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The element that opens it (a DS Button), wired as the dialog trigger. |
| product? | OverlayProduct | "app" | App (stacked 44 px buttons, radius 22) or Backoffice (inline dense). |
| tone? | OverlayTone | "default" | Destructive turns the icon chip, the consequences and the confirm red. |
| title | ReactNode | — | |
| description? | ReactNode | — | |
| icon? | ReactNode | — | A lucide glyph for the header chip (triangle-alert, shield-alert…). |
| consequencesTitle? | ReactNode | — | Title of the consequence list, e.g. "O que acontece:". |
| consequences? | ReactNode[] | — | The lines of the consequence list. |
| acknowledgeLabel? | ReactNode | — | The Figma "showAcknowledge" checkbox, e.g. "Entendi que isso não dá pra desfazer.": the confirm stays disabled until it is checked. |
| confirmLabel | ReactNode | — | Label of the main action, a verb that names it ("Desativar conta"). |
| cancelLabel | ReactNode | — | |
| closeLabel | string | — | Accessible name of the X button (pt-BR, e.g. "Fechar"). |
| helper? | ReactNode | — | The Dialog Footer "helper", e.g. "Fica registrado na auditoria com seu nome." |
| loading? | boolean | — | Busy from outside (the confirm shows its spinner and ignores presses). |
| preview? | boolean | — | Render in place, open and not modal: for /__ds and the docs only. |
| className? | string | — | Classes for the panel (e.g. a width in the docs). |
| onConfirm? | (() => unknown) | — | Runs on confirm. Return a promise to show the spinner; the dialog closes when it resolves and stays open if it rejects. |
ReasonOption
One reason to pick in a Reason Dialog (Figma "Reason Option" 2056:55577, Checked × State): a 44 px minimum row with its own radio glyph, the label and an optional hint.
ReasonDialog
A decision that needs a reason on record (Figma "Reason Dialog" 2056:56697, Product × Tone × Confirmation): reason presets, optional details, what happens, and for irreversible operations a typed confirmation.