Avatar with Status Dot

प्रीव्यू

कोड

<!--
  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>

प्रॉपर्टीज़

कस्टमाइज़ेशन

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.

विवरण

लेखक

ADYSRE

वर्ज़न

1.0.0

बनाया गया

2026-07-17

अपडेट किया गया

2026-07-17

संबंधित कंपोनेंट