Avatar

An image with a graceful fallback, styled entirely with Tailwind utilities.

Basic

Compose BitBhAvatarImage with a BitBhAvatarFallback. The image only shows once it loads.

<BitBhAvatar class="inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-zinc-200 align-middle select-none">
    <BitBhAvatarImage class="h-full w-full rounded-[inherit] object-cover" Src="/colm.jpg" Alt="Colm Tuite" />
    <BitBhAvatarFallback class="flex h-full w-full items-center justify-center bg-zinc-200 text-sm font-semibold text-zinc-700">CT</BitBhAvatarFallback>
</BitBhAvatar>

Fallback (broken image)

On load failure the fallback replaces the broken-image icon. Here the source is intentionally invalid.

@* Broken / missing image → the fallback shows automatically *@
<BitBhAvatar class="inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-zinc-200 align-middle select-none">
    <BitBhAvatarImage class="h-full w-full rounded-[inherit] object-cover" Src="/does-not-exist.jpg" Alt="Jane Doe" />
    <BitBhAvatarFallback class="flex h-full w-full items-center justify-center bg-zinc-200 text-sm font-semibold text-zinc-700">JD</BitBhAvatarFallback>
</BitBhAvatar>

@* Fallback with no image — a generic user icon *@
<BitBhAvatar class="inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-zinc-100 align-middle select-none">
    <BitBhAvatarFallback class="flex h-full w-full items-center justify-center text-zinc-500">
        <svg viewBox="0 0 24 24" width="22" height="22" ...>...</svg>
    </BitBhAvatarFallback>
</BitBhAvatar>

Delayed fallback

DelayMs waits before showing the fallback, avoiding a flash for fast-loading images.

<BitBhAvatar class="inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-zinc-200 align-middle select-none">
    <BitBhAvatarImage class="h-full w-full rounded-[inherit] object-cover" Src="/pedro.jpg" Alt="Pedro Duarte" />
    <BitBhAvatarFallback class="flex h-full w-full items-center justify-center bg-zinc-200 text-sm font-semibold text-zinc-700" DelayMs="600">PD</BitBhAvatarFallback>
</BitBhAvatar>

Sizes and shapes

Size and shape are pure utilities — swap h-*/w-* and the rounding to taste.

AB CD EF

<div class="flex items-center gap-4">
    <BitBhAvatar class="inline-flex h-9 w-9 items-center justify-center overflow-hidden rounded-full bg-zinc-200 align-middle text-xs font-semibold text-zinc-700 select-none">
        <BitBhAvatarImage class="h-full w-full rounded-[inherit] object-cover" Src="/a.jpg" Alt="" />
        <BitBhAvatarFallback class="flex h-full w-full items-center justify-center">AB</BitBhAvatarFallback>
    </BitBhAvatar>

    <BitBhAvatar class="inline-flex h-12 w-12 items-center justify-center overflow-hidden rounded-full bg-zinc-200 align-middle text-sm font-semibold text-zinc-700 select-none">
        <BitBhAvatarImage class="h-full w-full rounded-[inherit] object-cover" Src="/b.jpg" Alt="" />
        <BitBhAvatarFallback class="flex h-full w-full items-center justify-center">CD</BitBhAvatarFallback>
    </BitBhAvatar>

    <BitBhAvatar class="inline-flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl bg-zinc-200 align-middle text-base font-semibold text-zinc-700 select-none">
        <BitBhAvatarImage class="h-full w-full rounded-[inherit] object-cover" Src="/c.jpg" Alt="" />
        <BitBhAvatarFallback class="flex h-full w-full items-center justify-center">EF</BitBhAvatarFallback>
    </BitBhAvatar>
</div>