docs / core / avatar
Avatar
a person, as an image or their initials.
intensity · recedesrsc · client
provenance
shaped from sisu-pluslayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
sits in EntityCard, comment rows, nav account cornersstacks into AvatarGroup for social proofnever a click target on its own. wrap it in a link or buttonnot for logos or icons. it is a persona11y
alt names the image · the status dot is aria-hiddenjest-axedependencies
@base-ui/react · class-variance-authoritylive demo · try it out
JD
customize
sizediameter and initials size
tonefallback fill
statuspresence dot in the corner
imageoff shows the fallback initials
altthe person's accessible name
fallbackinitials shown without an image
usage
import { Avatar } from "@usva-ui/react/primitives/avatar";
<Avatar src="/jane.png" alt="Jane Doe" fallback="JD" status="online" />props
| prop | type | default | notes |
|---|---|---|---|
| src | string | — | image source. omit it and the fallback shows. |
| alt | string | — | the person's name. required, it is the accessible name of the image. |
| fallback | string | — | initials shown while the image loads, errors, or is missing. |
| size | "sm" | "md" | "lg" | "md" | diameter and initials size. |
| status | "online" | "away" | "busy" | "offline" | — | a presence dot in the corner. online pulses. |
| tone | "solid" | "accent" | "neutral" | "solid" | fallback fill: solid accent, tinted accent, or neutral surface. |
get it
bun add @usva-ui/reactusage
import { Avatar } from "@usva-ui/react/primitives/avatar";
<Avatar src="/jane.png" alt="Jane Doe" fallback="JD" />
<Avatar alt="Ada Lovelace" fallback="AL" status="online" />