Avatar
A user image with a text fallback.

import { BuiAvatar } from 'ng-blatui';
<bui-avatar src="/shadcn.png" alt="@shadcn">CN</bui-avatar>Fallback
<bui-avatar>JD</bui-avatar>Sizes




<bui-avatar class="size-6" src="/u.png" alt="">CN</bui-avatar>
<bui-avatar class="size-8" src="/u.png" alt="">CN</bui-avatar>
<bui-avatar src="/u.png" alt="">CN</bui-avatar>
<bui-avatar class="size-12" src="/u.png" alt="">CN</bui-avatar>Rounded


<bui-avatar class="rounded-lg" src="/u.png" alt="">CN</bui-avatar>Ring


<bui-avatar class="ring-ring ring-offset-background size-10 ring-2 ring-offset-2" src="/u.png" alt="">CN</bui-avatar>Group



<div class="flex -space-x-2 *:ring-2 *:ring-background">
<bui-avatar src="/a.png" alt="">CN</bui-avatar>
<bui-avatar src="/b.png" alt="">LR</bui-avatar>
<bui-avatar>+3</bui-avatar>
</div>Status

<div class="relative inline-flex">
<bui-avatar class="size-10" src="/u.png" alt="">CN</bui-avatar>
<span class="border-background absolute end-0 bottom-0 size-3 rounded-full border-2 bg-green-600" aria-label="Online"></span>
</div>Badge

<div class="relative inline-flex">
<bui-avatar class="size-10" src="/u.png" alt="">CN</bui-avatar>
<span class="bg-primary text-primary-foreground absolute -end-1.5 -top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs">3</span>
</div>Hover group
<!-- overlap, then spread on hover -->
<div class="flex -space-x-3 transition-all hover:space-x-1">
<bui-avatar class="ring-2 ring-background transition-all">JD</bui-avatar>
</div>