DocumentationDownloads and examples

Progress Bar

In order to help users to hook themselves during a progression of steps. When is needed to step an user through a journey so they can keep track of their progress.

Progress Bar Props

NameUseTypeDefinition
step
required
numberThe step that the user is currently on in the progress bar.
steps
required
numberThe total number of steps in the progress bar.
title
optional
stringThe title of the progress bar.
helper
optional
stringA helper text for the progress bar, providing hints or additional information.
circular
optional
booleanSwitches the progress bar from a bar to a circle.
small
optional
booleanSwitches the progress bar to a smaller size.
showSteps
optional
booleanDisplays the steps of the progress bar.
showPercentage
optional
booleanDisplays the percentage of completion of the progress bar.
className
optional
stringAdds a class to the progress bar.

Examples

Progress Bar regular
Title
Progress Bar circular

Title

Helper

Variants

Progress Bar without title

Helper

Progress Bar without helper

Title

Title

Progress Bar without steps
Title