Story Ring Avatar

प्रीव्यू

कोड

<!--
  Three nested circles: gradient ring, page-colour gap, face. The gap is a
  padded span in the page background - a transparent border would let the
  gradient bleed through to the avatar's edge and the ring stops reading as a
  ring. "Unseen" is a colour difference only, so the state also rides the
  aria-label in words.
-->
<span class="inline-flex shrink-0 rounded-full bg-gradient-to-tr from-amber-400 via-rose-500 to-fuchsia-600 p-[2px]">
  <span class="rounded-full bg-white p-[2px] dark:bg-gray-950">
    <span
      role="img"
      aria-label="Noor Haddad, new story"
      class="flex h-12 w-12 select-none items-center justify-center rounded-full bg-gradient-to-br from-sky-500 to-indigo-600 text-sm font-semibold text-white"
    >
      <span aria-hidden="true">NH</span>
    </span>
  </span>
</span>

प्रॉपर्टीज़

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

The construction is three nested circles: gradient ring, page-colour gap, face - and the gap is the part people skip. It is a padded span painted in the page background (`bg-white dark:bg-gray-950`), because a transparent border would let the gradient bleed to the avatar’s edge and the ring stops reading as a ring; on a non-page surface, repaint the gap to match. Ring thickness is the two `p-[2px]` values - scale them together with the avatar. Unseen-versus-seen is a colour difference only, so the state also rides the `aria-label` in words ("new story"); keep that in sync if you rename states. This renders as a `span` on purpose - stories are usually tappable, so wrap it in your own `<button>` or link with a real focus ring rather than baking a click handler into the display component.

विवरण

लेखक

ADYSRE

वर्ज़न

1.0.0

बनाया गया

2026-07-17

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

2026-07-17

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