Avatar group
A facepile of overlapping avatars with an overflow chip
ALGHATKJ+2
6 members
Usage
import { AvatarGroup } from "@gpuixui/components/avatar-group";
<AvatarGroup
members={[
{ name: "Ada Lovelace", status: "online" },
{ name: "Grace Hopper", status: "busy" },
{ name: "Alan Turing" },
{ name: "Katherine Johnson" },
]}
max={3}
label="Project team"
/>;API
| Prop | Type | Default |
|---|---|---|
members | ReadonlyArray<AvatarGroupMember> (a value that is not a list reads as none; an entry without a text name is dropped) | — |
max | number | everyone |
size | "xs" | "sm" | "md" | "lg" | "md" |
overlap | number | quarter of the diameter |
ringColor | string | theme background |
label | string | ${count} avatars |
stepMs | number | 40 |
rise | number | 6 |
level | MotionLevel | "normal" |
className | string | — |
style | StateStyle<AvatarGroupState> | — |
Edit this page on GitHubpackages/components/docs/avatar-group.mdx