Avatar
User representation with image, initials fallback, grouping, and status indicator.
Preview
Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.
Playground
Flip props to see how the component responds. The snippet below updates as you change options.
Installation
Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.
$ pnpm add @sisyphos-ui/reactThen import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";
Usage
import { Avatar } from "@sisyphos-ui/react";
export const Profile = () => <Avatar name="Volkan Günay" color="primary" />;Avatar group
Stack avatars and collapse overflow into a `+N` chip.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image source; falls back to initials/fallback when omitted or on load error. |
| alt | string | — | Alt text for the image; also labels the fallback. Required for accessibility when `src` is set. |
| name | string | — | Display name used to derive initials (and as the label when `alt` is omitted). |
| initialsMax | number | 2 | Maximum number of initials derived from `name`. |
| fallback | ReactNode | — | Override fallback content (icon, custom text); takes precedence over derived initials. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Avatar dimensions. |
| color | "neutral" | "primary" | "success" | "error" | "warning" | "info" | "neutral" | Semantic color applied to the fallback background. |
| shape | "circular" | "rounded" | "square" | "circular" | Shape variant. |
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.
Accessibility
- The image's alt text resolves as
alt ?? name ?? ""— passalt(or at leastname) wheneversrcis set; with neither, the image is treated as decorative. - Fallback content (initials, icon, or custom node) carries
aria-label={alt ?? name}so screen readers announce the person instead of raw initials. - When the image fails to load, the component automatically swaps to the labeled fallback — no broken-image announcement.
- The image is
draggable={false}to avoid accidental drag interactions.