ProgressSteps

A segmented bar showing where the user is in a short flow: setup, onboarding, checkout.

<twig:Tabler:ProgressSteps count="4" active="2" aria-label="Setup progress" />

<ol class="progress-steps" aria-label="Setup progress">
    <li class="progress-steps-item bg-primary"><span class="visually-hidden">Step 1</span></li>
    <li class="progress-steps-item bg-primary" aria-current="step"><span class="visually-hidden">Step 2</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 3</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 4</span></li>
</ol>

Steps up to active are filled with the variant color, and the active one is marked as the current step (aria-current="step"). Each step carries a visually-hidden name, Step 1, Step 2… by default: give the list an aria-label to say what the steps are about.

Labels

labels names the steps; their number replaces count:

<twig:Tabler:ProgressSteps labels="{{ ['Account', 'Profile', 'Billing'] }}" active="3" variant="green" aria-label="Checkout progress" />

<ol class="progress-steps" aria-label="Checkout progress">
    <li class="progress-steps-item bg-green"><span class="visually-hidden">Account</span></li>
    <li class="progress-steps-item bg-green"><span class="visually-hidden">Profile</span></li>
    <li class="progress-steps-item bg-green" aria-current="step"><span class="visually-hidden">Billing</span></li>
</ol>

Variants

variant takes the theme colors and the palette colors:

{% for variant in ['primary', 'success', 'warning', 'danger', 'purple', 'orange', 'teal'] %}
    <twig:Tabler:ProgressSteps count="5" active="3" variant="{{ variant }}" class="mb-3" aria-label="Setup progress" />
{% endfor %}

<ol class="progress-steps mb-3" aria-label="Setup progress">
    <li class="progress-steps-item bg-primary"><span class="visually-hidden">Step 1</span></li>
    <li class="progress-steps-item bg-primary"><span class="visually-hidden">Step 2</span></li>
    <li class="progress-steps-item bg-primary" aria-current="step"><span class="visually-hidden">Step 3</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 4</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 5</span></li>
</ol>
<ol class="progress-steps mb-3" aria-label="Setup progress">
    <li class="progress-steps-item bg-success"><span class="visually-hidden">Step 1</span></li>
    <li class="progress-steps-item bg-success"><span class="visually-hidden">Step 2</span></li>
    <li class="progress-steps-item bg-success" aria-current="step"><span class="visually-hidden">Step 3</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 4</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 5</span></li>
</ol>
<ol class="progress-steps mb-3" aria-label="Setup progress">
    <li class="progress-steps-item bg-warning"><span class="visually-hidden">Step 1</span></li>
    <li class="progress-steps-item bg-warning"><span class="visually-hidden">Step 2</span></li>
    <li class="progress-steps-item bg-warning" aria-current="step"><span class="visually-hidden">Step 3</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 4</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 5</span></li>
</ol>
<ol class="progress-steps mb-3" aria-label="Setup progress">
    <li class="progress-steps-item bg-danger"><span class="visually-hidden">Step 1</span></li>
    <li class="progress-steps-item bg-danger"><span class="visually-hidden">Step 2</span></li>
    <li class="progress-steps-item bg-danger" aria-current="step"><span class="visually-hidden">Step 3</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 4</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 5</span></li>
</ol>
<ol class="progress-steps mb-3" aria-label="Setup progress">
    <li class="progress-steps-item bg-purple"><span class="visually-hidden">Step 1</span></li>
    <li class="progress-steps-item bg-purple"><span class="visually-hidden">Step 2</span></li>
    <li class="progress-steps-item bg-purple" aria-current="step"><span class="visually-hidden">Step 3</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 4</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 5</span></li>
</ol>
<ol class="progress-steps mb-3" aria-label="Setup progress">
    <li class="progress-steps-item bg-orange"><span class="visually-hidden">Step 1</span></li>
    <li class="progress-steps-item bg-orange"><span class="visually-hidden">Step 2</span></li>
    <li class="progress-steps-item bg-orange" aria-current="step"><span class="visually-hidden">Step 3</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 4</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 5</span></li>
</ol>
<ol class="progress-steps mb-3" aria-label="Setup progress">
    <li class="progress-steps-item bg-teal"><span class="visually-hidden">Step 1</span></li>
    <li class="progress-steps-item bg-teal"><span class="visually-hidden">Step 2</span></li>
    <li class="progress-steps-item bg-teal" aria-current="step"><span class="visually-hidden">Step 3</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 4</span></li>
    <li class="progress-steps-item"><span class="visually-hidden">Step 5</span></li>
</ol>

Composed

One ProgressSteps:Item per step gives each step its own color, for instance to keep completed steps green:

<twig:Tabler:ProgressSteps aria-label="Onboarding progress">
    <twig:Tabler:ProgressSteps:Item variant="success" label="Account" />
    <twig:Tabler:ProgressSteps:Item variant="success" label="Team" />
    <twig:Tabler:ProgressSteps:Item variant="primary" current label="Integrations" />
    <twig:Tabler:ProgressSteps:Item label="Billing" />
</twig:Tabler:ProgressSteps>

<ol class="progress-steps" aria-label="Onboarding progress">
    <li class="progress-steps-item bg-success"><span class="visually-hidden">Account</span></li>
    <li class="progress-steps-item bg-success"><span class="visually-hidden">Team</span></li>
    <li class="progress-steps-item bg-primary" aria-current="step">
        <span class="visually-hidden">Integrations</span>
    </li>
    <li class="progress-steps-item"><span class="visually-hidden">Billing</span></li>
</ol>

Props

Prop	Type	Default	Description
`count`	int	`0`	Number of steps; ignored when `labels` is set
`labels`	string[]?	`null`	Step names, announced to assistive technology (default `Step n`)
`active`	int	`1`	1-based index of the current step; `0` fills none
`variant`	string	`'primary'`	Color of the reached steps, see below

variant takes primary secondary success danger warning info dark light muted, or a palette color: blue azure indigo purple pink red orange yellow lime green teal cyan (bg-*).

Other attributes go to the root <ol class="progress-steps">.

Sub-components

Component	Renders
`ProgressSteps:Item`	`<li class="progress-steps-item">`

`ProgressSteps:Item` props

Prop	Type	Default	Description
`variant`	string?	`null`	Fill color of a reached step, same values as above; none for an upcoming step
`current`	bool	`false`	Marks the current step (`aria-current="step"`)
`label`	string?	`null`	Visually-hidden step name

Blocks

Block	Default
`content`	One `ProgressSteps:Item` per step, from `count` or `labels`
`content` (`ProgressSteps:Item`)	The visually-hidden `label`, when it is set