AppAvatarGroup

Moléculas

Abrir no Storybook

Agrupa avatares sobrepostos e informa quantas pessoas não estão visíveis.

Quando usar: representar participantes, membros de uma equipe ou pessoas associadas a uma entidade.

Quando não usar: identificar uma única pessoa; use AppAvatar ou AppAvatarLabel.

Importar

import { AppAvatarGroup } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppAvatarGroup.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppAvatarGroup.css';

Exemplos

Default

Exemplo: AppAvatarGroup, Default

const Default = () => <AppAvatarGroup max={5}>{people.map(([name, background, hair]) => <AppAvatar key={name} name={name} src={avatarSvg(background, hair)} />)}</AppAvatarGroup>;

Com Adicionar

Exemplo: AppAvatarGroup, Com Adicionar

const ComAdicionar = () => <AppAvatarGroup max={5}>{people.map(([name, background, hair]) => <AppAvatar key={name} name={name} src={avatarSvg(background, hair)} />)}</AppAvatarGroup>;

Tamanhos

Exemplo: AppAvatarGroup, Tamanhos

const Tamanhos = () => (
  <div style={{ display: 'grid', gap: 16 }}>
    <AppAvatarGroup size="xs" max={3}>{avatars}</AppAvatarGroup>
    <AppAvatarGroup size="sm" max={3}>{avatars}</AppAvatarGroup>
    <AppAvatarGroup size="md" max={3}>{avatars}</AppAvatarGroup>
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
children*	ReactNode	—	Avatares que serão exibidos sobrepostos.
addLabel	string	Adicionar pessoa	Nome acessível e título do botão de adicionar. Padrão: Adicionar pessoa.
max	number	—	Máximo de avatares visíveis antes de exibir o indicador "+N".
onAdd	(() => void)	—	Ação chamada pelo botão para adicionar uma pessoa. Quando ausente, o botão não é exibido.
size	"xs" | "sm" | "md"	md	Tamanho repassado aos avatares filhos. Padrão: md.