A basic avatar component. Use avatars to visually represent entities in your product, for example people, tokens, currency and companies.

Import component

import { Avatar } from "rimble-ui";

Examples

Different ways to use the Avatar component

Standard avatar

<Avatar />
<Avatar />
Copy code

Standard with image

<Avatar src="https://airswap-token-images.s3.amazonaws.com/DAI.png" />
<Avatar src="https://airswap-token-images.s3.amazonaws.com/DAI.png" />
Copy code

Custom size

<Avatar
  size="100px"
  src="https://airswap-token-images.s3.amazonaws.com/DAI.png"
/>
<Avatar
  size="100px"
  src="https://airswap-token-images.s3.amazonaws.com/DAI.png"
/>
Copy code

Large

<Avatar
  size="large"
  src="https://airswap-token-images.s3.amazonaws.com/DAI.png"
/>
<Avatar
  size="large"
  src="https://airswap-token-images.s3.amazonaws.com/DAI.png"
/>
Copy code

Medium

<Avatar
  size="large"
  src="https://airswap-token-images.s3.amazonaws.com/DAI.png"
/>
<Avatar
  size="large"
  src="https://airswap-token-images.s3.amazonaws.com/DAI.png"
/>
Copy code

Small

<Avatar
  size="small"
  src="https://airswap-token-images.s3.amazonaws.com/DAI.png"
/>
<Avatar
  size="small"
  src="https://airswap-token-images.s3.amazonaws.com/DAI.png"
/>
Copy code

Props

'Avatar'

'grey'

'2rem'

Styled System Props

Avatar uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.

Design guidelines

Some best practice for using Avatar in your product.

Use with labels