---
name: Avatar
menu: Atoms
route: /atoms/Avatar
---

import Avatar from './Avatar';
import { Playground, Props } from 'docz';
import Image from './image.jpg';
import CalendarIcon from './CalendarIcon';

# Avatar

This component renders an HTML `<div>` and passes along all props.

## API
<Props of={Avatar} />

## Default large size with default background color

<Playground>
	 <Avatar />
</Playground>

## Medium size

<Playground>
	 <Avatar size="medium" />
</Playground>

## Small size

<Playground>
	 <Avatar size="small" />
</Playground>

## Extra-small size

<Playground>
	 <Avatar size="extraSmall" />
</Playground>

## With background color

<Playground>
	 <Avatar backgroundColor="#FF5C39"/>
</Playground>

## With initials

<Playground>
	 <Avatar name="User Interface" />
</Playground>

## With tooltip initials

<Playground>
	 <Avatar name="User Interface" tooltip="Title" />
</Playground>

## With image

<Playground>
	 <Avatar image={Image} />
</Playground>

## With tooltip image

<Playground>
	 <Avatar image={Image} tooltip="Title" />
</Playground>

## With number less than 9

<Playground>
	 <Avatar number={1} backgroundColor="#FF5C39"/>
</Playground>

## With number more than 9

<Playground>
	 <Avatar number={10} backgroundColor="#FF5C39"/>
</Playground>

## With icon

<Playground>
	 <Avatar icon={<CalendarIcon color="#FF5C39" />}/>
</Playground>