Components
Avatar
User and entity avatars with initials fallback across four sizes.
Avatar renders a user or entity image and falls back to initials on a stable,
name-derived background colour when src is absent or fails to load. Pass name
to derive both the initials and the alt text, or set initials explicitly. Tune
the size (xs through xl) and shape (circle or square) to fit the
surface.
Example
Preview
XSSMMDLG
import { Avatar } from '@officina/ui';
<Avatar src="/me.jpg" alt="Ada" size="md" />
<Avatar initials="AL" size="lg" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| alt | string | — | Image alt text (defaults to `name`). |
| initials | string | — | Explicit initials override (otherwise derived from `name`). |
| name | string | — | Full name used to derive initials and the alt text. |
| shape | "circle" | "square" | null | — | |
| size | "xs" | "sm" | "md" | "lg" | "xl" | null | — | |
| src | string | — | Image URL. Falls back to initials when absent or it fails to load. |