import Example from "../../components/example";
import Exports from "../../components/exports";
import Layout from "../../components/layout";
import SEO from "../../components/meta-seo";

import Sizes from "examples/avatar/sizes.tsx";
import Error from "examples/avatar/error.tsx";
import Override from "examples/avatar/override.tsx";
import Initials from "examples/avatar/initials.tsx";

import { Avatar } from "baseui/avatar";
import * as AvatarExports from "baseui/avatar";
import { Block } from "baseui/block";

import Yard from "../../components/yard/index";
import avatarYardConfig from "../../components/yard/config/avatar";

<SEO
  description="The Avatar component adds additional visual information about a user."
  keywords="avatar, react avatar, react user info"
/>

export default Layout;

# Avatar

<Yard placeholderHeight={52} {...avatarYardConfig} />

The Avatar component adds additional visual information about a user.

## When to use

- When you want to show a user's image along contextual information.
- When you want to attribute an action to a user.

## Accessibility

- Top level `name` prop will be set on the `<img>` element as its `alt` attribute.
- If src fails to load, applies `aria-label` with provided name and `role` with 'img' to root div element.

## Examples

<Example title="Avatar with available sizes" path="avatar/sizes.tsx">
  <Sizes />
</Example>

<Example title="Avatar with error fallback" path="avatar/error.tsx">
  <Error />
</Example>

<Example title="Avatar with initials" path="avatar/initials.tsx">
  <Initials />
</Example>

<Example title="Avatar with example overrides" path="avatar/override.tsx">
  <Override />
</Example>

<Exports
  component={AvatarExports}
  title="Avatar exports"
  path="baseui/avatar"
/>