Progress indicator
v3.1.7Progress 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 @gov.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:
open
– the task is available for the user to dopartly finished
– the task has been startedfinished
– the task has been completednot yet started
– the user has to do something before the task can be started.
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 '@gov.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',
},
]} />