desktop_windows
Web
phone_iphone
Mobile

COMPONENTS

Overview
AI
keyboard_arrow_down
Avatar
Avatar Group
Badge
Breadcrumb
Button
Calendar
Cards
Checkbox
Chips
Combobox
Date Pickers
Dividers
Dropdowns
Empty state
Help Text
Icon
Inline Editable Fields
Interactive Cards
Inputs
Key Value Pair
Link
Link Button
Listbox
Menu
Messages
Meta List
Modals
Navigation - Horizontal
Navigation - Vertical
Page Headers
Pagination
Pill
Popover
Progress Indicators
Radio
Rich Text Editor
Select
Sidesheet
Sliders
Status Hint
Stepper
Switch
Table
Tabs
Time Picker
Toast
Tooltip

Avatar Group

Avatar group displays a group of avatars stacked together.

Usage
Code
Interactions

Types

Avatar Group

An avatar group displays a group of avatars stacked together to represent entities.

Selection Avatar Group

Selection avatar displays a group of avatars that can be interacted with. It is mainly used for filtering of data.

States

Avatar Group

Avatar group comes in 3 states for upfront avatars i.e default, focus and disabled. It has 2 states for numeric avatars i.e default and focus.

States of Avatars in Avatar Group States of Avatars in Avatar Group

Selection Avatar Group

Selection avatar group comes in 5 states - default, hover, active, focus and disabled.

States of Avatars in Selection Avatar Group States of Avatars in Selection Avatar Group

Sizes

Both avatar group and selection avatar group come in 2 sizes - small and regular.

[Left] Regular size vs [Right] Small size of avatars [Left] Regular size vs [Right] Small size of avatars

Variants

Both avatar group and selection avatar group share the same variants.

With Initials

[Left] Avatar group vs [Right] Selection avatar group with initials [Left] Avatar group vs [Right] Selection avatar group with initials

With Icon

[Left] Avatar group vs [Right] Selection avatar group with icon [Left] Avatar group vs [Right] Selection avatar group with icon

With Image

[Left] Avatar group vs [Right] Selection avatar group with image [Left] Avatar group vs [Right] Selection avatar group with image

Structure

Option Item (Selection Avatar Group)



PropertyValue(s)
Padding (Top and bottom)

  • 4px

  • 8px

  • 12px

Padding (Left and right)16px

Configurations

Avatar Group



PropertyValue(s)Default value
Size
  • Small
  • Regular
Regular
Border color<color>Namak
Additional users<count>-

Selection Avatar Group



PropertyValue(s)Default value
Size
  • Small
  • Regular
Regular
Border color<color>Namak
Additional users<count>-

Option Item (Selection Avatar Group)



PropertyValue(s)Default value
Label<label>-
Size
  • Standard
  • Compressed
  • Tight
Compressed

Popover



PropertyValue(s)Default value
Width<width>176px (Customizable)
Max height<max_height>256px (Customizable)
Min height<min_height>-

Usage

Max Count

Here are the guidelines for the maximum number of avatars permitted to prevent excessive cognitive load.

Avatar Group

Avatar group is limited to three entities. For groups larger than three, only two avatars are displayed. The additional avatars are represented by a numeric avatar with the text +N (where N is the number of remaining avatars beyond two).

[Left] Three avatars vs [Right] More than three avatars [Left] Three avatars vs [Right] More than three avatars

Note: To display the additional entities that are not visible upfront, a popover with the full names of those entities is shown when you hover over the numeric avatar.

Popover displays hidden entities when hovering Popover displays hidden entities when hovering

Selection Avatar Group

Selection avatar group is limited to six entities to facilitate data filtering and alleviate cognitive overload. For groups larger than three, only two avatars are displayed. The additional avatars are represented by a numeric avatar with the text +N (where N is the number of remaining avatars beyond two).

[Left] Six avatars vs [Right] More than six avatars [Left] Six avatars vs [Right] More than six avatars

Note: To view additional entities not visible upfront, click the numeric avatar to display a popover with a checklist of their full names.

Popover displays hidden entities upon clicking Popover displays hidden entities upon clicking

Round Avatar Group vs Square Avatar

Round avatar groups are designed to facilitate an interactive and visually cohesive representation of individual members within a group. In contrast, square avatars are ideal for presenting the group as a unified entity.

Selection Avatar Group vs Select

It is recommended to use selection avatar group for fewer entities, and select for a larger number of options.

Width of Popover

While the popover’s width is flexible and can vary, it is advisable to maintain a size that is equal to or larger than the avatar group.

Width of popover Width of popover

Overflow Behavior of Items

In case of overflow, the items will get truncated and can be viewed inside a tooltip on hover.

Overflow behavior of items Overflow behavior of items inside popover

Appending Suffix to the Name of an Entity

In an avatar group, you can add a suffix to an entity’s name that appears in tooltips and popovers.

Note: Adding a suffix for disabled states is recommended to keep users informed.

Appending a suffix to the name of the disabled entity Appending a suffix to the name of the disabled entity

Was this page helpful?

CONTENTS