Avatar

Displays an image, initials, or a placeholder for an account.

Avatar web component

Displays an image, initials, or a placeholder for an account.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Basic

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>

Sizes

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>

Colors

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>

Name formats

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>

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

Name	Description
`avatar`	The avatar container.
`image`	The image.
`initials`	The initials fallback.

Behavior

Image loading changes emit a `noora-status-change` event.