注目新着
アバター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…
An avatar with a presence dot - online, away or offline - that says its status in words as well as colour.
<!--
The dot is colour, and colour alone is not information - a green and a grey
dot are the same dot to plenty of eyes. The sr-only text inside the dot is
the accessible half of the indicator; the ring around it is what separates
the dot from the avatar's own pixels.
-->
<span class="avatar-presence">
<span class="avatar-presence__face" role="img" aria-label="Priya Patel">
<span aria-hidden="true">PP</span>
</span>
<span class="avatar-presence__dot avatar-presence__dot--online">
<span class="sr-only">Online</span>
</span>
</span>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
name必須 | string | - | 見出しとして表示されるプラン名。 |
status | 'online' | 'away' | 'offline' | 'offline' | Status |
className | string | - | ルート要素にマージされる追加クラス。 |
Colour alone is not information: a green and a grey dot are the same dot to plenty of eyes, so the `sr-only` text inside the dot is the accessible half of the indicator, and dot colour and label live in one `STATUS` record precisely so they cannot drift apart - a dot whose text says "Away" under green is worse than no dot. The `ring-2` around the dot must match the page surface (`ring-white dark:ring-gray-950`); it is what cuts the dot out of the avatar’s own pixels, so if your avatars sit on a card, retune the ring to the card colour. If presence updates live, consider announcing changes with a polite live region at the list level rather than per avatar - fifty dots flipping at once should not produce fifty announcements.