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
React Usage
<AUprogressIndicator items={[
{
link: '#url',
text: 'Introduction',
status: 'doing',
},
{
link: '#url',
text: 'Business Contacts',
status: 'todo',
},
{
link: '#url',
text: 'Case Studies',
status: 'done',
},
]} />Props
AUprogressIndicatorItem
| 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
AUprogressIndicator
| 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
Exports
| name | type | description |
|---|---|---|
AUprogressIndicatorItem |
none default | An item inside the AUprogressIndicator component |
AUprogressIndicator |
default | The progress-indicator component |
node_modules import
import AUbutton from '@gold.au/progress-indicator';pancake import
import AUbutton from './progress-indicator';