Orvain UI
Orvain UI
HomeBlocksAI toolsFigmaPricing
FAQBlogsContact usAbout us
Docs
Sign InGet the Figma
Free componentsFREEBlocksPROCode library + MCPSOONFigma filePRO

Getting started

Introduction
What's available

Foundations

Color
Typography

Guides

Editor and MCP

Components

Overview
Actions
ButtonLink ButtonGhost ButtonFancy ButtonCompact ButtonButton Group
Displaying Data
AvatarsAvatar GroupAvatar Compact GroupBadgesTagFancy TagData TableContent LabelContent DividerKBDLine Progress BarCircular Progress BarRating
Feedback
Alert & NotificationTooltipBanner
Form
CheckboxRadioColor PickerDate PickerOTP InputFile UploadHintInputLabelDropdownSliderSwitchText Area
Layout
AccordionBreadcrumbSegmented ControlTab Menu HorizontalTab Menu Vertical
Navigation
Dot StepperPaginationNavbar
Overlays
Command MenuModalPopover
Displaying Data

Avatar Group

How the Avatar Group works with a keyboard and assistive tech.

OverviewPlaygroundAccessibility

Guidance#

The group is a list, or has an aria-label such as "8 members", so the total is announced once.

Each avatar names its person. The overflow count is announced as "and 5 more", not "+5".

If the count opens a list, it is a <button> with aria-expanded.

PreviousAvatarsNextAvatar Compact Group

On this page

Guidance
Documentation

On this page

Guidance
Free componentsFREEBlocksPROCode library + MCPSOONFigma filePRO

Getting started

Introduction
What's available

Foundations

Color
Typography

Guides

Editor and MCP

Components

Overview
Actions
ButtonLink ButtonGhost ButtonFancy ButtonCompact ButtonButton Group
Displaying Data
AvatarsAvatar GroupAvatar Compact GroupBadgesTagFancy TagData TableContent LabelContent DividerKBDLine Progress BarCircular Progress BarRating
Feedback
Alert & NotificationTooltipBanner
Form
CheckboxRadioColor PickerDate PickerOTP InputFile UploadHintInputLabelDropdownSliderSwitchText Area
Layout
AccordionBreadcrumbSegmented ControlTab Menu HorizontalTab Menu Vertical
Navigation
Dot StepperPaginationNavbar
Overlays
Command MenuModalPopover