# Avatar

Shows a person's photo, with their initials as a fallback.

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

<Avatar>
  <AvatarImage src="/maya.jpg" alt="Maya Chen" />
  <AvatarFallback>MC</AvatarFallback>
</Avatar>
```

## Usage

### What you provide
- `AvatarImage` with `src` and `alt` = the person's name; `AvatarFallback` with two initials.
- `size`: `sm` | `default` (32px) | `lg`.
- Next to the avatar, the name in `font-medium` and a detail in `text-muted-foreground`.

## Accessibility

- The image `alt` is the person's name. When the name is already written next to the avatar, use `alt=""` so it isn't read twice.
- The fallback initials are not a substitute for the name in text.

_Adapted from Magoo 1.6.0 by Marcelo Sales: [Cards](https://magoo.cc/en/components/structure/cards.html) (`cards`). Magoo is educational guidance; test the behavior in your implementation._

## API

Install:

```bash
npx @aline-aroucha/pui add avatar
```

```tsx
<Avatar>
  <AvatarImage />
  <AvatarFallback />
  <AvatarBadge />
</Avatar>

<AvatarGroup>
  <Avatar />
  <AvatarGroupCount />
</AvatarGroup>
```

### Avatar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"sm" \| "default" \| "lg"` | `"default"` | Avatar size; default is 32px. |

### AvatarImage

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `src` (required) | `string` | — | Image URL. |
| `alt` (required) | `string` | — | The person's name, or "" when the name is written next to the avatar. |

### AvatarFallback

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Two initials, shown while the image loads or when it fails. |

### AvatarBadge

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | A small status mark; give it a text alternative. |

### AvatarGroupCount

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | How many more people the group holds, e.g. "+3". |

## Related pages

- [Card](https://aline-aroucha.github.io/pui/components/card.html)
- [Table](https://aline-aroucha.github.io/pui/components/table.html)

---
PUI documentation · https://aline-aroucha.github.io/pui/components/avatar.html