Back to CSS Tags & Chips Status Pulse Pure CSS
Share
.ctc-status { display: flex; flex-wrap: wrap; gap: 8px; }

.ctc-status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; font: 600 11px/1 system-ui, sans-serif; border: 1px solid; }

.ctc-status-dot { width: 7px; height: 7px; border-radius: 50%; position: relative; }

.ctc-status-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ctc-status-ping 1.6s ease-out infinite; }

.ctc-status-live { background: rgba(46,204,138,0.12); color: #2ecc8a; border-color: rgba(46,204,138,0.35); }

.ctc-status-live .ctc-status-dot { background: #2ecc8a; }

.ctc-status-warn { background: rgba(245,168,74,0.12); color: #f5a84a; border-color: rgba(245,168,74,0.35); }

.ctc-status-warn .ctc-status-dot { background: #f5a84a; }

.ctc-status-err  { background: rgba(255,61,110,0.12); color: #ff6c8a; border-color: rgba(255,61,110,0.35); }

.ctc-status-err  .ctc-status-dot { background: #ff3d6e; }

.ctc-status-info { background: rgba(96,165,250,0.12); color: #60a5fa; border-color: rgba(96,165,250,0.35); }

.ctc-status-info .ctc-status-dot { background: #60a5fa; }

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover, .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track, .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"], .ctc-life-chip[data-state="adding"] .ctc-life-icon { animation: none !important; }
  .ctc-life-chip[data-state="adding"] { transform: none; opacity: 1; }
}
<div class="ctc-status">
  <span class="ctc-status-chip ctc-status-live">
    <span class="ctc-status-dot" aria-hidden="true"></span>Live
  </span>
  <span class="ctc-status-chip ctc-status-warn">
    <span class="ctc-status-dot" aria-hidden="true"></span>Degraded
  </span>
  <span class="ctc-status-chip ctc-status-err">
    <span class="ctc-status-dot" aria-hidden="true"></span>Down
  </span>
  <span class="ctc-status-chip ctc-status-info">
    <span class="ctc-status-dot" aria-hidden="true"></span>Maintenance
  </span>
</div>
Live preview Edit any tab — preview updates live Ready