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

React Usage

<AUprogressIndicator items={[
    link: '#url',
    text: 'Introduction',
    status: 'doing',
    link: '#url',
    text: 'Business Contacts',
    status: 'todo',
    link: '#url',
    text: 'Case Studies',
    status: 'done',
]} />



Prop name Type Description
link string The link URL, If no link is passed we render a button instead of a link tag
linkComponent string The component used for the link, optional
text string The text of this item
status boolean The status of this item
statusText boolean The status text of this item
li object An additional object to be spread into the wrapping element

All other props are spread into the component


Prop name Type Description
dark boolean A dark variation of the component
items object All items for this progress indicator (see AUprogressIndicator for details)
linkComponent string The component used for the child links, optional

All other props are spread into the component


name type description
AUprogressIndicatorItem none default An item inside the AUprogressIndicator component
AUprogressIndicator default The progress-indicator component

node_modules import

import AUbutton from '';

pancake import

import AUbutton from './progress-indicator';