Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesProgressStepper

Stepper

Position in a sequence. koala-stepper for a horizontal step form, koala-stepper-chain for a vertical milestone timeline, koala-stepper-dots for a compact row of dots.

<koala-stepper>

Sequence

  1. Completed: Property
  2. Current step: Contact
  3. Review

Chain

Canonical

Quote accepted

2 days

Client onboarded

3 days

Order searches

In progress

Started 1 week ago

Searches ordered12 Jun

Raising enquiries

Completed | Current | Blocked | Upcoming

Completed stage

Done

4 days

Current stage

In progress

Blocked stage

Blocked

Upcoming stage

Dots

tone="Plum" (default)
current=1
current=7 (complete)

Stepper API

model StepperModel

Chain API

stages StepperChainStage list
collapse-completed bool
total-duration string

Dots API

total int
current int
tone PlumOnPrimaryOnTint
labels string list
states DoneCurrentUpcomingBlocked
targets string list