Navigation
PillNav
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Pill Nav
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).
Type · Dashboard
| Pill Nav |
|---|
Type · Onboarding
| Pill Nav |
|---|
Type · Onboarding Phone
| Pill Nav |
|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
PillNavProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| className? | string | — |
PillNavItemProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| current? | boolean | false | The current destination: white pill, `aria-current="page"`. |
| badge? | number | — | Figma `showBadge` + `count`: open alerts on "Alertas". Zero hides it. |
| badgeLabel? | string | — | The badge read as the link's description. Default "2 novos". |
| leading? | ReactNode | — | Figma `Leading=Step` (legacy onboarding): a step marker before the label. |
| showLabel? | boolean | true | Figma `Show label`. Off keeps the label for screen readers only. |
| disabled? | boolean | false | Legacy Figma `State=Disabled`; do not use: hide a destination instead. |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The router's link, e.g. `render={<NextLink href="/alertas" />}`. |
| className? | string | — | |
| children | ReactNode | — | Figma `label`: the destination name. |