Dialog
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Dialog Header
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).
Tone · Default
| Viewport | Dialog Header |
|---|---|
| Desktop | Conectar só a Lia agora?A Marlene ainda não aceitou. Dá pra conectar a Lia agora e a Marlene quando ela disser sim. |
| Phone | Conectar só a Lia agora?A Marlene ainda não aceitou. Dá pra conectar a Lia agora e a Marlene quando ela disser sim. |
Tone · Destructive
| Viewport | Dialog Header |
|---|---|
| Desktop | Conectar só a Lia agora?A Marlene ainda não aceitou. Dá pra conectar a Lia agora e a Marlene quando ela disser sim. |
| Phone | Conectar só a Lia agora?A Marlene ainda não aceitou. Dá pra conectar a Lia agora e a Marlene quando ela disser sim. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
DialogRootProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| role? | "alertdialog" | "dialog" | "dialog" | "alertdialog" for a decision the person must answer (confirm, delete): no dismissal by clicking outside, announced as an alert dialog. |
DialogContentProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| product? | "app" | "backoffice" | null | "app" | |
| tone? | OverlayTone | "default" | Default or Destructive: drives the header icon chip and the footer. |
| size? | "lg" | "md" | "sm" | null | "md" | |
| scrim? | ScrimTone | "soft" | The dimmed layer behind the panel. |
| className? | string | — | |
| children? | ReactNode | — |
DialogPreviewProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| product? | "app" | "backoffice" | null | "app" | |
| tone? | OverlayTone | "default" | |
| size? | "lg" | "md" | "sm" | null | "md" | |
| viewport? | OverlayViewport | "desktop" | |
| role? | "alertdialog" | "dialog" | "dialog" | Announce as an alert dialog (Confirm, Reason). |
| bare? | boolean | false | Provide the panel context only, with no panel around the children (to show a Dialog.Header or Dialog.Footer on its own). |
| className? | string | — | |
| children? | ReactNode | — |
DialogCloseProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | — | Accessible name of the X button (pt-BR, e.g. "Fechar"). |
| className? | string | — |
DialogDismissProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| render | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The element that closes the dialog, usually a DS Button. |
| children? | ReactNode | — |
DialogFooterProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| layout? | "inline" | "stacked" | — | Inline (buttons in a row, the Backoffice default) or Stacked (full-width 44 px buttons, primary on top, the App default). |
| helper? | ReactNode | — | The Figma "helper" text, e.g. "Fica registrado na auditoria com seu nome." |
| className? | string | — | |
| children? | ReactNode | — |