import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as AvatarStories from "./Avatar.stories";

<Meta of={AvatarStories} />

# Avatar

The Avatar component is a UI element that displays a user’s profile image, initials, or icon, often used to represent a person or entity in an application. Its purpose is to personalize the user experience, making interactions feel more engaging and identifiable and improve recognition and user interaction.

## Usage

<Canvas of={AvatarStories.Documentation} source={ { code: `
import React from "react";
import { Avatar } from "@webiny/admin-ui";

const AvatarExample = () => {
return (

<Avatar
  image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
  fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
  size="md"
  variant="strong"
/>
); };

export default AvatarExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Avatar/Avatar.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={AvatarStories.Documentation} />

```tsx
import React from "react";
import { Avatar } from "@webiny/admin-ui";

const AvatarExample = () => {
  return (
    <Avatar
      image={<Avatar.Image src="https://i.pravatar.cc/300" alt="User" />}
      fallback={<Avatar.Fallback>JD</Avatar.Fallback>}
      size="md"
      variant="strong"
    />
  );
};

export default AvatarExample;
```

## Example

### Icon Avatar

<Canvas of={AvatarStories.Icon} source={ { code: `
import React from "react";
import { ReactComponent as StormIcon } from "@webiny/icons/storm.svg";
import { Avatar } from "@webiny/admin-ui";

const AvatarExample = () => {
return (

<Avatar
  fallback={
    <Avatar.Fallback>
      <StormIcon />
    </Avatar.Fallback>
  }
  size="md"
  variant="strong"
/>
); };

export default AvatarExample;

` } }
/>

## Anatomy

### Size

<img src="/images/storybook/avatar/size.png" alt="Size" />

### Type

<img src="/images/storybook/avatar/type.png" alt="Type" />

### Style

<img src="/images/storybook/avatar/style.png" alt="Style" />

## Usage

### Header

<img src="/images/storybook/avatar/header.png" alt="Header" />

### Table

<img src="/images/storybook/avatar/table.png" alt="Table" />