Pular para o conteúdo
Faculdade PhorteDesign System

AvatarGroup

Em andamento

Avatares sobrepostos em fila, com um círculo "+N" para os que passam do limite — prova social ("e mais 250 mil formados"). É um grupo com o total para quem ouve: "6 participantes".

Função
Conteúdo
Também chamado de
grupo de avatares, pilha de fotos, prova social
Mora em
app/components/molecules/AvatarGroup.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Com Excedente
  3. Tamanhos
  4. Um só
  5. Com rótulo
  6. Com adicionar
  7. Com presença

Quando usar

Para mostrar que várias pessoas participam — alunos, palestrantes, inscritos — sem listar todas.

Faça

  • Escreva ao lado o que o grupo significa ("+ de 250.000 alunos") — o grupo sozinho não diz.
  • Dê o name completo de cada pessoa (E64): é o nome do avatar e a fonte das iniciais.
  • Ajuste max ao espaço: quatro por padrão. Use menos quando a fila divide a linha com texto.
  • Troque o rotulo quando "participantes" não disser quem são: "6 palestrantes".
  • Passe onAdicionar para o botão de convidar (E116), com um rotuloDoAdicionar que diga a ação ("Convidar para o grupo de estudo").

Evite

  • Esperar que o "+N" diga de quê: o leitor ouve "e mais 3 pessoas", mas o que o grupo significa ("formados", "inscritos") precisa estar escrito ao lado.
  • Usar para logotipos de parceiros: é só para pessoas (a nota do SLDS registra esse erro).

Quando não usar. Para uma pessoa só, use o Avatar. Para apresentar pessoas com nome e cargo, o EventSpeaker ou o TeamGrid.

Nota de uso

Só para pessoas (E64) — logotipos de parceiros vão numa faixa de logos, não aqui. Passe o name completo em cada avatar; o grupo anuncia o total ("6 participantes", ou o rotulo), e o contador diz "e mais 2 pessoas". Use max para caber no espaço, e escreva ao lado o que o grupo significa. O salto no hover saiu: o avatar não é clicável.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Avatares — Até `max`, sobrepostos (o primeiro por cima), com borda da cor do fundo.
  2. Contador — Círculo `--muted` com "+N", do mesmo tamanho dos avatares.
  3. Adicionar — Com `onAdicionar`: círculo tracejado `--border-interactive` com o sinal de mais, 12px depois da fila, do tamanho dos avatares; área de toque de 44px pela utilidade `area-de-toque` (pseudo-elemento).

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PadrãoAvatares sobrepostos, md por padrão.
ExcedenteCom mais pessoas que max, aparece o "+N".
Com adicionarO botão tracejado ao lado; no hover e no foco, borda e sinal em --primary.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Mais pessoas que `max`Mostra as primeiras max e o "+N" com o resto.
Foto que falhaCada Avatar troca pelas iniciais do name (ou do fallback).
HoverNada (E64): o salto de 4px saiu — movimento em avatar que não é clicável prometia uma ação que não existe.
"Adicionar" acionadoChama onAdicionar; quem chama abre o convite (um Modal, uma Gaveta) — testado na ficha, pelo teclado.

Relacionados