Escalation Indicator

Shows that an item requires escalation.

html

<div class="escalation escalation--high escalation--pulsing" role="status">
  <span class="escalation__dot" aria-hidden="true"></span>
  <span class="escalation__label">Escalated to on-call</span>
  <span class="escalation__meta">12m open</span>
</div>
<style>
.escalation { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font: 600 12.5px system-ui, sans-serif; box-sizing: border-box; border: 1.5px solid; }
.escalation__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
.escalation--pulsing .escalation__dot { animation: escalation-pulse .22s ease-in-out infinite; }
}
@keyframes escalation-pulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 4px transparent; opacity: .55; } }
.escalation--low { color: #2F6FA8; background: color-mix(in srgb, #2F6FA8 12%, #FAF7F2); border-color: #2F6FA8; }
.escalation--medium { color: #8A5A08; background: color-mix(in srgb, #8A5A08 12%, #FAF7F2); border-color: #8A5A08; }
.escalation--high { color: #B3541E; background: color-mix(in srgb, #B3541E 14%, #FAF7F2); border-color: #B3541E; }
.escalation--critical { color: #FAF7F2; background: #8C1F17; border-color: #8C1F17; }
.escalation__meta { opacity: .75; font-weight: 500; }
</style>

tailwind

<div role="status" class="escalation-tw escalation-tw--high escalation-tw--pulsing inline-flex items-center gap-2 px-3 py-1.5 rounded-full font-semibold text-[12.5px] box-border border-[1.5px]">
  <span aria-hidden="true" class="escalation-tw__dot w-2 h-2 rounded-full flex-shrink-0" style="background:currentColor"></span>
  <span>Escalated to on-call</span>
  <span class="opacity-75 font-medium">12m open</span>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
.escalation-tw--pulsing .escalation-tw__dot { animation: escalation-tw-pulse .22s ease-in-out infinite; }
}
@keyframes escalation-tw-pulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 4px transparent; opacity: .55; } }
.escalation-tw--low { color: #2F6FA8; background: color-mix(in srgb, #2F6FA8 12%, #FAF7F2); border-color: #2F6FA8; }
.escalation-tw--medium { color: #8A5A08; background: color-mix(in srgb, #8A5A08 12%, #FAF7F2); border-color: #8A5A08; }
.escalation-tw--high { color: #B3541E; background: color-mix(in srgb, #B3541E 14%, #FAF7F2); border-color: #B3541E; }
.escalation-tw--critical { color: #FAF7F2; background: #8C1F17; border-color: #8C1F17; }
</style>

react

export function EscalationIndicator({
  label = "Escalated to on-call",
  level = "high",
  pulsing = true,
  minutesOpen = 12,
}) {
  const palette = {
    low: { color: "#2F6FA8", background: "color-mix(in srgb, #2F6FA8 12%, #FAF7F2)" },
    medium: { color: "#8A5A08", background: "color-mix(in srgb, #8A5A08 12%, #FAF7F2)" },
    high: { color: "#B3541E", background: "color-mix(in srgb, #B3541E 14%, #FAF7F2)" },
    critical: { color: "#FAF7F2", background: "#8C1F17" },
  }[level] ?? { color: "#2F6FA8", background: "#FAF7F2" };
  return (
    <div role="status" style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 12px",
      borderRadius: 999, fontWeight: 600, fontSize: 12.5, boxSizing: "border-box", border: `1.5px solid ${palette.color}`,
      color: palette.color, background: palette.background }}>
      <span aria-hidden="true" className={pulsing ? "esc-pulse-dot" : undefined} style={{ width: 8, height: 8, borderRadius: "50%", background: "currentColor", flexShrink: 0 }} />
      <span>{label}</span>
      <span style={{ opacity: 0.75, fontWeight: 500 }}>{minutesOpen}m open</span>
      <style>{`@media (prefers-reduced-motion: no-preference) { .esc-pulse-dot { animation: escalation-react-pulse .22s ease-in-out infinite; } } @keyframes escalation-react-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }`}</style>
    </div>
  );
}