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.
The confirm stays off until a reason is picked, the details are filled when required, and the phrase matches. An alert dialog with labelled fields; App 480 wide, Backoffice 560.
<ReasonDialog product="backoffice" tone="destructive" title="Queimar o IP proxy-br-07?"
reasonsLabel="Motivo" reasons={[{ value: "blocked", label: "IP bloqueado pelo WhatsApp" }, { value: "other", label: "Outro" }]}
detailsRequiredWhen="other" detailsLabel="Detalhes" confirmPhrase="proxy-br-07"
confirmPhraseLabel="Digite proxy-br-07 para confirmar" confirmLabel="Queimar IP" cancelLabel="Cancelar"
closeLabel="Fechar" onConfirm={({ reason, details }) => burn(reason, details)} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Reason 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 · Confirmation | Reason Dialog |
|---|---|
| Default · None | Não é risco?Fica na auditoria com seu nome. O que acontece:
|
| Default · Typed | Não é risco?Fica na auditoria com seu nome. O que acontece:
|
| Destructive · None | Encerrar a proteção da Marlene?Fica na auditoria com seu nome. O que acontece:
|
| Destructive · Typed | Encerrar a proteção da Marlene?Fica na auditoria com seu nome. O que acontece:
|
Product · Backoffice
| Tone · Confirmation | Reason Dialog |
|---|---|
| Default · None | Refazer o pareamento da Marlene?Fica na auditoria com seu nome. O que acontece:
|
| Default · Typed | Refazer o pareamento da Marlene?Fica na auditoria com seu nome. O que acontece:
|
| Destructive · None | Queimar o IP proxy-br-07?Fica na auditoria com seu nome. O que acontece:
|
| Destructive · Typed | Queimar o IP proxy-br-07?Fica na auditoria com seu nome. O que acontece:
|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| open? | boolean | — | Controlled open state; pair with onOpenChange. |
| defaultOpen? | boolean | — | Uncontrolled initial state. |
| onOpenChange? | ((open: boolean) => void) | — | |
| trigger? | React.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…). |
| reasons | ReasonChoice[] | — | The reasons to pick from (Figma "Reason · x4"). |
| reasonsLabel | string | — | Accessible name of the reason list, e.g. "Motivo". |
| defaultReason? | string | — | Reason picked when the dialog opens. |
| detailsRequiredWhen? | string | — | The reason that makes the details field required (e.g. "other"). |
| detailsLabel? | ReactNode | — | The Figma "showDetails" field: label, placeholder and hint. |
| detailsPlaceholder? | string | — | |
| detailsHint? | ReactNode | — | |
| consequencesTitle? | ReactNode | — | Title of the consequence list, e.g. "O que acontece:". |
| consequences? | ReactNode[] | — | The lines of the consequence list. |
| confirmPhrase? | string | — | The Figma Confirmation=Typed variant: the phrase to type (an id, a nickname) before the confirm turns on, e.g. "proxy-br-07". |
| confirmPhraseLabel? | ReactNode | — | What to type, e.g. "Digite proxy-br-07 para confirmar". |
| 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? | ((result: ReasonDialogResult) => unknown) | — | Runs on confirm with the reason and the details. Return a promise to show the spinner; it closes on resolve and stays open on reject. |