Avatar Group

+2

Stack

Spread

Contract

Overview

Machine-readable contract from Component Spec.

component: avatarsexport: Avatarsversion: 1attributes: data-refineui=avatars

Anatomy

Part	data-refineui
root	avatars

Variants

Axis	Values
size	xs, sm, md, lg, xl
layout	stack, spread

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Avatars } from "@refineui/react";

<Avatars
  avatars={[
    { src: "/user1.jpg", alt: "User 1" },
    { src: "/user2.jpg", alt: "User 2" },
    { src: "/user3.jpg", alt: "User 3" }
  ]}
/>

<Avatars
  avatars={teamMembers}
  size="lg"
  max={3}
  layout="spread"
/>

API Reference

Prop	Default	Type	Description
avatars	—	AvatarItem[]	Array of avatar items (required). Each item has `src?`, `alt` properties.
size	"md"	"xs" | "sm" | "md" | "lg" | "xl"	Avatar size tier.
max	—	number	Maximum avatars to display before showing count.
layout	"stack"	"stack" | "spread"	Layout style: stacked or spread apart.