Stepper Indicator Component - How to use
The stepper indicator is used to indicate the relational step number or value, helping the user maintain context in a multi-step flow or sequence. It should be used in larger stepper item patterns with an appropriate label, description, and visual language indicating directionality.
There are two types of indicators,
step
and
task
which can be used in conjunction, or separately depending on hierarchical needs or requirements.
Stepper::Step::Indicator
Basic use
1
<Hds::Stepper::Step::Indicator @text="1" @status="incomplete" />
Renders to:
1
Adding interactivity
1
<Hds::Stepper::Step::Indicator @text="1" @status="incomplete" @isInteractive= />
Renders to:
1
Indicating status
1
<Hds::Stepper::Step::Indicator @text="1" @status="progress" @isInteractive= />
Renders to:
1
Indicating processing
<Hds::Stepper::Step::Indicator @text="1" @status="processing" @isInteractive= />
Renders to:
Rendering a complete step
<Hds::Stepper::Step::Indicator @text="1" @status="complete" @isInteractive= />
Renders to:
Stepper::Task::Indicator
Basic use
<Hds::Stepper::Task::Indicator @status="incomplete" />
Renders to:
Adding interactivity
<Hds::Stepper::Task::Indicator @status="incomplete" @isInteractive= />
Renders to:
Indicating status
<Hds::Stepper::Task::Indicator @status="progress" @isInteractive= />
Renders to:
Indicating processing
<Hds::Stepper::Task::Indicator @status="processing" @isInteractive= />
Renders to:
Rendering a complete task
<Hds::Stepper::Task::Indicator @status="complete" @isInteractive= />
Renders to: