Avatar Group
betaOverlapping avatars that spread apart on hover or keyboard focus, collapsing the rest into a "+N" count.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add avatar-groupnpm packages installed: class-variance-authority.
import { AvatarGroup } from "@/components/ui/avatar-group";Default
Gallery
Linked
Initials
Sizes
<AvatarGroup>
| Prop | Type | Default |
|---|---|---|
avatars (required)The people to show, in order. The first is drawn on top. | AvatarGroupItem[] | — |
expand | "hover" | "none" | "hover" |
maxHow many avatars to show before collapsing the rest into "+N". | number | 4 |
overflowLabelScreen-reader text for the overflow count. | (hidden: number) => string | (hidden) => `and ${String(hidden)} more` |
overlapHow much each avatar overlaps the previous one, as a fraction of its width. | number | 0.3 |
sizeAvatar size, as | keyof typeof SIZE_REM | "md" |
Plus every attribute of <ul> except children.
A list of people: each avatar's image carries the person's name as alt text, and the initials fallback is aria-hidden with the name beside it as screen-reader text. The "+N" overflow reads as "and N more" (overflowLabel). Linked avatars are real links with a focus ring, and keyboard focus spreads the group just as hover does. Name the group with aria-label when the context does not. The spread stops under reduced motion.
8/8
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 — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes