注目新着
アバターInitials Avatar
Initials on a colour computed from the name - the same person gets the same colour on every page, with no image involved.
#avatar#initials#fallback
4 個のフレームワーク中級
Loading…
Overlapping avatars with a +N chip for the remainder - the classic "who’s on this" cluster.
<!--
-space-x-2 does the overlap; ring-2 in the page colour cuts each face out of
the one beneath it - without the ring the stack is one blurry blob. The +N
chip is the honest end of the line: it renders the true remainder, and its
sr-only text says so in words.
-->
<div role="group" aria-label="6 people" class="flex items-center -space-x-2">
<span role="img" aria-label="Ada Lovelace" class="inline-flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-blue-600 text-sm font-semibold text-white ring-2 ring-white dark:ring-gray-950"><span aria-hidden="true">AL</span></span>
<span role="img" aria-label="Grace Hopper" class="inline-flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-emerald-600 text-sm font-semibold text-white ring-2 ring-white dark:ring-gray-950"><span aria-hidden="true">GH</span></span>
<span role="img" aria-label="Alan Turing" class="inline-flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-violet-600 text-sm font-semibold text-white ring-2 ring-white dark:ring-gray-950"><span aria-hidden="true">AT</span></span>
<span role="img" aria-label="Katherine Johnson" class="inline-flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-rose-600 text-sm font-semibold text-white ring-2 ring-white dark:ring-gray-950"><span aria-hidden="true">KJ</span></span>
<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100 text-xs font-semibold text-gray-600 ring-2 ring-white dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-950">
<span aria-hidden="true">+2</span>
<span class="sr-only">2 more people</span>
</span>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
names必須 | string[] | - | Names |
max | number | 4 | Max |
className | string | - | ルート要素にマージされる追加クラス。 |
The `ring-2` is structural, not decorative: it renders in the page colour and is what cuts each face out of the one beneath - remove it and the overlap collapses into one blurry blob. That also means it must match the surface: on a gray-50 card, retune both `ring-white` and the dark variant or every avatar grows a visible halo. `-space-x-2` sets the overlap depth; deeper than `-space-x-3` at 40px and the initials start being eaten. The group is one announced unit (`role="group"` with a people count) and the +N chip renders the honest remainder with `sr-only` words. Keys are the names themselves, which assumes names are unique within one stack - pass IDs and key on those if yours are not. If the stack should expand on click, wrap it in a button and reuse the `aria-expanded` pattern from `avatar-menu-trigger`.