# Avatar

## Example

```svelte
<script>
	import { Avatar, AvatarGroup } from '@foxui/all';
</script>

<h3>Single Avatar</h3>

<div class="not-prose flex items-center gap-2">
	<Avatar fallback="AB" />
	<Avatar />
	<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" />
</div>

<h3>Avatars Group</h3>

<AvatarGroup
	users={[
		{
			src: 'https://github.com/flo-bit.png',
			alt: 'flo-bit',
			fallback: 'FB'
		},
		{
			src: 'https://github.com/rich-harris.png',
			alt: 'rich-harris'
		},
		{
			src: 'https://github.com/huntabyte.png',
			alt: 'huntabyte'
		},
		{
			fallback: '+5'
		}
	]}
	class="not-prose"
/>
```

## Documentation

## Usage

```svelte
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" />

<AvatarGroup
	users={[
		{
			src: 'https://github.com/flo-bit.png',
			alt: 'flo-bit',
			fallback: 'FB'
		},
		{
			src: 'https://github.com/rich-harris.png',
			alt: 'rich-harris',
			fallback: 'RH'
		}
	]}
/>
```

## API Reference

### Avatar
An image element with a fallback for representing a user.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| src | `string` | `-` | The image source URL. |
| alt | `string` | `-` | Alt text for the avatar image. |
| fallback | `string` | `-` | Fallback text to display when the image is not available (e.g. initials). |
| useThemeColor | `boolean` | `false` | Whether to apply theme color styling to the image. |
| imageClass | `string` | `-` | Additional CSS classes to apply to the image element. |
| fallbackClass | `string` | `-` | Additional CSS classes to apply to the fallback element. |
| imageRef | `HTMLImageElement` | `-` | Reference to the image DOM element. (bindable) |
| fallbackRef | `HTMLElement` | `-` | Reference to the fallback DOM element. (bindable) |
| class | `string` | `-` | Additional CSS classes to apply to the root element. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |

### AvatarGroup
A group of overlapping avatars displayed in a row.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| users | `{ src?: string; alt?: string; fallback?: string }[]` | `-` | The list of users to display avatars for. (required) |
| avatarClass | `string` | `-` | Additional CSS classes to apply to each avatar. |
| imageClass | `string` | `-` | Additional CSS classes to apply to each avatar image. |
| fallbackClass | `string` | `-` | Additional CSS classes to apply to each avatar fallback. |
| class | `string` | `-` | Additional CSS classes to apply to the group container. |
| ref | `HTMLDivElement` | `-` | The underlying DOM element. (bindable) |