package.docs.components.steps.mdx Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Show all versions of core Show documentation
Premium and Open Source dashboard template with responsive and high quality UI.
The newest version!
---
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
```