Components / Display & Media / Avatar

Avatar beta

Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.

Preview

SK SK SK SK

ARMTJO+3

<div style="display:flex;gap:22px;align-items:center;flex-wrap:wrap">
  <div style="display:flex;gap:8px;align-items:center">
    <span class="k-avatar" data-size="sm">SK</span>
    <span class="k-avatar">SK</span>
    <span class="k-avatar" data-size="lg">SK</span>
    <span class="k-avatar" data-size="lg" data-status aria-label="Shogo Kajiyama, online">SK</span>
  </div>
  <span class="k-avatars">
    <span class="k-avatar">AR</span><span class="k-avatar">MT</span><span class="k-avatar">JO</span><span class="k-avatar">+3</span>
  </span>
</div>

/* KATA Avatar */
.k-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--k-zinc-200);color:var(--k-ink-2);font-size:11.5px;font-weight:600;letter-spacing:.02em;overflow:hidden;flex:none;user-select:none}
.k-avatar img{width:100%;height:100%;object-fit:cover}
.k-avatar[data-size="sm"]{width:24px;height:24px;font-size:9.5px}
.k-avatar[data-size="lg"]{width:40px;height:40px;font-size:14px}
.k-avatar[data-status]::after{content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%;background:var(--k-success);border:2px solid var(--k-bg)}
.k-avatars{display:inline-flex}
.k-avatars .k-avatar{border:2px solid var(--k-bg)}
.k-avatars .k-avatar + .k-avatar{margin-left:-9px}

Usage

Initials are the default — they never 404. Use the group for teams; cap it at 4 faces plus a count chip.

Accessibility

Decorative avatars are aria-hidden; meaningful ones carry the person's name as alt text or aria-label.

Toast

Bar Chart