Avatar
An image representation of a user or entity with a graceful text fallback.
- Display
- 1 file
- 2 npm packages
- Accessibility notes
pnpm dlx @dowel-ui/cli add avatarnpm packages installed: class-variance-authority, radix-ui.
import { Avatar } from "@/components/ui/avatar";Default
Fallback
Sizes
Group
<Avatar>
| Prop | Type | Default |
|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" |
Every prop of Radix UI’s Avatar.Root, plus className.
<AvatarImage>
Every prop of Radix UI’s Avatar.Image, plus className.
<AvatarFallback>
Every prop of Radix UI’s Avatar.Fallback, plus className.
Give AvatarImage a meaningful alt, or alt="" when the adjacent text already names the person. Fallback initials are decorative and are not announced separately.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes