Progress Tracker
Progress trackers visually guide users toward completion and gives them a sense of achievement. These components are typically used in scenarios where users need to track their progress toward a set goal, such as task completion, milestones, or performance targets.
Import
Continuous Linear Tracker
In Progress
Complete
Icon Tracker In Progress
Accessible External Label
Progress Circular
Determinate
Segmented Linear Tracker
In Progress
Complete
Props
Continuous Linear Tracker Props
| Name | Description | Default |
|---|---|---|
| variant | When set to 'minimal', the tracker will not show the start and end text as built in labels. Please ensure the external labels communicate the same information, which is required to adhere to color contrast rules for accessibility. "default" | "minimal" | default |
| hideTrackerStartText | boolean | - |
| hideTrackerEndText | boolean | - |
| value* | The current value of the tracker. number | - |
| min | The min value of the tracker. Defaults to 0. number | 0 |
| max | The max value of the tracker. Defaults to 100. number | 100 |
| color | The color of the tracker. "brand" | "success" | brand |
| completionText | Text to be shown above tracker when tracker is complete. string | - |
| weight | The variant of the tracker to determine progress bar thickness. Defaults to "thin" | "thick" | thin |
| icon | Icon to be shown with the tracker while in progress and complete. Size is set to 24px by 24px. ReactNode | - |
| hasGradient | Enables a gradient for color 'brand' of tracker. Defaults to boolean | false |
| labelOverrides | Overrides for labels that have been defaulted in the component. ContinuousLinearTrackerLabelOverrides | - |
Progress Circular Indeterminate Props
| Name | Description | Default |
|---|---|---|
| value | The value of the progress bar, representing the completion percentage. Must be a valid percentage (i.e. between 0 and 100). @ignore number | - |
| labelOverrides | Overrides for labels that have been defaulted in the component. ProgressLabelOverrides | - |
| isDeterminate | Whether the progress bar is indeterminate. TODO: codemod transform needed for determinate -> isDeterminate @ignore boolean | - |
| size | Size of the circle. ProgressCircularSize | 'md' |
Segmented Linear Tracker Props
| Name | Description | Default |
|---|---|---|
| children | The ReactNode | - |
| currentStep* | The current step. number | - |
| color | The color of the tracker. "brand" | "success" | brand |
| labelOverrides | Overrides for labels that have been defaulted in the component. SegmentedLinearTrackerLabelOverrides | - |
Segmented Linear Tracker Step Props
| Name | Description | Default |
|---|---|---|
| aria-label* | The string | - |
| isCompleted | @ignore . This should be managed by the parent boolean | - |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.