PrimitiveDisponible

Avatar

Identidad circular en tres tamaños, con variantes rellena o de contorno transparente, imagen, alternativa, estado y grupos superpuestos.

SIZES / TAMAÑOS

SM32 px

MD40 px

LG56 px

COLORS / COLORES

ABcoral

CDpurple

EFteal

GHyellow

IJblue

KLorange

FILLED & OUTLINE / RELLENO Y CONTORNO

ABfilled

ABoutline

AVATAR GROUP / GRUPO

ABC

IMAGE & FALLBACK / IMAGEN Y ALTERNATIVA

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/avatar.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import { UserIcon } from '@phosphor-icons/react';
import { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarBadge, AvatarGroupCount } from '@/components/ui/avatar';

export default function Demo() {
  return (
    <div className="grid w-full gap-8">
      <section className="grid gap-4" aria-label="Sizes / Tamaños">
        <p className="bl-type-small text-muted-foreground">SIZES / TAMAÑOS</p>
        <div className="flex flex-wrap items-end gap-6">
          {(['sm', 'default', 'lg'] as const).map((size, index) => <div className="grid justify-items-center gap-3" key={size}><Avatar size={size} aria-label={['Small', 'Medium', 'Large'][index]}><AvatarFallback>{['SM', 'MD', 'LG'][index]}</AvatarFallback></Avatar><span className="text-xs text-foreground">{[32, 40, 56][index]} px</span></div>)}
        </div>
      </section>
      <section className="grid gap-4" aria-label="Colors / Colores">
        <p className="bl-type-small text-muted-foreground">COLORS / COLORES</p>
        <div className="flex flex-wrap gap-5">
          {(['coral', 'purple', 'teal', 'yellow', 'blue', 'orange'] as const).map((tone, index) => <div key={tone} className="grid justify-items-center gap-3"><Avatar tone={tone} aria-label={tone}><AvatarFallback>{['AB', 'CD', 'EF', 'GH', 'IJ', 'KL'][index]}</AvatarFallback></Avatar><span className="text-xs text-foreground">{tone}</span></div>)}
        </div>
      </section>
      <section className="grid gap-4" aria-label="Variants / Variantes">
        <p className="bl-type-small text-muted-foreground">FILLED & OUTLINE / RELLENO Y CONTORNO</p>
        <div className="flex flex-wrap gap-6">
          <div className="grid justify-items-center gap-3"><Avatar aria-label="Filled avatar / Avatar con relleno"><AvatarFallback>AB</AvatarFallback></Avatar><span className="text-xs text-foreground">filled</span></div>
          <div className="grid justify-items-center gap-3"><Avatar variant="outline" aria-label="Outline avatar / Avatar sin relleno"><AvatarFallback>AB</AvatarFallback></Avatar><span className="text-xs text-foreground">outline</span></div>
        </div>
      </section>
      <section className="grid gap-4" aria-label="Avatar group / Grupo">
        <p className="bl-type-small text-muted-foreground">AVATAR GROUP / GRUPO</p>
        <AvatarGroup aria-label="Ana, Cris, Eli and three more people"><Avatar><AvatarFallback>A</AvatarFallback></Avatar><Avatar tone="purple"><AvatarFallback>B</AvatarFallback></Avatar><Avatar tone="teal"><AvatarFallback>C</AvatarFallback></Avatar><AvatarGroupCount>+3</AvatarGroupCount></AvatarGroup>
      </section>
      <section className="grid gap-4 border-t border-ink/20 pt-6" aria-label="Image and fallback / Imagen y alternativa">
        <p className="bl-type-small text-muted-foreground">IMAGE & FALLBACK / IMAGEN Y ALTERNATIVA</p>
        <div className="flex items-center gap-6"><Avatar size="lg"><AvatarImage src="/brutallab-logo.svg" alt="BrutalLab" /><AvatarFallback>BL</AvatarFallback><AvatarBadge aria-label="Online / En línea" className="bg-success" /></Avatar><Avatar tone="purple" aria-label="User / Usuario"><AvatarFallback><UserIcon weight="bold" /></AvatarFallback></Avatar></div>
      </section>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Imagen cargada, iniciales de respaldo, indicador de estado, tamaños 32/40/56px, seis colores y grupo con contador y sombra.
No lleva hover ni acción por defecto. Para abrir un perfil usa un enlace con nombre accesible; no hagas clicable un div.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
size	sm / default / lg	default	32 / 40 / 56px. One 2px outline; AvatarGroupCount displays overflow.
tone	coral \| purple \| teal \| yellow \| blue \| orange	coral	One of the six reference colors. The fallback inherits the surface and text color.
variant	filled \| outline	filled	Filled uses the selected tone. Outline has no color fill and follows the foreground token in both themes.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.

El color es decorativo: identifica a la persona mediante nombre, iniciales o texto alternativo.