Avatar with Status — Online Presence Dot Snippet

An avatar with a status indicator is one of the most-searched UI snippets because every chat, team, dashboard, and collaboration app needs to show whether a person is online, away, busy, or offline at a glance — stack several into an avatar group or list them in a team presence list. This snippet is a complete presence avatar set: a circular avatar (photo or initials fallback, as on the profile card), a color-coded status dot in the corner, a pulsing ring for the online state, and a distinct shape for "busy" — all done with pure CSS so the status is driven entirely by a single class.

Positioning the status dot correctly

The status dot is an absolutely positioned .dot element pinned to the bottom-right of the avatar (right: 1px; bottom: 1px). The detail that makes it look professional is the border: border: 3px solid #0f172a where that color matches the page background. This creates a "cut-out" effect — the dot appears to punch a hole through the avatar's edge rather than sitting on top of it, which is exactly how Slack, Discord, and Teams render presence dots. If you place an avatar on a different background, you change the dot's border color to match that surface. The avatar uses overflow: visible so the dot (and its pulse) can extend slightly past the circular edge.

Color-coding the four states

Presence is communicated by both position and color. A single class on the avatar (.online, .away, .busy, .offline) sets the dot color: green for online, amber for away, red for busy, gray for offline. These are the conventional presence colors users already recognize, so the meaning is instant. Because the state is a class, changing someone's status in code is one line — el.className = 'avatar ' + status — which maps perfectly to a real app where presence comes from a websocket or polling.

The pulsing online ring

To make "online" feel alive, the online dot has an ::after pseudo-element — a green ring that scales up and fades out on a 1.8s loop (@keyframes pulse). It starts small and slightly transparent, then expands to 1.8× and fades to zero, like a radar ping or a heartbeat. This subtle animation draws the eye to active users without being distracting, and because it only animates transform and opacity, it is GPU-cheap even with many avatars on screen. Only the online state pulses; the others are static, which reinforces that online means "active right now."

Not relying on color alone (the busy shape)

Color-only status indicators fail for color-blind users — red (busy) and green (online) are the classic confusable pair. This snippet addresses that for the most critical distinction by giving "busy" a different *shape*: its dot shows a white horizontal bar (a "do not disturb" minus), so busy is distinguishable from online by form, not just hue. This is a small but meaningful accessibility improvement; you could extend the same idea with a clock glyph for away and a hollow ring for offline so every state is identifiable without color.

The initials fallback

Not every user has a photo, so the fourth avatar demonstrates an initials fallback: instead of an <img>, it shows centered initials ("SK") on a neutral background. This is the standard graceful degradation for missing avatars and is handled purely with markup and CSS — no broken image icon, no layout shift. In a real app you would render initials when there is no avatarUrl, often with a background color derived from the user's name so each person gets a consistent, distinct color.

Accessibility

Each avatar is wrapped in a role="img" element with an aria-label that includes both the name and the status ("Maya — online"), so screen readers announce the person and their presence together. The <img> has an empty alt because the labeled wrapper already provides the accessible name (avoiding a double announcement). This is the correct pattern for an image-plus-status composite: label the whole unit, not just the photo. Combined with the busy shape distinction, the component conveys status to users who cannot perceive the colors.

Customizing the avatars

Resize by changing the avatar width/height and scaling the dot proportionally (keep the dot roughly a quarter of the avatar size). Re-theme the status colors to your brand while keeping them conventional enough to be understood. Change the dot border color to match whatever background the avatar sits on. To stack avatars into a group, overlap them with negative margins and a background-colored ring on each. To add a tooltip with the full status text on hover, wrap the name/status in a title attribute or a CSS tooltip. The whole component is class-driven, so wiring it to live presence data is just updating the avatar's class.