Feedback
StepBadge
The step number or its outcome in a disc (Figma "Step Badge" 173:186): todo and active show the number, done a check, waiting an hourglass, failed an x and declined a bar.
Use it in steppers and step lists, next to a label that says the state in words.
<StepBadge state="active" number={2} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Step Badge
number
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).
| Todo | Active | Done | Waiting | Failed | Declined |
|---|---|---|---|---|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| state? | "active" | "declined" | "done" | "failed" | "todo" | "waiting" | null | "todo" | |
| number? | string | number | — | The step number, shown while the step is todo or active. |
| label? | string | — | Names the state for assistive tech ("Passo 2, feito"). Without it the disc is decorative and the step label says it. |
| className? | string | — |