---

## Avatar
User profile image component with fallback initials, multiple sizes, and interactive states.

**Import:** `import { Avatar } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Avatar src="/user-photo.jpg" name="John Doe" size="lg" />
```

```svelte
<Avatar name="Jane Smith" randomColor clickable onclick={() => showProfile()} />
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: neutral)
- variant: circle, rounded, square (default: circle)
- size: 2xl, lg, md, sm, xl, xs (default: md)
- interactive: true (default: false)
- ring: true (default: false)
- ringIntent: danger, neutral, primary, secondary, success, warning (default: primary)
- status: away, busy, offline, online
- statusPosition: bottom-left, bottom-right, top-left, top-right (default: bottom-right)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...AvatarVariants | `VariantProps` | no |  | Styling variants from AvatarVariants |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| alt | `string` | no |  | Alt text for the image. Defaults to `name`. |
| children | `Snippet` | no |  | Custom fallback content rendered instead of auto-generated initials. Useful for overflow counters, icons, or fully custom avatars with `unstyled`. |
| class | `string` | no |  | Extra classes merged onto the root element. |
| clickable | `boolean` | no |  | Mark the avatar as clickable (adds hover/focus styles and keyboard support). Alias for the `interactive` variant. |
| mint | `MintProp` | no |  | Micro-interaction preset. Only applies when the avatar is interactive. |
| name | `string` | no |  | Full user name — used for initials generation, `randomColor` hashing, and `aria-label`. |
| onclick | `(event: MouseEvent) => void` | no |  | Click handler. Automatically enables interactive styles. |
| onHover | `(hovered: boolean) => void` | no |  | Called when the hover state changes. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Avatar: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| randomColor | `boolean` | no |  | Derive a deterministic background color from `name`. The same name always produces the same color, making it easy to visually distinguish users without images. Overrides `intent`. |
| ringColor | `string` | no |  | Custom ring color (CSS value). Overrides `ringIntent` when set. |
| slotClasses | `Partial<Record<AvatarSlots, string>>` | no |  | Per-slot class overrides merged with tv styles. Slots: base | image | fallback | status |
| src | `string` | no |  | Image URL. Falls back to initials or `children` when empty or on load error. |
| unstyled | `boolean` | no |  | Remove all default tv classes. |
| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | neutral | Controls the color theme and semantic meaning of the Avatar. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
| variant | `'circle' | 'rounded' | 'square'` | no | circle | Controls the visual style and presentation of the Avatar. Determines the component's visual treatment. Available options: circle, rounded, square. |
| size | `'2xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Avatar. Affects the component's physical footprint. Available options: 2xl, lg, md, and 3 more. |
| interactive | `'true'` | no | false | Controls the interactive behavior and appearance of the Avatar component. Available options: true. |
| ring | `'true'` | no | false | Controls the ring behavior and appearance of the Avatar component. Available options: true. |
| ringIntent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the ringIntent behavior and appearance of the Avatar component. Available options: danger, neutral, primary, and 3 more. |
| status | `'away' | 'busy' | 'offline' | 'online'` | no |  | Controls the status behavior and appearance of the Avatar component. Available options: away, busy, offline, online. |
| statusPosition | `'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'` | no | bottom-right | Controls the statusPosition behavior and appearance of the Avatar component. Available options: bottom-left, bottom-right, top-left, top-right. |

Inherited from:
- AvatarVariants (external)
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)