---
name: Progress tracker
menu: Patterns
parent: Modules
route: /patterns/progress-tracker
---

# Progress tracker

Progress tracker tracks a users progress throughout a task.

```specimen-react
  <ProgressTracker
    steps={[
      {
        ticked: true,
        label: '15 Dec',
        title: 'We get cracking with your switch',
        highlight: true,
      },
      {
        label: '20 Dec',
        title: 'We take your first meter reading',
        icon: 'meter',
      },
      {
        label: '30 Dec',
        title:
          'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
        icon: 'payments',
        body:
          'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
      },
    ]}
  />
```

```specimen-research-insight
During progress tracker testing, users would attempt to click on a CTA or dashboard tile prior to reaching that stage. They needed extra instruction in these areas, including dates helped users to feel more confident about next steps.
```

Steps can take a child component which is rendered to the right of the text (can wrap below on mobile devices), this is a pretty useful place to put a button. Supports any icon available from the iconography. If ticked prop is set, the icon is replaced with a tick.

For greater customisation, an `iconSize` prop can be passed to `ProgressTracker`.

If `label` and `title` don't satisfy your requirements, you can pass a component as the `body` of a Step:

```specimen-react
  <ProgressTracker
    iconSize='1rem'
    steps={[
      {
        ticked: true,
        highlight: true,
        body: 'Can be text or react component. You choose.',
      },
      {
        label: 'You can keep the label',
        title: 'And the title too',
        body:
          'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
        icon: 'meter',
      },
      {
        label: '30 Dec',
        title:
          'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
        icon: 'payments',
        body:
          'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
      },
    ]}
  />
```

You can adjust the spacing between the steps by passing a `stepVerticalSpacing` prop:

```specimen-react
  <ProgressTracker
    stepVerticalSpacing={0}
    steps={[
      {
        ticked: true,
        label: '15 Dec',
        title: 'We get cracking with your switch',
        highlight: true,
      },
      {
        label: '20 Dec',
        title: 'We take your first meter reading',
        icon: 'meter',
      },
      {
        label: '30 Dec',
        title:
          'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
        icon: 'payments',
        body:
          'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
      },
    ]}
  />
```
