Progress indicator
v4.0.0Progress indicators provide visual feedback to users to let them know and understand their current context at any given time and be assured that they are progressing through the system.
Released
- History
- View changes
- Install
- npm i @gold.au/progress-indicator
- Tags
- Requires
- Contributors
Default
Our design system provides a progress indicator for larger tasks that can be completed out of order and returned to at a later date, like doing a tax return or applying for a driver’s licence.
The individual tasks or steps are shown as either:
todo– the task is available for the user to dodoing– the task has been starteddone– the task has been completed
Example
<!--
Light: <ul class="au-progress-indicator">
Dark: <ul class="au-progress-indicator au-progress-indicator--dark">
-->
<ul class="au-progress-indicator">
<li>
<a class="au-progress-indicator__link au-progress-indicator__link--doing" href="#url">
<span class="au-progress-indicator__status">Doing</span>
Introduction
</a>
</li>
<li>
<a class="au-progress-indicator__link au-progress-indicator__link--todo" href="#url">
<span class="au-progress-indicator__status">To do</span>
Business Contacts
</a>
</li>
<li>
<a class="au-progress-indicator__link au-progress-indicator__link--done" href="#url">
<span class="au-progress-indicator__status">Done</span>
Case Studies
</a>
</li>
</ul>
/*
Light: <AUprogressIndicator items={[
Dark: <AUprogressIndicator dark items={[
*/
import AUprogressIndicator from '@gold.au/progress-indicator';
<AUprogressIndicator items={[
{
link: '#url',
text: 'Introduction',
status: 'doing',
},
{
link: '#url',
text: 'Business Contacts',
status: 'todo',
},
{
link: '#url',
text: 'Case Studies',
status: 'done',
},
]} />