Plasma Design System
Home
Brand
Design principles
Foundations
Iconography
Colors
Typekit
Links
Spacing
Mantine
Collection
Page Header
Code Editor
Table
Layout
Banner
Blankslate
Bordered line
Browser preview
Chart
Child form
Collapsible
Icon card
Info box
Labeled value
Limit card
Modal
Modal wizard
Page header
Section
Split layout
Sticky footer
Table
Form
Actionable item
Button
Checkbox
Code editor
Color picker
Countdown
Date picker
Diff viewer
Facet
File picker
Filter box
Flat select
JSON editor
Multiline box
Numeric input
Radio button
Search bar
Select - single
Select - multi
Slider
Text area
Text input
Navigation
Breadcrumbs
Sidebar navigation
SubNavigation
Tabs
Feedback
Badge
Color bar
Color dot
Icon badge
Last updated
Loading spinner
Step progress bar
Sync feedback
Toast
Tooltip
Advanced
Action bar
Info token
Link svg
List box
Options cycle
Partial string match
Slide Y

Feedback

Step Progress Bar

A step progress bar visualizes a user’s progress as they complete a task by representing the number of steps left to complete the task.

View source

Props

NameTypeDefaultDescription
currentSteprequirednumber
The 0-based index of the step currently in completion by the user.
numberOfStepsrequirednumber
The total number of steps. A positive integer above 0.
classNameIClassName
Additional CSS classes that are added to the progress bar element

No guidelines exist for StepProgressBar yet.

Create guidelines