# `Noora.Avatar`

A component for rendering an avatar image or initials if an image is not available.

## Example

```elixir
<.avatar id="user-1" name="John Doe" color="blue" size="medium" />
```

# `avatar`

## Attributes

* `id` (`:string`) (required) - The unique identifier for the avatar.
* `name` (`:string`) (required) - The name of the account to render the avatar for.
* `color` (`:string`) - The color of the avatar. Defaults to `"pink"`. Must be one of `"gray"`, `"red"`, `"orange"`, `"yellow"`, `"azure"`, `"blue"`, `"purple"`, or `"pink"`.
* `image_href` (`:string`) - The URL of the image to render as the avatar. Defaults to `nil`.
* `image_decoding` (`:string`) - The image decoding strategy to use when rendering an avatar image. Defaults to `"async"`. Must be one of `"sync"`, `"async"`, or `"auto"`.
* `image_loading` (`:string`) - The loading strategy to use when rendering an avatar image. Defaults to `nil`.
* `fallback` (`:string`) - Determines the fallback for when an image is not available. Can be either initials or a placeholder image. Defaults to `"initials"`. Must be one of `"initials"`, or `"placeholder"`.
* `on_status_change` (`:string`) - Event handler for when the status of the avatar changes. Defaults to `nil`.
* `size` (`:string`) - The size of the avatar. Defaults to medium. Defaults to `"medium"`. Must be one of `"2xsmall"`, `"small"`, `"medium"`, `"large"`, or `"2xlarge"`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*