Skip to Content
ComponentsMoleculesAvatar Group

Avatar Group

Molecule

Avatar Group mostra presença e responsabilidade, não decoração social.

Use Avatar Group para indicar responsáveis, revisores, participantes de uma crise ou pessoas envolvidas em uma ação. Quando identidade importa para auditoria, combine avatar com nome acessível ou tooltip/lista expandida.

Exemplos copiáveis

React

import * as React from "react"
 
type AvatarPerson = {
  id: string
  name: string
  initials: string
  src?: string
}
 
type PulsoAvatarGroupProps = {
  people: AvatarPerson[]
  max?: number
  label?: string
}
 
export function PulsoAvatarGroup({
  people,
  max = 4,
  label = "Participantes",
}: PulsoAvatarGroupProps) {
  const visiblePeople = people.slice(0, max)
  const overflow = Math.max(people.length - visiblePeople.length, 0)
 
  return (
    <div className="flex items-center gap-2" aria-label={label}>
      <ul className="flex -space-x-2" aria-label={`${people.length} participantes`}>
        {visiblePeople.map((person) => (
          <li key={person.id}>
            <span className="grid size-9 place-items-center overflow-hidden rounded-full border-2 border-[var(--card)] bg-[var(--muted)] font-mono text-xs font-semibold text-[var(--fg)]" title={person.name}>
              {person.src ? (
                <img src={person.src} alt={person.name} className="size-full object-cover" />
              ) : (
                <span aria-hidden="true">{person.initials}</span>
              )}
              {!person.src ? <span className="sr-only">{person.name}</span> : null}
            </span>
          </li>
        ))}
 
        {overflow > 0 ? (
          <li>
            <span className="grid size-9 place-items-center rounded-full border-2 border-[var(--card)] bg-[var(--popover)] font-mono text-xs font-semibold text-[var(--fg-muted)]">
              +{overflow}
            </span>
          </li>
        ) : null}
      </ul>
 
      <span className="text-sm text-[var(--fg-muted)]">
        {people.length} {people.length === 1 ? "pessoa" : "pessoas"}
      </span>
    </div>
  )
}
<PulsoAvatarGroup
  label="Responsáveis pelo caso"
  people={[
    { id: "ana", name: "Ana Souza", initials: "AS" },
    { id: "bruno", name: "Bruno Lima", initials: "BL" },
    { id: "cris", name: "Cris Assistente", initials: "CR" },
    { id: "nina", name: "Nina Costa", initials: "NC" },
    { id: "ops", name: "Equipe Ops", initials: "OP" },
  ]}
/>

Quando usar

  • Responsáveis por uma crise ou tarefa.
  • Revisores envolvidos em uma decisão.
  • Participantes de sala, handover ou escalonamento.
  • Indicação compacta de ownership em cards e tabelas.

Quando não usar

  • Quando nomes completos são necessários para decisão ou auditoria imediata.
  • Para decorar cards sem informar responsabilidade real.
  • Para representar sistemas/IA sem distinguir de pessoas humanas.
  • Em ações críticas onde o aprovador precisa estar textual e explícito.

Regras

  1. Avatar precisa ter nome acessível.
  2. Mostre contador quando houver overflow.
  3. Não esconda ownership crítico apenas em tooltip.
  4. Diferencie pessoa, equipe e assistente de IA quando isso impacta decisão.
  5. Em auditoria, prefira nome textual junto do avatar.
Last updated on
AccordionButton Group