Avatar
The signature clay squircle. Shows an image, or derives initials from a name; add a status dot or group several into an overlapping stack.
import { Avatar, AvatarGroup } from "marclayui";Initials, gradient & sizes
AKSIZRNPOA
Status dots
AKSIRM
Grouped
RMNPOA+
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL; falls back to initials. |
name | string | — | Used for initials and the accessible label. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Scale of the squircle and font. |
status | "online" | "offline" | "busy" | — | Colored dot pinned to the corner. |
gradient | boolean | false | Primary gradient fill with clay light. |