Navigation
OnboardingStepPill
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Onboarding Step Pill
boolean
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).
Viewport · Desktop
| Onboarding Step Pill |
|---|
Viewport · Phone
| Onboarding Step Pill |
|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
StepPillRootProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| viewport? | NavViewport | — | Figma `Viewport`: Desktop shows labels, Phone numbers only. Leave it out to follow the space (inside the App Header, its width). |
| className? | string | — | |
| children? | ReactNode | — |
StepPillItemProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| status | StepStatus | — | Figma `Status`: Done, Current or Upcoming. |
| number | string | number | — | Figma `number`: the step's position. |
| showLabel? | boolean | — | Figma `showLabel`. Leave it out to follow the Root's viewport. |
| doneLabel? | string | "concluído" | A done step's description: "concluído". |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | Done steps only: the route back, e.g. `render={<NextLink href="?passo=quem" />}`. |
| className? | string | — | |
| children | ReactNode | — | Figma `label`: the step name. |