AvatarGroup

Stable

Stacked or grid group of avatars with overflow count support.

Installation

npm install @xaui/native

Import

import { AvatarGroup, Avatar } from '@xaui/native/avatar'

Basic Usage

Minimal example showing the component with its default configuration.

import { AvatarGroup } from '@xaui/native/avatar'

export function Example() {
  return <AvatarGroup />
}

Basic stacked group

Default stacked layout with overlapping avatars.

import { Avatar, AvatarGroup } from '@xaui/native/avatar'

export function AvatarGroupBasicExample() {
  return (
    <AvatarGroup>
      <Avatar src="https://i.pravatar.cc/150?u=1" />
      <Avatar src="https://i.pravatar.cc/150?u=2" />
      <Avatar src="https://i.pravatar.cc/150?u=3" />
      <Avatar src="https://i.pravatar.cc/150?u=4" />
    </AvatarGroup>
  )
}

Max — overflow count

Limit visible avatars with `max`. The rest shows as a count badge.

import { Avatar, AvatarGroup } from '@xaui/native/avatar'

export function AvatarGroupMaxExample() {
  return (
    <AvatarGroup max={3}>
      <Avatar src="https://i.pravatar.cc/150?u=1" />
      <Avatar src="https://i.pravatar.cc/150?u=2" />
      <Avatar src="https://i.pravatar.cc/150?u=3" />
      <Avatar src="https://i.pravatar.cc/150?u=4" />
      <Avatar src="https://i.pravatar.cc/150?u=5" />
    </AvatarGroup>
  )
}

Total — custom count

Override the overflow number shown with `total`.

import { Avatar, AvatarGroup } from '@xaui/native/avatar'

export function AvatarGroupTotalExample() {
  return (
    <AvatarGroup max={3} total={128}>
      <Avatar src="https://i.pravatar.cc/150?u=1" />
      <Avatar src="https://i.pravatar.cc/150?u=2" />
      <Avatar src="https://i.pravatar.cc/150?u=3" />
    </AvatarGroup>
  )
}

Bordered group

Add ring borders to each avatar with `isBordered`.

import { Avatar, AvatarGroup } from '@xaui/native/avatar'

export function AvatarGroupBorderedExample() {
  return (
    <AvatarGroup isBordered themeColor="primary">
      <Avatar src="https://i.pravatar.cc/150?u=1" />
      <Avatar src="https://i.pravatar.cc/150?u=2" />
      <Avatar src="https://i.pravatar.cc/150?u=3" />
    </AvatarGroup>
  )
}

Grid layout

Switch to a grid arrangement with `isGrid`.

import { Avatar, AvatarGroup } from '@xaui/native/avatar'

export function AvatarGroupGridExample() {
  return (
    <AvatarGroup isGrid size="lg">
      <Avatar src="https://i.pravatar.cc/150?u=1" />
      <Avatar src="https://i.pravatar.cc/150?u=2" />
      <Avatar src="https://i.pravatar.cc/150?u=3" />
      <Avatar src="https://i.pravatar.cc/150?u=4" />
      <Avatar src="https://i.pravatar.cc/150?u=5" />
      <Avatar src="https://i.pravatar.cc/150?u=6" />
    </AvatarGroup>
  )
}

Custom overflow renderer

Render the overflow badge exactly as you want with `renderCount`.

import { Avatar, AvatarGroup } from '@xaui/native/avatar'

export function AvatarGroupRenderCountExample() {
  return (
    <AvatarGroup
      max={3}
      renderCount={(count) => (
        <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: '#6366f1', alignItems: 'center', justifyContent: 'center' }}>
          <Typography style={{ color: '#fff', fontSize: 12, fontWeight: '600' }}>+{count}</Typography>
        </View>
      )}
    >
      <Avatar src="https://i.pravatar.cc/150?u=1" />
      <Avatar src="https://i.pravatar.cc/150?u=2" />
      <Avatar src="https://i.pravatar.cc/150?u=3" />
      <Avatar src="https://i.pravatar.cc/150?u=4" />
    </AvatarGroup>
  )
}