mirror of
https://github.com/tabler/tabler.git
synced 2026-08-08 04:12:26 +04:00
Paweł Kuna
8962710163
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
62 lines
2.8 KiB
Plaintext
62 lines
2.8 KiB
Plaintext
---
|
|
title: Progress Steps
|
|
summary: A progress step helps users track their place in a short process by breaking it into clear, simple steps. This makes flows like setup or onboarding easier to follow and finish.
|
|
new: true
|
|
description: Use progress steps to display compact onboarding, checkout, and setup progress.
|
|
layout: '@layouts/DocsMdxLayout.astro'
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import ProgressSteps from '@ui/ProgressSteps.astro';
|
|
|
|
## Default markup
|
|
|
|
Use `.progress-steps` as the container and `.progress-steps-item` for each segment. These two classes are enough to create the base component structure.
|
|
|
|
```html
|
|
<ol class="progress-steps" aria-label="Onboarding progress">
|
|
<li class="progress-steps-item"></li>
|
|
<li class="progress-steps-item"></li>
|
|
<li class="progress-steps-item"></li>
|
|
</ol>
|
|
```
|
|
|
|
The example below shows the default progress step structure.
|
|
|
|
<Example>
|
|
<ol class="progress-steps" aria-label="Onboarding progress"> <li class="progress-steps-item"></li> <li class="progress-steps-item"></li> <li class="progress-steps-item"></li> <li class="progress-steps-item"></li> </ol>
|
|
</Example>
|
|
|
|
## Variants
|
|
|
|
### Current and completed step
|
|
|
|
Use color classes to mark completed steps. Set `aria-current="step"` on the current item.
|
|
|
|
<Example>
|
|
<ProgressSteps count={4} active={2} ariaLabel="Setup progress" />
|
|
</Example>
|
|
|
|
### Custom labels
|
|
|
|
Use hidden labels so assistive technologies can announce meaningful step names.
|
|
|
|
<Example>
|
|
<ProgressSteps labels={['Account', 'Profile', 'Billing', 'Review']} active={3} ariaLabel="Checkout progress" />
|
|
</Example>
|
|
|
|
### Color state
|
|
|
|
Use contextual background classes on completed and current items. This helps match state color to your flow semantics.
|
|
|
|
<Example>
|
|
<div class="mb-2"> <ol class="progress-steps" aria-label="Green progress"> <li class="progress-steps-item bg-green" aria-current="step"> <span class="visually-hidden">Step 1</span> </li> <li class="progress-steps-item"> <span class="visually-hidden">Step 2</span> </li> </ol> </div> <div class="mb-2"> <ol class="progress-steps" aria-label="Orange progress"> <li class="progress-steps-item bg-orange" aria-current="step"> <span class="visually-hidden">Step 1</span> </li> <li class="progress-steps-item"> <span class="visually-hidden">Step 2</span> </li> </ol> </div> <div> <ol class="progress-steps" aria-label="Red progress"> <li class="progress-steps-item bg-red" aria-current="step"> <span class="visually-hidden">Step 1</span> </li> <li class="progress-steps-item"> <span class="visually-hidden">Step 2</span> </li> </ol> </div>
|
|
</Example>
|
|
|
|
### Width and layout utilities
|
|
|
|
Use utility classes on `.progress-steps` to control width and placement in layouts.
|
|
|
|
<Example>
|
|
<ProgressSteps count={5} active={1} class="w-50" id="profile-progress" ariaLabel="Profile completion" />
|
|
</Example>
|