Composant · Navigation

Stepper

Stable

Indicateur de progression d'un parcours en étapes. Les états (terminé, courant, à venir) sont dérivés de current ; orientations horizontale et verticale.

Exemples

Horizontal

Panier
2 Livraison
3 Paiement

Voir le code (Svelte)

<Stepper
  current={1}
  label="Commande"
  steps={[{"label":"Panier"},{"label":"Livraison"},{"label":"Paiement"}]}
/>

orientation="vertical"

Compte Terminé
Équipe Terminé
3 Projet En cours
4 Invitations

Voir le code (Svelte)

<Stepper
  current={2}
  orientation="vertical"
  label="Intégration"
  steps={[{"label":"Compte","description":"Terminé"},{"label":"Équipe","description":"Terminé"},{"label":"Projet","description":"En cours"},{"label":"Invitations"}]}
/>

API

Prop	Type	Default
`steps`	`{ label: string; description?: string }[]`	requis
`current`	`number` (index 0-based)	`0`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`clickable`	`boolean`	`false`
`onStepClick`	`(index: number) => void`	–
`label`	`string`	`"Progression"`

Rend une liste ordonnée ; l'étape courante porte aria-current="step". Avec clickable, chaque cercle devient un bouton.

Tokens utilisés

--st-semantic-text-primary
--st-semantic-border-subtle