---
name: StepAvatar
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import StepAvatar from './StepAvatar'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# StepAvatar

The `Step Avatar` is an Avatar used to convey the amount of steps in a task.

### Try it out

export const code = `
<div>
  <StepAvatar status="done" margin={3}>1</StepAvatar>
  <StepAvatar status="notDone" margin={3}>2</StepAvatar>
  <StepAvatar status="inProcess" margin={3}>3</StepAvatar>
</div>
`

<LiveProvider code={code} scope={{ StepAvatar }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Basic usage

The number inside of the step avatar should be 1 or 2 digits long. There are three available statuses of a step: notDone, inProgress, and done. Each status is represented by a different background color. The `Step Avatar` is slighty larger than the basic `Avatar`.

```jsx
import React from 'react'
import StepAvatar from '@repay/cactus-web'
...
<StepAvatar status="inProcess">#</StepAvatar>
```

<PropsTable of={StepAvatar} />