Skip to content
Praesepe UI

data-display

Avatar

User and customer avatars with image error fallback to initials or icon, status dots, and overlapping group stacks.

Copied!

Examples

Customer avatars

Initials fallback and status indicators for SME staff.

Copied!
SR BS AL 
<div class="flex items-center gap-4">
    <x-ui.avatar name="Siti Rahma" status="online" />
    <x-ui.avatar name="Budi Santoso" status="busy" />
    <x-ui.avatar name="Ayu Lestari" status="offline" />
</div>

<div class="flex items-center gap-4">
    <span class="relative inline-flex">
        <span class="inline-flex size-10 items-center justify-center rounded-full bg-surface-sunken text-sm font-medium text-fg ring-2 ring-surface" role="img" aria-label="Siti Rahma">SR</span>
        <span class="absolute right-0 bottom-0 size-2.5 rounded-full bg-success ring-2 ring-surface" title="online"></span>
    </span>
    <span class="relative inline-flex">
        <span class="inline-flex size-10 items-center justify-center rounded-full bg-surface-sunken text-sm font-medium text-fg ring-2 ring-surface" role="img" aria-label="Budi Santoso">BS</span>
        <span class="absolute right-0 bottom-0 size-2.5 rounded-full bg-warning ring-2 ring-surface" title="busy"></span>
    </span>
    <span class="relative inline-flex">
        <span class="inline-flex size-10 items-center justify-center rounded-full bg-surface-sunken text-sm font-medium text-fg ring-2 ring-surface" role="img" aria-label="Ayu Lestari">AL</span>
        <span class="absolute right-0 bottom-0 size-2.5 rounded-full bg-fg-subtle ring-2 ring-surface" title="offline"></span>
    </span>
</div>

Sizes

xs through xl density scale.

Copied!
XD SD MD LD XD 
<div class="flex items-end gap-3">
    <x-ui.avatar size="xs" name="XS Demo" />
    <x-ui.avatar size="sm" name="SM Demo" />
    <x-ui.avatar size="md" name="MD Demo" />
    <x-ui.avatar size="lg" name="LG Demo" />
    <x-ui.avatar size="xl" name="XL Demo" />
</div>

<div class="flex items-end gap-3">
    <span class="inline-flex size-6 items-center justify-center rounded-full bg-surface-sunken text-[10px] font-medium ring-2 ring-surface">XS</span>
    <span class="inline-flex size-8 items-center justify-center rounded-full bg-surface-sunken text-xs font-medium ring-2 ring-surface">SM</span>
    <span class="inline-flex size-10 items-center justify-center rounded-full bg-surface-sunken text-sm font-medium ring-2 ring-surface">MD</span>
    <span class="inline-flex size-12 items-center justify-center rounded-full bg-surface-sunken text-base font-medium ring-2 ring-surface">LG</span>
    <span class="inline-flex size-16 items-center justify-center rounded-full bg-surface-sunken text-lg font-medium ring-2 ring-surface">XL</span>
</div>

Avatar group

Overlapping stack with +N overflow for assigned agents.

Copied!
SR BS AL +3 
<x-ui.avatar.group>
    <x-ui.avatar name="Siti Rahma" class="z-[1]" />
    <x-ui.avatar name="Budi Santoso" class="z-[2]" />
    <x-ui.avatar name="Ayu Lestari" class="z-[3]" />
    <x-slot:overflow>+3</x-slot:overflow>
</x-ui.avatar.group>

<div class="flex items-center -space-x-2">
    <span class="relative z-[1] inline-flex size-10 items-center justify-center rounded-full bg-surface-sunken text-sm font-medium ring-2 ring-surface">SR</span>
    <span class="relative z-[2] inline-flex size-10 items-center justify-center rounded-full bg-surface-sunken text-sm font-medium ring-2 ring-surface">BS</span>
    <span class="relative z-[3] inline-flex size-10 items-center justify-center rounded-full bg-surface-sunken text-sm font-medium ring-2 ring-surface">AL</span>
    <span class="relative z-[4] inline-flex size-10 items-center justify-center rounded-full bg-surface-sunken text-xs font-medium ring-2 ring-surface">+3</span>
</div>

Props API

Component props
Prop Type Default Description
src string|null null Image URL. On error, Alpine shows initials or the fallback icon.
name string|null null Used to build initials and accessible labels.
size xs|sm|md|lg|xl md Avatar diameter and type scale.
status online|busy|offline|null null Optional presence indicator dot.
group.overflow slot null Overflow counter content such as +3 for avatar groups.

Accessibility notes

Architected with WCAG 2.2 AA patterns in mind. These notes document the exact keyboard and ARIA behavior for this component.

  • When name or alt is provided, the avatar uses role="img" with an accessible label.
  • Broken images are swapped to initials or a decorative user icon via Alpine x-on:error without leaving an empty broken image.
  • Status dots include a text label/title (online, busy, offline). Do not rely on color alone.

Built by Praesepe

Architecture & custom software partner

Praesepe uses these exact UI primitives to ship SME dashboards, inventory systems, invoicing desks, and internal tools faster, without rebuilding a design system for every client.

  • Same Blade + Tailwind 4 + Alpine 3 stack you see in this docs site
  • Opinionated for Indonesian SME ops: invoices, stock, roles, approvals
  • Architected with WCAG 2.2 AA patterns in mind for keyboard and ARIA

Talk to the studio

WhatsApp: TODO Email the studio Visit Praesepe