Avatar

An image element with a graceful fallback for representing a user or entity.

Basic

Compose BitBhAvatarImage with a BitBhAvatarFallback inside BitBhAvatar. The image is only shown once it loads successfully — until then the fallback initials are displayed.

<BitBhAvatar class="avatar">
    <BitBhAvatarImage class="avatar-image" Src="/colm.jpg" Alt="Colm Tuite" />
    <BitBhAvatarFallback class="avatar-fallback">CT</BitBhAvatarFallback>
</BitBhAvatar>

/* The library ships zero CSS — these styles are consumer-authored. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    user-select: none;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background: #e4e4e7;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3f3f46;
    background: #e4e4e7;
}

Fallback (broken image)

When the image fails to load (or no Src is given), the fallback is shown instead of a broken-image icon. Here the source is intentionally invalid.

@* Broken / missing image → the fallback shows automatically *@
<BitBhAvatar class="avatar">
    <BitBhAvatarImage class="avatar-image" Src="/does-not-exist.jpg" Alt="Jane Doe" />
    <BitBhAvatarFallback class="avatar-fallback">JD</BitBhAvatarFallback>
</BitBhAvatar>

@* Fallback with no image at all — e.g. a generic user icon *@
<BitBhAvatar class="avatar">
    <BitBhAvatarFallback class="avatar-fallback avatar-fallback-icon">
        <svg viewBox="0 0 24 24" width="22" height="22" ...>...</svg>
    </BitBhAvatarFallback>
</BitBhAvatar>

/* The library ships zero CSS — these styles are consumer-authored. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    user-select: none;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background: #e4e4e7;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3f3f46;
    background: #e4e4e7;
}

/* A muted icon-style fallback for when there is no image at all */
.avatar-fallback-icon {
    color: #71717a;
    background: #f4f4f5;
}

Delayed fallback

Set DelayMs on the fallback to wait before showing it. This avoids a flash of initials for images that load quickly. The fallback only appears if the image hasn't loaded by the time the delay elapses.

<BitBhAvatar class="avatar">
    <BitBhAvatarImage class="avatar-image" Src="/pedro.jpg" Alt="Pedro Duarte" />
    <BitBhAvatarFallback class="avatar-fallback" DelayMs="600">PD</BitBhAvatarFallback>
</BitBhAvatar>

/* The library ships zero CSS — these styles are consumer-authored. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    user-select: none;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background: #e4e4e7;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3f3f46;
    background: #e4e4e7;
}

Sizes and shapes

The library ships zero styling, so size and shape are entirely up to your CSS. Override class per avatar for circles, squares, or stacked groups.

AB CD EF

<div class="avatar-row">
    <BitBhAvatar class="avatar avatar-sm">
        <BitBhAvatarImage class="avatar-image" Src="/a.jpg" Alt="" />
        <BitBhAvatarFallback class="avatar-fallback">AB</BitBhAvatarFallback>
    </BitBhAvatar>

    <BitBhAvatar class="avatar">
        <BitBhAvatarImage class="avatar-image" Src="/b.jpg" Alt="" />
        <BitBhAvatarFallback class="avatar-fallback">CD</BitBhAvatarFallback>
    </BitBhAvatar>

    <BitBhAvatar class="avatar avatar-lg avatar-square">
        <BitBhAvatarImage class="avatar-image" Src="/c.jpg" Alt="" />
        <BitBhAvatarFallback class="avatar-fallback">EF</BitBhAvatarFallback>
    </BitBhAvatar>
</div>

/* The library ships zero CSS — these styles are consumer-authored. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    user-select: none;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background: #e4e4e7;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3f3f46;
    background: #e4e4e7;
}

/* Lay the avatars out in a row; modifiers tweak size and shape */
.avatar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.avatar-sm { width: 2.25rem; height: 2.25rem; font-size: 0.8rem; }
.avatar-lg { width: 4rem;    height: 4rem;    font-size: 1.1rem; }

.avatar-square { border-radius: 0.6rem; }