Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Design review
  • Sizes
  • Recommendations
  • Usage boundaries
  • API reference

Data

Avatar Group

Clusters overlapping avatars with inherited sizing and consumer-supplied children.

idle

Usage

import { AvatarGroup } from "@mizen-labs/ui";

Examples

Design review

Sizes

Avatar group clusters overlapping avatars with inherited size and consumer-supplied children.

Recommendations

GuidancePractice
Do

Give the group a shared name and keep ordering meaningful. Explain any omitted members nearby.

Usage boundaries

GuidanceBoundary
Scope

The caller supplies members and overflow content. Use a list when users need to identify every participant.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
size"default" | "lg" | "sm""default"Sets the avatar dimensions inherited by child avatars.
childrenReactNode—Avatar elements arranged in the group.
roleAriaRole—Optional ARIA role. Set to group when the avatars form a named set.
aria-labelstring—Accessible name describing the group of avatars.
PreviousAvatarNextData Table
MCARJL

Design review

Three teammates are reviewing the next release.

ARJLMC
ARJLMC
ARJLMC
ARJLMC