Skip to content

Progress

Progress is used to indicate progression through a task or workflow. The component shows current progress and how much is left to complete.
Figma logo
Anatomy of a Toggletip: content in the body of the element with a close action in the upper-right corner
Progress and its sub-components
Anatomy of the Progress component
ElementPurpose
ProgressRepresents the current amount of progress relative to the total amount.
LabelOptional label used to display progress as a percentage or numeric value (e.g., 70%, “1 of 4”).
  • The examples below use Intl.NumberFormat to generate the percentage label, but it is not required
  • The label container in the circular variant expands up to 240px in width to accommodate longer labels
React props
NameTypeDefaultDescription
aria-label  RequiredstringAn accessible label must be provided for screen-reader users. This label also improves testability by enabling the use of getByLabelText in @testing-library/react.
children  ReactNodestringThe label value displayed alongside the graphical representation. Should be expressed as a percentage or x of y format.
color  primarysecondarysecondaryColor of the bar: primary (kale) or secondary (guava)
variant  linearcircularlinearShape of the progress meter
  • Progress implements the native HTML <progress> and will pass along semantically meaningful information to screen readers
  • All color options meet our color contrast standards
  • Place the Progress meter near text that will describe the process whose status it is reflecting
    • Use aria-label to add descriptive information if the meter is used on its own

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(
<Progress aria-label="Onboard employee" value={2} max={3}>
2 of 3
</Progress>,
);
const progressbar = screen.getByRole('progressbar', {
name: 'Onboard employee',
});
expect(progressbar).toHaveValue(2);
expect(progressbar).toHaveProperty('max', 3);
expect(progressbar).toHaveTextContent('2 of 3');