---
title: Steps
description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
new: true
---
## Default markup
Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
Use the `steps` class to create the default progress tracker and name the steps accordingly.
```html code example
```
## Tooltips
Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
```html code example
```
## Color
You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](colors) to see the range of available colors.
```html code example
```
## Steps without title
For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
```html code example
```
## Steps with numbers
Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
```html code example
```