Avatar Group

+2

Stack

Spread

계약

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

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

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 레퍼런스

Prop	Default	Type	Description
avatars	—	AvatarItem[]	아바타 항목 배열(필수). 각 항목은 `src?`, `alt` 속성을 가집니다.
size	"md"	"xs" | "sm" | "md" | "lg" | "xl"	아바타 크기 티어.
max	—	number	개수 표시 전에 보여줄 최대 아바타 수.
layout	"stack"	"stack" | "spread"	레이아웃 스타일: 스택 또는 펼침.