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


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.


View changes
npm i @gov.au/progress-indicator
  • Alexander Sadleir avatar picture
  • Trevor Brennan avatar picture
  • Gary Broadbent avatar picture
  • Dominik Wilkowski avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture


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 drivers 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.


  Light:  <ul class="au-progress-indicator">
  Dark:   <ul class="au-progress-indicator au-progress-indicator--dark">

<ul class="au-progress-indicator">
    <a class="au-progress-indicator__link au-progress-indicator__link--doing" href="#url">
      <span class="au-progress-indicator__status">Doing</span>
    <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 class="au-progress-indicator__link au-progress-indicator__link--done" href="#url">
      <span class="au-progress-indicator__status">Done</span>
      Case Studies
  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',
]} />