Avatar
Material Design 3-styled avatar web component (lit-material-avatar): image, initials, or icon fallback.
- 1.3 KB gzipped
- @lit-material/avatar 0.0.3
- Renders on the server
Example
Avatar
An image, falling back to initials, falling back to an icon.
Markup
<lit-material-avatar src="/jane.jpg" alt="Jane Doe" size="medium" shape="circle"></lit-material-avatar>
All three states, all three sizes
Broken image, falls back to initials
Install
npm install @lit-material/avatar @lit-material/tokensimport "@lit-material/avatar";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-avatar>
A user/entity avatar — an image, falling back to initials text, falling
back to a slotted icon (or a built-in default person icon if nothing's
slotted). Only one of those three actually renders at a time; there's no
combining them.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
src | src | string | "" | |
alt | alt | string | "" | Accessible name for what/who this avatar represents — also used as the image's alt text. |
initials | initials | string | "" | Short fallback text (typically 1-2 characters) shown when there's no image. |
size | size | AvatarSize | "medium" | |
shape | shape | AvatarShape | "circle" |
Slots
| Slot | Description |
|---|---|
| default | A custom icon, shown when there's no src (or it failed to load) and no initials. Falls back to a default person icon if left empty. |
CSS parts
| Part | Description |
|---|---|
avatar | The container (background, size, shape). |
image | The <img> element, when src is set and loads. |
initials | The initials text, when shown. |