bellhop by actabl

When to use

Use avatar stacked to show multiple people in a compact space while preserving individual identity.

Team Display

Show project team members or collaborators in a compact visual format.

Participant Lists

Display meeting attendees, conversation participants, or group members.

Shared Access

Indicate who has access to a document, file, or resource.

When not to use

  • When you need to show individual details for each user—display avatars separately
  • For more than 10-15 users—use a count with a view all option
  • When exact user identity is critical—display full list instead
  • For interactive user selection—use a multi-select component instead

Sizes

Avatar stacked comes in six sizes to fit different contexts.

XS
SM
MD
LG
XL
2XL

Features

Avatar stacked includes powerful features for managing lists of people.

Overflow Indicator

Shows "+N" when there are more avatars than max visible

Configurable Max

Control how many avatars display before overflow

Add Button

Optional + button for adding new members

Tooltip Support

Hover to see full names of all members

Multiple Sizes

Six sizes from xs to 2xl for different contexts

Best Practices

Follow these guidelines when using avatar stacked.

Do

  • Set a reasonable max visible count (3-5 typically)
  • Show most relevant/active members first
  • Use consistent avatar sizing across related UI
  • Provide tooltips for user names
  • Use add button when users can invite others
  • Consider responsive sizing for mobile

Don't

  • Don't show too many avatars (causes visual clutter)
  • Don't stack avatars in lists with many items
  • Don't use without proper name/tooltip information
  • Don't mix different sized stacks in close proximity
  • Don't hide all avatars behind overflow counter

Common Use Cases

Examples of where avatar stacked works best.

Project Teams

Show who's working on a project or task

Document Sharing

Display who has access to shared files

Event Participants

List meeting attendees or event RSVPs

Channel Members

Show active members in chat rooms or channels

Property Access

Indicate property managers or staff with access

Task Assignment

Display who is assigned to specific tasks

Accessibility

Avatar stacked is designed to be accessible to all users.

Screen Reader

  • All avatars include name attributes
  • Overflow count is announced
  • Add button is properly labeled
  • List structure is communicated

Keyboard Navigation

  • Tab - Focus on interactive elements
  • Enter - Activate add button if present
  • Individual avatars are not focusable by default

Visual Design

  • Clear visual distinction between avatars
  • Sufficient contrast for overflow indicator
  • Hover states provide feedback
  • Add button has clear visual affordance

Resources

Design and development resources for the Avatar Stacked component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →