PrimitiveAvailable

Avatar

Circular identity in three sizes, with filled or transparent outline variants, image fallback, status and stacked groups.

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…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

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

Usage

Import the component into your project and keep the source code under your 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>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Loaded image, fallback initials, status indicator, 32/40/56px sizes, six colors and a shadowed group count.
No hover or action by default. To open a profile use a named link, not a clickable div.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
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.

Accessibility

Rules that should remain intact when adapting the component to a product.

Give meaningful images alt text. Provide a textual name nearby when initials alone are ambiguous.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.

Color is decorative: identify the person with a name, initials or alternative text.