Backoffice
AreaTab
One area of the console (Figma "Backoffice / Area Tab" 2056:42039): Default, Hover, Focus, Active, Disabled.
Inactive labels are Console/SM regular, as shipped; Disabled is muted-foreground at 45%.
<AreaTab current href="/">Visão geral</AreaTab>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
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).
| Default | Hover | Focus | Active | Disabled |
|---|---|---|---|---|
| Visão geral | Visão geral | Visão geral | Visão geral | Visão geral |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
AreaTabsProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| className? | string | — |
AreaTabProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| current? | boolean | false | The area the page lives in: foreground label + 2 px underline, aria-current="page". |
| disabled? | boolean | false | An area with no routes yet: greyed, not focusable, no link (never "em breve"). |
| count? | ReactNode | — | Figma "count" (showCount): a number after the label. |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The router's link, e.g. `render={<NextLink href="/clients" />}`. |
| className? | string | — | |
| children? | ReactNode | — |