noora/docs/components/avatar.md
Displays an image, initials, or a placeholder for an account.
<noora-avatar name="Ada Lovelace"></noora-avatar>
| 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. |
| Event | Type | Description |
|---|---|---|
noora-status-change | CustomEvent<{ status: "loaded" | "error" }> | Emitted when the avatar image loads or fails. |
| Part | Description |
|---|---|
avatar | The avatar container. |
image | The image. |
initials | The initials fallback. |
Image loading changes emit a noora-status-change event.
Display initials, a remote image, or a placeholder fallback.
<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>
Avatar sizes range from twice-extra-small to twice-extra-large.
<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>
Use any of the fallback colors available to LiveView avatars.
<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>
Initials handle single names, multiple names, separators, and accented characters.
<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>