Moodinary/UI

Avatar + group

Personas del staff (nunca participantes: responden anónimos). Iniciales si no hay foto.

Avatar es una primitiva disponible, pero el panel usa InitialsAvatar para miembros y responsables. Nunca representa a quienes respondieron un pulso: sus respuestas son anónimas.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/avatar.json
import
import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount } from "@moodinary/ui/components/avatar";
import { InitialsAvatar } from "@moodinary/ui/components/initials-avatar";

Ejemplos

Tamaños y fallback

Sin foto, mostrá iniciales. Si no sabemos quién es, usá un signo de pregunta.

MNLPCR?
Código
sizes.tsx
import { Avatar, AvatarFallback } from "@moodinary/ui/components/avatar";

export default function AvatarSizes() {
	return (
		<>
			<Avatar aria-label="Martín Núñez, staff" size="sm">
				<AvatarFallback>MN</AvatarFallback>
			</Avatar>
			<Avatar aria-label="Lucía Pereyra, staff">
				<AvatarFallback>LP</AvatarFallback>
			</Avatar>
			<Avatar aria-label="Carla Ruiz, staff" size="lg">
				<AvatarFallback>CR</AvatarFallback>
			</Avatar>
			<Avatar aria-label="Responsable sin nombre">
				<AvatarFallback className="bg-hover text-ink-2">?</AvatarFallback>
			</Avatar>
		</>
	);
}

Estado y grupo

Para responsables o personas en línea. El conteo resume al resto.

SG
MNLPCR
+2
Código
group.tsx
import {
	Avatar,
	AvatarBadge,
	AvatarFallback,
	AvatarGroup,
	AvatarGroupCount,
} from "@moodinary/ui/components/avatar";

export default function AvatarGroupExample() {
	return (
		<>
			<span className="group/avatar relative inline-flex" data-size="default">
				<Avatar aria-label="Sofía Gómez, staff">
					<AvatarFallback>SG</AvatarFallback>
				</Avatar>
				<AvatarBadge aria-label="En línea" className="ring-card" />
			</span>
			<AvatarGroup aria-label="Responsables, 5 personas" role="group">
				<Avatar aria-label="Martín Núñez">
					<AvatarFallback>MN</AvatarFallback>
				</Avatar>
				<Avatar aria-label="Lucía Pereyra">
					<AvatarFallback className="bg-org/85">LP</AvatarFallback>
				</Avatar>
				<Avatar aria-label="Carla Ruiz">
					<AvatarFallback className="bg-org/70">CR</AvatarFallback>
				</Avatar>
				<AvatarGroupCount aria-label="2 responsables más">+2</AvatarGroupCount>
			</AvatarGroup>
		</>
	);
}

Iniciales automáticas

InitialsAvatar calcula las iniciales y asegura contraste.

Código
initials.tsx
import { InitialsAvatar } from "@moodinary/ui/components/initials-avatar";

export default function AvatarInitials() {
	return <InitialsAvatar name="Lucía Pereyra" size={32} />;
}

Props

Avatar

PropTipoDefaultDescripción
size"sm" | "default" | "lg""default"24, 32 o 44 px.
classNamestring-Clases extra.

AvatarFallback

PropTipoDefaultDescripción
childrenReactNode-Iniciales o símbolo.

InitialsAvatar

PropTipoDefaultDescripción
namestring-Nombre completo.
colorstringBRAND_PRIMARYColor base; se ajusta para contraste.
sizenumber32Tamaño en px.

Cuándo sí y cuándo no

Hacé
  • Usalo solo para staff.
  • Mostrá iniciales cuando no hay foto.
  • Limitá los grupos y mostrá el resto como conteo.
Evitá
  • No asocies avatares a respuestas.
  • No uses avatares para participantes.
  • No muestres estado en línea si no es real.

Accesibilidad

  • Nombrá a la persona con aria-label o texto visible.
  • El estado no puede depender solo del punto de color.