Avatar
User image, fallback initials, status, and grouped avatar primitives.
Quick Preview
AONK
+3
Composition
Use this public composition when building Avatar:
Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarStatus
AvatarGroup
├── Avatar
└── AvatarGroupCountUsage
<Avatar>
<AvatarImage src="/avatar.png" alt="Ada Okafor" />
<AvatarFallback>AO</AvatarFallback>
</Avatar>Examples
Sizes
Use size to match avatar scale to compact rows, default identity blocks, or larger profile surfaces.
SMMDLG
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
size | `"sm" | "md" | "lg"` |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented Avatar composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.