Avatar
avatarDisplays a user image with fallback content.
Usage
Picture with fallback
src Displays the image if loading is successful; falls back to fallback (initial letter/text) if failed or omitted.
ZSHu
tsx
<>
<Avatar src="/demo/avatar-12.jpg" alt="demo" fallback="ZS" />
<Avatar fallback="Hu" />
</>Dimensions
size provides sm / md / lg / xl / 2xl in five diameters.
SMLXL2X
tsx
<>
<Avatar size="sm" fallback="S" />
<Avatar size="md" fallback="M" />
<Avatar size="lg" fallback="L" />
<Avatar size="xl" fallback="XL" />
<Avatar size="2xl" fallback="2X" />
</>When to use
Use Avatar for one person's image, with initials or other fallback content when the image is missing or fails. Use [User] for an avatar with a name and description, or AvatarCircles for an overlapping group.
Import
ts
import { Avatar } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Preset circular diameter. |
| src | string | — | Image URL; failures reveal fallback. |
| alt | string | — | Alternative image text. |
| className | string | — | Custom class name. |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Content shown without a working image, usually initials. |
Pitfalls
- Base UI reveals
fallbackafter a missing or failedsrc; provide it to avoid an empty avatar. sizeaccepts only sm, md, and lg. Override dimensions throughclassNamefor a custom size.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
ZS
<Avatar size="md" src="/demo/avatar-12.jpg" fallback="ZS" />