# Avatar

> User profile picture with fallback to initials when no image is provided

- Tier: primitives
- Storybook: `Components/Avatar`
- Import: `import { Avatar } from '@amezquita/design-system/components/primitives/Avatar'`

## Props

| Prop | Type | Description |
|---|---|---|
| `src?` | `string` |  |
| `alt?` | `string` |  |
| `fallback?` | `string` |  |
| `size?` | `'sm' \| 'md' \| 'lg' \| 'xl'` |  |

## Tokens

| Token | Type | Value |
|---|---|---|
| `--avatar-fallback-font-size` | dimension | `14px` |
| `--avatar-fallback-font-weight` | fontWeight | `600` |
| `--avatar-group-overlap` | dimension | `-8px` |
| `--avatar-ring-width` | dimension | `2px` |
| `--avatar-size-lg` | dimension | `40px` |
| `--avatar-size-md` | dimension | `32px` |
| `--avatar-size-sm` | dimension | `24px` |
| `--avatar-size-xl` | dimension | `64px` |