Avatar

wu-avatar shows initials or an <img> in a circle. Initials scale with the size. Label the avatar: aria-label on initials, alt on the image, status included.

Class, attribute or variable	Effect
`wu-avatar`	Root. 2.5rem circle, gray subtle background
`sm`, `lg`	2rem and 3rem
`tile`	Rounded square for company and product logos
`gray`, `red`, `blue`, `green`, `yellow`, `purple`, `pink`	Hue background and text
`data-status`	`online`, `away`, `busy` or `offline` marker
`--wu-avatar--Size`	Size for every variant; the initials follow
`--wu-avatar--RingColor`	Ring around the status marker, `bg-surface` by default

Initials

<span class="wu-avatar" role="img" aria-label="Ana Lopez">AL</span>

Image

<span class="wu-avatar"><img src="https://wovenui.com/images/logo.svg" alt="WovenUI"></span>

Sizes

AL AL AL AL

<div class="flex x-center gap-3">
  <span class="wu-avatar sm" role="img" aria-label="Ana Lopez">AL</span>
  <span class="wu-avatar" role="img" aria-label="Ana Lopez">AL</span>
  <span class="wu-avatar lg" role="img" aria-label="Ana Lopez">AL</span>
  <span class="wu-avatar" style="--wu-avatar--Size: 4rem" role="img" aria-label="Ana Lopez">AL</span>
</div>

Square and svg

tile rounds the corners instead of making a circle. A direct child svg is sized to part of the avatar and takes the text color.

<div class="flex wrap x-center gap-3">
  <span class="wu-avatar tile" role="img" aria-label="Acme">AC</span>
  <span class="wu-avatar tile lg"><img src="https://wovenui.com/images/logo.svg" alt="WovenUI"></span>
  <span class="wu-avatar blue" role="img" aria-label="New member"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></span>
  <span class="wu-avatar green" role="img" aria-label="Filled"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7.25 2h1.5v5.25H14v1.5H8.75V14h-1.5V8.75H2v-1.5h5.25z"/></svg></span>
</div>

Hues

GR RD BO NH YA CW PI

<div class="flex wrap x-center gap-2">
  <span class="wu-avatar gray" role="img" aria-label="Gita Rao">GR</span>
  <span class="wu-avatar red" role="img" aria-label="Rosa Diaz">RD</span>
  <span class="wu-avatar blue" role="img" aria-label="Ben Okafor">BO</span>
  <span class="wu-avatar green" role="img" aria-label="Nina Holm">NH</span>
  <span class="wu-avatar yellow" role="img" aria-label="Yusuf Ali">YA</span>
  <span class="wu-avatar purple" role="img" aria-label="Chen Wei">CW</span>
  <span class="wu-avatar pink" role="img" aria-label="Priya Iyer">PI</span>
</div>

Status

Each state has its own shape, not only a color: online is a solid dot, away is half filled, busy has a bar, offline is a hollow ring. Put the status in the label too.

AL BO CW DK

<div class="flex wrap x-center gap-4">
  <span class="wu-avatar blue" data-status="online" role="img" aria-label="Ana Lopez, online">AL</span>
  <span class="wu-avatar green" data-status="away" role="img" aria-label="Ben Okafor, away">BO</span>
  <span class="wu-avatar purple" data-status="busy" role="img" aria-label="Chen Wei, busy">CW</span>
  <span class="wu-avatar" data-status="offline" role="img" aria-label="Dana Kim, offline">DK</span>
</div>

Ring color

The status ring matches bg-surface by default. On another background, set --wu-avatar--RingColor to that background.

<div class="bg-alternate p-4 rounded-md" style="--wu-avatar--RingColor: var(--wu-bg-alternate)">
  <span class="wu-avatar blue" data-status="online" role="img" aria-label="Ana Lopez, online">AL</span>
</div>

Right to left

The status marker sits at the inline end, and the half fill of the away marker flips with the direction.

أ ب ت د

<div dir="rtl" class="flex wrap x-center gap-4">
  <span class="wu-avatar blue" data-status="online" role="img" aria-label="أنا، متصل">أ</span>
  <span class="wu-avatar green" data-status="away" role="img" aria-label="بن، بعيد">ب</span>
  <span class="wu-avatar purple" data-status="busy" role="img" aria-label="تشن، مشغول">ت</span>
  <span class="wu-avatar" data-status="offline" role="img" aria-label="دانا، غير متصل">د</span>
</div>

Load only the avatar

@use "@wovenui/components/avatar";

The avatar needs no other component.