# Step
> Steps show where the user is in a multi-step process: which steps are done, which one is active and which are left.
Guide users through multi-step processes with a steps indicator. Show completed, active, and upcoming steps in a clear layout.
Source: https://docs.tabler.io/ui/components/step
---
## Default markup
Use the `.steps` class for the list and `.step-item` for each step. The `active` class marks the current step.
```html
```
Four steps, with the third one active:
```html
```
## Tooltips
Add a [tooltip](/ui/components/tooltip) to a step to explain it on hover, for example when the step titles are short.
To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.
```html
Step 1
```
A tracker with a tooltip on each step:
```html
```
## Color
Change the color with a `steps-*` class, using any name from the [color palette](/ui/base/colors).
```html
...
```
Two color schemes:
```html
```
## Steps without title
When there's no room for titles, use steps without them and put the details in tooltips.
```html
```
## Steps with numbers
The `steps-counter` class shows a number in each step instead of a title.
```html
...
```
Numbered steps in another color:
```html
```
## Accessibility
- Use an ordered list for the steps. The numbering is meaning, not decoration, so let the markup carry it.
- Mark the current step with `aria-current="step"`. The `active` class only changes the colors.
- A completed step and a pending one must differ in more than color - a checkmark, a label, or the word "done".
- If a step is a link, keep it a real link; if it cannot be reached yet, use `aria-disabled="true"` and take it out of the tab order.
## SCSS variables
Use these SCSS variables to customize steps. The default values are:
```scss
$steps-border-width: 2px;
$steps-color: var(--primary);
$steps-inactive-color: var(--border-color);
$steps-dot-size: 0.5rem;
$step-item-min-height: 1rem;
$steps-counter-dot-size: 1.5rem;
$steps-vertical-padding-start: 1rem;
$steps-vertical-item-gap: 1rem;
$steps-vertical-connector-gap: 1rem;
$steps-dot-offset: 6px;
$steps-dot-offset-counter: -2px;
```
_Source: `core/scss/_variables.scss`_