StepIndicator

@/components/ui/StepIndicator

Viser FREMDRIFT gjennom et fast antall steg — ikke et navigasjonselement, prikkene/pillene er ikke klikkbare.

Når brukes den

`prikker` for en kort, ikke-navngitt sekvens der bare POSISJONEN teller — en liten onboarding-modal, en karusell.
`piller` når stegene har en RETNING man beveger seg gjennom — en registreringsflyt, der den ekstra bredden gjør «hvor er jeg nå» lettere å se.
Ikke bruk til andel av ÉN helhet (0–100 %) — det er Progress sin jobb.
Ikke bruk som klikkbar navigasjon — komponenten viser hvor du er, den flytter deg ikke dit.

prikker

Kort, ikke-navngitt sekvens — kun posisjonen teller.

<StepIndicator antall={4} aktiv={1} variant="prikker" />

piller

Sekvens med en retning — aktivt steg blir en avlang kapsel.

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

antall *

number

—

Totalt antall steg.

aktiv *

number

—

0-basert indeks for aktivt steg.

variant

'prikker' | 'piller'

'prikker'

`piller` for sekvenser med en retning, `prikker` for en kort, posisjonsbasert sekvens.

className

string

—

Ekstra klasser på rot-diven.