AvatarGroup

Apila avatares en una fila compacta solapada. Cuando se supera el límite max, el excedente se muestra como un contador "+N". El espaciado es configurable y el tamaño se propaga automáticamente a todos los hijos.

ALBDCRDMEV+2

ALBDCRDM+2

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Avatar, AvatarGroup } from "@tsukira/ui"; <AvatarGroup size="md" max={4}>  <Avatar name="Ana López" />  <Avatar name="Bruno Díaz" />  <Avatar name="Carla Ruiz" />  <Avatar name="Diego Mora" />  <Avatar name="Elena Vidal" /></AvatarGroup>

Ejemplos#

Overflow con max

los avatares que superan max se colapsan en +N

ALBDCR+2

ALBDCRDM+1

Tamaños

size se propaga a todos los avatares hijos

ALBDCRDM+1

Espaciado personalizado

spacing (px) — negativo = más solapado

spacing -16

ALBDCRDMEV+1

spacing -4

ALBDCRDMEV+1

Fusión: tarjeta de equipo

AvatarGroup + Badge de miembros + Button Invitar en Card

Equipo de diseño

Kimi Design System

Responsables del sistema de componentes y la guía de estilos.

ALBDCRDMEV+2

7 miembros

Fusión: celda de colaboradores en Table

AvatarGroup como valor de celda en una Table

Proyecto	Estado	Colaboradores
Portal de clientes	Activo	ALBDCRDM+1
API v3	En curso	FGGTHR
App móvil	Planificado	ISJV

API#

AvatarGroupPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`size`	`AvatarSize`	—	Tamaño aplicado a todos los avatars del grupo.
`max`	`number`	—	Máximo de avatars visibles antes del “+N”.
`spacing`	`number`	—	Solapamiento (px) — negativo = más superpuesto.
`children`*	`ReactNode`	—	Avatars a renderizar.