CSS-Only

Indicator

Minimal status indicators for showing presence, state, or live activity. Works by default, enhances with data attributes. Pure CSS, no JavaScript required.

Example

Default Online Away Offline Busy 
<span class="omni-status"></span> Default
<span class="omni-status" data-variant="success"></span> Online
<span class="omni-status" data-variant="warning"></span> Away
<span class="omni-status" data-variant="danger"></span> Offline
<span class="omni-status" data-variant="info"></span> Busy

Variants

Status Dots

Use data-variant to convey status meaning through color. Always pair with visible text labels:

Default Success Warning Danger Info 
<span class="demo-indicator-label">
  <span class="omni-status" data-variant="success"></span>
  Success
</span>

Badge Style

Use data-style="badge" to show status as a labeled pill with text:

ACTIVE PENDING ERROR BETA 
<span class="omni-status" data-variant="success" data-style="badge">ACTIVE</span>
<span class="omni-status" data-variant="warning" data-style="badge">PENDING</span>
<span class="omni-status" data-variant="danger" data-style="badge">ERROR</span>

Pulse Animation

Use data-animation="pulse" for live status indicators. Respects prefers-reduced-motion:

Live Recording Syncing 
<span class="omni-status" data-variant="success" data-animation="pulse"></span> Live

Badge with Pulse

LIVE RECORDING

Real-World Examples

User Presence on Avatar

Common pattern for showing online/offline/away status on user avatars:

AJ
BS
CW 
<div style="position: relative; width: 3rem; height: 3rem;">
  AJ
  <span class="omni-status"
        data-variant="success"
        data-animation="pulse"
        style="position: absolute; bottom: 0; right: 0; border: 2px solid var(--omni-color-background);"></span>
</div>

Notification Badge on Icon

Show status indicators on notification bells, message icons, etc.:

<div style="position: relative;">
  <svg>...</svg>
  <span class="omni-status"
        data-variant="danger"
        data-animation="pulse"
        style="position: absolute; top: -0.25rem; right: -0.25rem;"></span>
</div>

Service Status Table

Service Status Uptime
API Gateway OPERATIONAL 99.99%
Database OPERATIONAL 99.95%
CDN DEGRADED 98.50%
Email Service OUTAGE 95.20%

API Reference

Attribute Values Default Description
data-variant success, warning, danger, info — Status color variant (omit for neutral)
data-style badge — Pill with text instead of dot
data-animation pulse — Pulsing animation for live status

CSS Custom Properties

The indicator inherits colors from the variant system:

--omni-variant-bg      /* Background color for dot */
--omni-variant-text    /* Text color for badge style */

Accessibility

  • Status indicators must always be paired with visible text labels
  • Color alone cannot convey meaning (WCAG 1.4.1 Use of Color)
  • Pulse animation respects prefers-reduced-motion: reduce
  • Sufficient color contrast in all semantic variants
  • Works without JavaScript (pure CSS)
  • Badge style includes text label within the indicator itself

Components Used

Other OmniUI components demonstrated on this page:

Table