An avatar stands in for a person or an entity: the picture when there is one, initials when
there is not, in the smallest representation the framework has. It is content rather than a
label, a `Badge` describes something else, a `Chip` is a value the reader acts on, and an
avatar *is* the thing, which is why it is the only one of the three that carries an identity.

Two decisions make it more than an image. The initials are derived from the name by one shared
rule, so the same entity looks the same on every surface; and the avatar carries a single
accessible name, so the picture and the initials are not read out as two different subjects.

```tsx demo="data-display/avatar-preview"
```

## Usage

```tsx
import { Avatar } from "@asheeui/web";

<Avatar name="Priya Raman" src="/people/priya.png" />
```

`name` is the identity and, unless `alt` overrides it, the name assistive technology reads.
`src` is optional: without it, or when it fails to load, the avatar shows its fallback instead.

## Sizes and shape

Three diameters, 2rem, 2.5rem and 3rem at `sm`, `md` and `lg`, and the font size of the
initials steps with them. The registered radius is `full`, which is what makes a person round;
a smaller `radius` turns the same frame into a square tile, and the picture is clipped to
whichever it is.

```tsx demo="data-display/avatar-sizes"
```

`color` does not tint the picture: it colours the surface the initials fall back to, so an
avatar with an image is the image and an avatar without one is an accent in the theme's own
role.

## When there is no picture

The fallback is the point of the component. When `src` is absent, or when the image fails to
load, the avatar renders initials derived from `name`: a single word contributes its first two
characters, and a longer name the first letters of its first and last word, upper-cased.

```tsx demo="data-display/avatar-fallback"
```

`fallback` replaces the initials entirely, which is what an entity without a name wants, an
unassigned slot, a deleted account, a team glyph. A picture that fails after it started loading
swaps to the same fallback, so a broken source is never an empty circle.

## Props

```props Avatar
```

`size` and `radius` are registered by the component as `md` and `full`, and `color` is not, so
the initials resolve from the application's `defaultColor` and then `primary`. `radius` being
registered is why an avatar is a circle in a product whose `defaultRadius` is `xs`: the
application's radius never reaches it unless `components.avatar.radius` or the instance states
one.

`name`, `src`, `alt`, `fallback`, `component` and `componentProps` are instance-only, because
they are the identity being shown rather than the design showing it.

`component` and `componentProps` are handed to the framework's `Image`, so a framework's own
image component, the intrinsic size, the loader, the allowed host, keeps working inside the
avatar. That is the framework's shared seam rather than an avatar feature: see
[links and substitution](/concepts/substitution).

## Accessibility

- The frame is `role="img"` with one `aria-label`, taken from `alt` and then from `name`, so a
  picture avatar and an initials avatar are both read as a single name.
- With neither `alt` nor `name` the avatar is `aria-hidden`: decoration beside text that already
  names the entity, which is exactly what a row of initials next to a name is.
- The picture inside carries an empty `alt` on purpose, so the name is not read twice, once by
  the frame and once by the image in it.
- The avatar is not interactive: no tab stop, no press, no state. A row of avatars that opens
  something needs a link or a button around it.

## Related

```related image, chip, card
```