Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/avatar.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Avatar
Displays an image, initials, or a placeholder for an account.
```html
<noora-avatar name="Ada Lovelace"></noora-avatar>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | `""` | Provides the account name and accessible label. |
| `color` | `gray`, `red`, `orange`, `yellow`, `green`, `azure`, `blue`, `purple`, `pink` | `"pink"` | Controls the fallback color. |
| `image-href` | `string` | None | Sets the image location. |
| `image-decoding` | `sync`, `async`, `auto` | `"async"` | Controls image decoding. |
| `image-loading` | `eager`, `lazy` | None | Controls image loading. |
| `fallback` | `initials`, `placeholder` | `"initials"` | Chooses the fallback when the image is unavailable. |
| `size` | `2xsmall`, `small`, `medium`, `large`, `xlarge`, `2xlarge` | `"medium"` | Controls the avatar dimensions. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `noora-status-change` | `CustomEvent<{ status: "loaded" \| "error" }>` | Emitted when the avatar image loads or fails. |
## Styling parts
| Part | Description |
| --- | --- |
| `avatar` | The avatar container. |
| `image` | The image. |
| `initials` | The initials fallback. |
Image loading changes emit a `noora-status-change` event.
## Basic
Display initials, a remote image, or a placeholder fallback.
```html
<noora-avatar name="Asmit Malakannawar"></noora-avatar>
<noora-avatar name="Marek Fořt" image-href="https://www.gravatar.com/avatar/292c129cf17a552c08b4d9dcf2c6c1f8"></noora-avatar>
<noora-avatar name="Marek Fořt" image-href="https://www.invalid.url" fallback="placeholder"></noora-avatar>
```
## Sizes
Avatar sizes range from twice-extra-small to twice-extra-large.
```html
<noora-avatar name="Asmit Malakannawar" size="2xsmall" color="gray"></noora-avatar>
<noora-avatar name="Asmit Malakannawar" size="small" color="orange"></noora-avatar>
<noora-avatar name="Asmit Malakannawar" size="medium" color="yellow"></noora-avatar>
<noora-avatar name="Asmit Malakannawar" size="large" color="azure"></noora-avatar>
<noora-avatar name="Asmit Malakannawar" size="xlarge" color="blue"></noora-avatar>
<noora-avatar name="Asmit Malakannawar" size="2xlarge" color="purple"></noora-avatar>
```
## Colors
Use any of the fallback colors available to LiveView avatars.
```html
<noora-avatar name="John Doe" color="gray"></noora-avatar>
<noora-avatar name="Jane Smith" color="red"></noora-avatar>
<noora-avatar name="Bob Johnson" color="orange"></noora-avatar>
<noora-avatar name="Alice Brown" color="yellow"></noora-avatar>
<noora-avatar name="Charlie Davis" color="azure"></noora-avatar>
<noora-avatar name="Emma Wilson" color="blue"></noora-avatar>
<noora-avatar name="Frank Miller" color="purple"></noora-avatar>
<noora-avatar name="Grace Taylor" color="pink"></noora-avatar>
```
## Name formats
Initials handle single names, multiple names, separators, and accented characters.
```html
<noora-avatar name="Madonna" color="purple"></noora-avatar>
<noora-avatar name="Mary Jane Watson" color="red"></noora-avatar>
<noora-avatar name="Anne-Marie Johnson" color="blue"></noora-avatar>
<noora-avatar name="john_doe_123" color="gray"></noora-avatar>
<noora-avatar name="José García" color="orange"></noora-avatar>
<noora-avatar name="Failed Image Test" image-href="" fallback="initials"></noora-avatar>
```