import { Meta, Story, Canvas, ArgsTable, Preview } from '@storybook/addon-docs/blocks';
import { Avatar } from './Avatar';
# Avatar
## Displays an image that represents a user or organization
Use an avatar for attributing actions or content to specific users.
The user's name should _always_ be present when using Avatar – either printed beside the avatar or in a tooltip.
## Usage
Avatar is used to represent a person or an organization. By default the avatar shows an image and gracefully falls back to the first initial of the username. While hydrating the component you may find it useful to render a skeleton template to indicate that Avatar is awaiting data. Avatars can be grouped with the AvatarList component.
### Sizes
4 sizes are supported.
### Default Values
When no image is supplied to the `src` prop, Avatar displays initials.
Avatar should be used sparingly in situations without access to images.
### Loading
The loading state is used when the image or username is, well, loading.
### Playground
Experiment with this story with the Controls addon in the Canvas tab.
export const Template = (args) => ;