Backoffice
Sidebar
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Sidebar
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).
Sidebar ·
| Backoffice / Sidebar |
|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
SidebarRootProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| className? | string | — |
SidebarGroupProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | ReactNode | — | Figma "Backoffice / Sidebar Group Label" 2056:43442 (Console/XS). |
| className? | string | — | |
| children? | ReactNode | — |
SidebarItemProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| current? | boolean | false | The page you are on: muted fill, medium label, brand icon, aria-current="page". |
| disabled? | boolean | false | A page with no routes yet: greyed, no link, not focusable. |
| icon? | ReactNode | — | Figma "leadingIcon" (showIcon): a lucide element. |
| count? | ReactNode | — | Figma "count" (showCount): right-aligned number. |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The router's link, e.g. `render={<NextLink href="/infrastructure/proxies" />}`. |
| className? | string | — | |
| children? | ReactNode | — |