Overlays
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.
The whole row is the click target. Checked = brand border on the lilac surface; Disabled = muted tokens.
<ReasonOption value="blocked" label="IP bloqueado pelo WhatsApp" hint="A sessão caiu com erro de bloqueio nas últimas 24 h." />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Reason Option
boolean
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).
Checked · False
| Default | Hover | Focus | Disabled |
|---|---|---|---|
Checked · True
| Default | Hover | Focus | Disabled |
|---|---|---|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
ReasonOptionGroupProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| className? | string | — |
ReasonOptionProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| value | string | — | The value the group reports when this reason is chosen. |
| label | ReactNode | — | The Figma "label", e.g. "IP bloqueado pelo WhatsApp". |
| hint? | ReactNode | — | The Figma "showHint" + "hint" line, read as the radio's description. |
| disabled? | boolean | false | |
| className? | string | — |