Avatar
Avatar is a native web component that displays a user's image and, if the image fails or does not exist, shows their initials as a fallback. Use it to represent people or entities in lists, comments, headers and menus. It supports three sizes and a status indicator in the corner.
Preview
<div style="display:flex;align-items:center;gap:1rem">
<pura-avatar src="https://i.pravatar.cc/150?img=12" alt="Anna Smith" status="online"></pura-avatar>
<pura-avatar initials="MC" status="busy"></pura-avatar>
<pura-avatar size="sm" initials="JP"></pura-avatar>
<pura-avatar size="lg" src="https://i.pravatar.cc/150?img=32" alt="Carla Lee" status="offline"></pura-avatar>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
src | string | — | URL of the avatar image; if absent or it fails to load, the initials are shown instead. |
alt | string | "" | Alternative text for the image, also used as the aria-label. |
initials | string | "?" | Initials shown as a fallback when there is no image. |
size | "sm" | "md" | "lg" | md | Size of the avatar (md is the default when the attribute is omitted). |
status | "online" | "offline" | "busy" | — | When present, shows a colored status dot in the bottom-right corner. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/avatar.js"></script>import "./pura/lib/avatar.js";