dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Progress indicator

v3.1.7

Progress 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
  • Patrick De Young avatar picture
  • Alex Page avatar picture
  • Alexander Sadleir avatar picture
  • Dominik Wilkowski avatar picture
  • Gary Broadbent avatar picture
  • Trevor Brennan avatar picture

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 do
  • partly finished – the task has been started
  • finished – the task has been completed
  • not 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',
  },
]} />

Related components

Feedback