import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Avatar from '../Avatar';

<Meta title="Atoms/Avatar" component={Avatar} />


# Avatar
<br />

## `Avatars` are used to represent a person with a profile picture.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Avatar name="Wayne Gretzky" picture="https://www.hockeydb.com/ihdb/photos/wayne-gretzky-1996-40.jpg" />
    </Story>
</Canvas>

### Without picture
<Canvas>
    <Story name="Without picture">
        <Avatar name="Wayne Gretzky" />
    </Story>
</Canvas>

### With size
<Canvas>
    <Story name="With size">
        <Avatar name="Wayne Gretzky" size={150} />
    </Story>
</Canvas>


## Usage Example

```jsx
import Avatar from '@appdirect/sfb-theme-components/src/atoms/avatar/Avatar';

<Avatar
    name="Wayne Gretzky"
    picture="https://www.hockeydb.com/ihdb/photos/wayne-gretzky-1996-40.jpg"
/>

```
## Props

<ArgsTable of={Avatar} />
