Progress tracker
A progress tracker displays the steps and progress through a journey.Installation
| Install | yarn add @atlaskit/progress-tracker |
|---|---|
| Source | Bitbucket.org, (opens new window) |
| npm | @atlaskit/progress-tracker, (opens new window) |
| Bundle | unpkg.com, (opens new window) |
Props
| Description | Turns off transition animations if set to false. |
|---|---|
| Default | true |
| Type | boolean |
| Description | Ordered list of stage data. |
|---|---|
| Default | [] |
| Type | Stage[] |
| Description | Use this to provide an aria-label for the overall progress tracker, so that people who use assistive technology get an overview of the tracker's purpose. For example, "Sign up progress". |
|---|---|
| Default | "Progress" |
| Type | string |
| Description | Render prop to specify custom implementations of components. Note this is deprecated and will be removed in a future version. Links inside progress tracker can be configured using App Provider instead. |
|---|---|
| Default | {
link: ({ item }: LinkComponentProps) => (
// Anchor content is coming from another location
// eslint-disable-next-line @atlassian/a11y/anchor-has-content
<Link {...item} />
),
} |
| Type | ProgressTrackerStageRenderProp |
| Description | Sets the amount of spacing between the steps. |
|---|---|
| Default | "cozy" |
| Type | "cozy" | "comfortable" | "compact" |
| Description | A |
|---|---|
| Type | string |