Progress indicator

A progress indicator shows the user where they are along the steps of a journey.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/progress-indicator`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/progress-indicator, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`appearance`
Description	Sets the color of the indicators.
Default	`"default"`
Type	`"default" \| "help" \| "inverted" \| "primary"`

`ariaControls`
Description	If interaction is enabled, use `ariaControls` to tell assistive technology what elements are controlled by the progress indicator.
Default	`"panel"`
Type	`string`

`ariaLabel`
Description	Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.
Default	`"tab"`
Type	`string`

`getAriaLabel`
Description	Returns the accessible label for each selectable indicator.
Type	`(index: number) => string`

`onSelect`
Description	Function called when an indicator is selected.
Type	`(eventData: { event: React.MouseEvent<HTMLButtonElement, MouseEvent>; index: number; }, analyticsEvent: UIAnalyticsEvent) => void`

`selectedIndex`
Required
Description	Which indicator is currently selected.
Type	`number`

`size`
Description	Sets the width and height of each indicator.
Default	`"default"`
Type	`"default" \| "large"`

`spacing`
Description	Specifies how much of a gutter there is between indicators.
Type	`"comfortable" \| "cozy" \| "compact"`

`testId`
Description	A hook for automated tests.
Type	`string`

`values`
Required
Description	An array of values mapped over to create the indicators.
Type	`any[]`

Was this page helpful?

We use this feedback to improve our documentation.