Badge/status indicator

Quick implementation

.status-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot--online {
  background: oklch(0.72 0.2 145);
  box-shadow: 0 0 6px oklch(0.72 0.2 145 / 0.5);
}

.status-dot--away {
  background: oklch(0.78 0.18 85);
}

.status-dot--busy {
  background: oklch(0.63 0.24 25);
}

.status-dot--offline {
  background: oklch(0.5 0.02 260);
}

Prompt this to your LLM

Includes role, constraints, and edge cases to handle.

You are a senior frontend engineer building a user presence component.

Goal: Colored status indicator dots — online (green), away (yellow), busy (red), offline (gray).

Technical constraints:
- Use oklch() for all colors to ensure perceptual uniformity.
- The dot should be a small circle (10px / 0.625rem) with border-radius: 50%.
- Add a subtle glow (box-shadow) to the online state for emphasis.
- Mark the dot aria-hidden="true" since the text label conveys the state.
- Use flex-shrink: 0 to prevent the dot from shrinking in flex layouts.

Accessibility:
- Color alone must not convey meaning — always pair dots with text labels.
- Ensure sufficient contrast between dot colors and the background.
- Use aria-hidden on the decorative dot element.

Why this matters in 2026

Status indicators are everywhere — chat apps, project boards, dashboards. A colored dot next to a name instantly communicates availability. Using oklch() ensures the green, yellow, red, and gray dots have consistent perceived brightness despite different hues. The subtle glow on "online" draws attention to active users without being distracting.

The logic

Each dot is a tiny element with border-radius: 50% to make it circular. The oklch() color space lets you set consistent lightness across different hues — the green and red dots appear equally vivid because they share similar lightness and chroma values. The box-shadow on the online state uses a semi-transparent version of the same color to create a soft glow effect.

Accessibility & performance

Color-blind users may not distinguish green from red, so always pair the dot with a text label (Online, Away, Busy, Offline). The dot is marked aria-hidden="true" because it's purely decorative — the adjacent text communicates the state. flex-shrink: 0 prevents the dot from collapsing when its flex container runs out of space.