Drawer
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Drawer
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).
Size · sm
| Drawer |
|---|
CLIENTE Mariana Alvesmariana.alves@exemplo.com.br · cliente desde mar 2026 · 2 pessoas protegidas Protege a Lia e a Marlene (sogra, 76). Plano família, cobrança no cartão final 4242, próxima em 25/10. |
Size · md
| Drawer |
|---|
CLIENTE Mariana Alvesmariana.alves@exemplo.com.br · cliente desde mar 2026 · 2 pessoas protegidas Protege a Lia e a Marlene (sogra, 76). Plano família, cobrança no cartão final 4242, próxima em 25/10. |
Size · lg
| Drawer |
|---|
CLIENTE Mariana Alvesmariana.alves@exemplo.com.br · cliente desde mar 2026 · 2 pessoas protegidas Protege a Lia e a Marlene (sogra, 76). Plano família, cobrança no cartão final 4242, próxima em 25/10. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
DrawerContentProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| size? | "lg" | "md" | "sm" | null | "md" | |
| scrim? | ScrimTone | "soft" | |
| className? | string | — | |
| style? | React.CSSProperties | ((state: DrawerPopupState) => React.CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
| children? | ReactNode | — |
DrawerPreviewProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| size? | "lg" | "md" | "sm" | null | "md" | |
| className? | string | — | |
| children? | ReactNode | — |
DrawerHeaderProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| eyebrow? | ReactNode | — | Small caps line above the title (Figma "eyebrow", e.g. "CLIENTE"). |
| meta? | ReactNode | — | One line under the title (Figma "meta"): e-mail, since when, how many. |
| avatar? | ReactNode | — | The Figma "showAvatar" slot: a DS Avatar (Brand 40) before the text. |
| actions? | ReactNode | — | The Figma "Actions" slot: buttons next to the close button. At size sm they move to the footer so the title keeps its room. |
| closeLabel | string | — | Accessible name of the close button (pt-BR, e.g. "Fechar"). |
| className? | string | — | |
| children | ReactNode | — | The title (Figma "title", e.g. the client's name). |
DrawerFooterProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| helper? | ReactNode | — | The Figma "showHelper" text, e.g. "Fica registrado na auditoria com seu nome." |
| className? | string | — | |
| children? | ReactNode | — |