Progress bars visualize the expected time for a user to complete a process. They help the user anticipate how much time is needed to reach an end state. Progress bars should be visible, readable, and accurately reflect the progress made towards an end state.
- Track: Illustrates the length of the process.
- Indicator: Forward and backward movement to show where the user is in the process versus what they’ve completed.
- Value label: Numeric values to describe the number of steps total, remaining, and completed.
- Label (optional): Describes a specific step or summarizes the overall process to orient users. Label should be a max of 35 characters.
- The value label should reflect the type of steps (e.g. "Step X of Y" or "Section X of Y").
- If a label is specified, it is separated from the value label with a colon (e.g. "Step X of X: Title").
- The value label will show a percentage from 0-100%.
- If a label is specified, it is separated from the value label with a dot ("•") (e.g. "Home information • 20% completed").
Show users how long the process takes to complete
Keep progress bars clearly visible and readable
Customizing the value label
When using the
step variant of this component, you can use the
separator props to influence how the value label is rendered.