Components / data-display

Avatar Group

A row of overlapping Avatars for the people on a project or thread.

import { AvatarGroup } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { AvatarGroup, Avatar } from '@basiiik/ui';

<AvatarGroup label="Project members"><Avatar name="Ada Lovelace" /></AvatarGroup>

• Example values were filled in for the required prop label: replace them with your own.
• No interactive states. Overflow appears when there are more people than max (or total is larger than the avatars passed).
• Compose with: avatar.
• Storybook: Data display/Avatar Group.

Props

States. No interactive states. Overflow appears when there are more people than max (or total is larger than the avatars passed).

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• The people on a project, file or thread, in a header or a table cell
• A compact "who is here" row where names are available on demand

Do not use it when

• One person (use Avatar)
• A list where each person needs a name, role or action (use List or Table)
• An interactive picker of people

Rules for agents

• Give the group a label and every Avatar a name
• Set max (3 to 5) so the row stays short; pass total when you only have the first few people
• Use size="sm" in table cells and dense rows, md in headers
• Keep the same size within one group; set it on the group, not on each Avatar

Avoid

• Overlapping avatars by hand with negative margins
• A hand-written "+2" text after a row of Avatars
• Avatars without names inside the group
• Showing ten or more avatars instead of a count

Writing the content

• Label: who the people are: "Project members", "Reviewers"

Accessibility

• The group is named by label ("Project members")
• Each Avatar is an image named after the person, so give every Avatar a name
• The "+N" count is an image named "N more"

Colour tokens it reads

Related

• Avatar
• Page Header
• Table
• Tooltip

data-display 4 Figma variants Try it in the live demo