A person's picture, initials or a generic icon. Seven sizes, circle or square, and avatar groups.
An avatar represents a person: their picture, their initials or a generic user icon. Built on the Base UI Avatar, which shows the fallback while the image loads and if it fails.
Mobile · 375px
Installation
npx shadcn@latest add @dga/avatarUsage
import { Avatar, AvatarGroup } from "@/components/ui/avatar";
<Avatar src="/people/noura.jpg" alt="نورة القحطاني" initials="ن ق" />
<AvatarGroup>
<Avatar size={32} src="/people/noura.jpg" alt="نورة" />
<Avatar size={32} initials="+3" aria-label="3 أشخاص آخرون" />
</AvatarGroup>Props
Avatar
Prop
Type
AvatarGroup
Prop
Type
Accessibility
- Give the image an
altwith the person's name, unless the name is already shown next to it (then usealt=""). - Initials are read as text. For a "+3" overflow avatar, add an
aria-labelsuch as "3 more people". - The fallback icon is hidden from screen readers.
Contrast
12 pairs checked against WCAG 2.1 AA (text 4.5:1, icons and focus rings 3:1), all passing. Disabled states are exempt.
initials
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| text | text-default / button-background-neutral-default | 16.44:1 AAA | 14.53:1 AAA |
icon
| State | Foreground on background | Light | Dark |
|---|---|---|---|
| icon | icon-default / button-background-neutral-default | 16.44:1 3:1 | 14.53:1 3:1 |
Deviations from DGA
| Item | DGA original | Ours | Reason |
|---|---|---|---|
| Avatar: sizes and text | Initials use Text xs/Semibold on every size in the export | Text style per size from the site CSS: 24 Text 2xs Bold, 32 Text xs SemiBold, 40 Text sm SemiBold, 48 Text md SemiBold, 64 Text xl Medium, 80 Display sm, 120 Display md | One text size cannot fit avatars from 24 to 120px. |