---
name: Avatar
menu: Components
---

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

# Avatars

### Try it out

export const code = `<Avatar type="feedback" status="error" />`

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

## Basic usage

The `Avatar` component is a small, circular icon used to give additional feedback to users. The avatars have two usage options, feedback and alert, which alters the opacity of the background. The `type` prop determines which icon is displayed.

```jsx
import Avatar from '@repay/cactus-web'
import React from 'react'

export default () => <Avatar status="error" type="alert" />
```

## Properties

<PropsTable of={Avatar} />