Data
Avatar
Image with tinted-initials fallback — the tint is hashed from the name, so people keep their color everywhere. Presence is announced, not just colored.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { Avatar, AvatarGroup } from "@nibapp/ui/components/avatar";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
Avatar
Image avatar with deterministic tinted initials as fallback, plus optional presence dot.
| Prop | Type | Default | Description |
|---|---|---|---|
| shape | "circle" | "square" | "circle" | |
| name (required) | string | — | The person's (or a bot's) name: the accessible label, the initials and the tint. |
| src | string | undefined | — | |
| size | AvatarSize | — | |
| status | AvatarStatus | undefined | — | Presence dot. Announced in the accessible label, not just shown in color. |
| persona | Persona | — | Override the hashed persona tint. |
| fallback | ReactNode | — | Replace the initials, e.g. with an icon for a bot or a team. |
| description | string | — | Optional role/descriptor appended to the label, e.g. "CEO". |
Also takes the props of a <span> element, except children.
AvatarGroup
Overlapping stack of avatars. Set `--avatar-ring` to the surface color when the group sits on anything other than the page background (e.g. `[--avatar-ring:var(--surface)]` inside a Card).
| Prop | Type | Default | Description |
|---|---|---|---|
| size | AvatarSize | "md" | |
| max | number | — | Show at most this many avatars, then a "+N" chip. |
Also takes .