Status Pill — Free Online Away Busy Presence JS Snippet

<div class="sp-card">
  <button type="button" class="sp-pill" id="spPill" aria-haspopup="listbox" aria-expanded="false">
    <span class="sp-dot" id="spDot"></span>
    <span class="sp-label" id="spLabel">Online</span>
    <svg class="sp-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
  </button>
  <ul class="sp-menu" id="spMenu" role="listbox" tabindex="-1"></ul>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:60px 18px}

.sp-card{position:relative;width:100%;max-width:220px}

.sp-pill{display:flex;align-items:center;gap:9px;width:100%;background:#1e293b;border:1px solid #334155;border-radius:999px;padding:9px 14px;cursor:pointer;font-family:inherit;color:#e2e8f0;transition:border-color .15s}
.sp-pill:hover{border-color:#475569}
.sp-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--c,#22c55e);position:relative}
.sp-dot.pulse::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--c,#22c55e);animation:spPulse 1.6s ease-out infinite}
@keyframes spPulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.sp-label{flex:1;text-align:left;font-size:13.5px;font-weight:700}
.sp-caret{width:15px;height:15px;color:#64748b;transition:transform .2s}
.sp-pill[aria-expanded=true] .sp-caret{transform:rotate(180deg)}

.sp-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;list-style:none;background:#1e293b;border:1px solid #334155;border-radius:12px;padding:6px;box-shadow:0 16px 40px -16px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:10}
.sp-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.sp-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600}
.sp-opt:hover,.sp-opt.active{background:#334155}
.sp-opt .sp-dot{cursor:pointer}
.sp-opt .sp-sub{margin-left:auto;font-size:10.5px;color:#94a3b8;font-weight:600}

var STATES = [
  { id: 'online',  label: 'Online',       color: '#22c55e', sub: 'Active',  pulse: true },
  { id: 'away',    label: 'Away',         color: '#f59e0b', sub: 'Idle',    pulse: false },
  { id: 'busy',    label: 'Do not disturb', color: '#ef4444', sub: 'Muted', pulse: false },
  { id: 'offline', label: 'Offline',      color: '#64748b', sub: 'Invisible', pulse: false }
];

var pill = document.getElementById('spPill');
var menu = document.getElementById('spMenu');
var dot = document.getElementById('spDot');
var label = document.getElementById('spLabel');
var current = 'online';

function buildMenu() {
  menu.innerHTML = '';
  STATES.forEach(function (s) {
    var li = document.createElement('li');
    li.className = 'sp-opt' + (s.id === current ? ' active' : '');
    li.setAttribute('role', 'option');
    li.setAttribute('aria-selected', s.id === current ? 'true' : 'false');
    li.innerHTML = '<span class="sp-dot" style="--c:' + s.color + '"></span>' +
      '<span>' + s.label + '</span><span class="sp-sub">' + s.sub + '</span>';
    li.addEventListener('click', function () { select(s.id); close(); });
    menu.appendChild(li);
  });
}

function paint() {
  var s = STATES.filter(function (x) { return x.id === current; })[0];
  dot.style.setProperty('--c', s.color);
  dot.classList.toggle('pulse', s.pulse);
  label.textContent = s.label;
}

function select(id) { current = id; paint(); buildMenu(); }

var open = false;
function toggle() { open ? close() : openMenu(); }
function openMenu() { open = true; menu.classList.add('open'); pill.setAttribute('aria-expanded', 'true'); }
function close() { open = false; menu.classList.remove('open'); pill.setAttribute('aria-expanded', 'false'); }

pill.addEventListener('click', function (e) { e.stopPropagation(); toggle(); });
document.addEventListener('click', function () { if (open) close(); });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && open) close(); });

buildMenu();
paint();