SLA Indicator

Shows progress against a service-level target.

html

<div class="sla sla--at-risk">
  <div class="sla__row">
    <span class="sla__label">First response SLA</span>
    <span class="sla__status">at-risk</span>
  </div>
  <div class="sla__track" role="progressbar" aria-label="First response SLA time used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70">
    <div class="sla__fill" style="width:70%;"></div>
  </div>
  <p class="sla__due">Due in 42 minutes</p>
</div>
<style>
.sla { width: 260px; font: 12.5px/1.3 system-ui, sans-serif; color: #241430; }
.sla__row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.sla__label { font-weight: 700; }
.sla__status { font-weight: 700; text-transform: capitalize; padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.sla--on-track .sla__status { background: #A8E6C1; color: #17532F; }
.sla--at-risk .sla__status { background: #E8A020; color: #4A2E00; }
.sla--breached .sla__status { background: #B3261E; color: #FAF7F2; }
.sla__track { height: 7px; border-radius: 999px; background: #24143018; overflow: hidden; }
.sla__fill { height: 100%; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .sla__fill { transition: width .2s ease; }
}
.sla--on-track .sla__fill { background: #2F8F5B; }
.sla--at-risk .sla__fill { background: #B4790A; }
.sla--breached .sla__fill { background: #B3261E; }
.sla__due { margin: 6px 0 0; color: #241430b3; }
</style>

tailwind

<div class="sla-tw sla-tw--at-risk w-64 font-sans text-[12.5px] text-[#241430]">
  <div class="flex justify-between mb-1.5">
    <span class="font-bold">First response SLA</span>
    <span class="sla-tw__status font-bold capitalize px-2 py-px rounded-full text-[11px]">at-risk</span>
  </div>
  <div role="progressbar" aria-label="First response SLA time used" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70" class="h-[7px] rounded-full bg-[#24143018] overflow-hidden">
    <div class="sla-tw__fill h-full rounded-full motion-safe:transition-[width] motion-safe:duration-300" style="width:70%;"></div>
  </div>
  <p class="mt-1.5 mb-0 text-[#241430]/70">Due in 42 minutes</p>
</div>
<style>
.sla-tw--on-track .sla-tw__status { background: #A8E6C1; color: #17532F; }
.sla-tw--at-risk .sla-tw__status { background: #E8A020; color: #4A2E00; }
.sla-tw--breached .sla-tw__status { background: #B3261E; color: #FAF7F2; }
.sla-tw--on-track .sla-tw__fill { background: #2F8F5B; }
.sla-tw--at-risk .sla-tw__fill { background: #B4790A; }
.sla-tw--breached .sla-tw__fill { background: #B3261E; }
</style>

react

export function SlaIndicator({
  label = "First response SLA",
  percentUsed = 70,
  status = "at-risk",
  dueIn = "42 minutes",
}) {
  const palette = {
    "on-track": { badge: "#A8E6C1", badgeText: "#17532F", fill: "#2F8F5B" },
    "at-risk": { badge: "#E8A020", badgeText: "#4A2E00", fill: "#B4790A" },
    breached: { badge: "#B3261E", badgeText: "#FAF7F2", fill: "#B3261E" },
  }[status] ?? { badge: "#A8E6C1", badgeText: "#17532F", fill: "#2F8F5B" };
  return (
    <div style={{ width: 260, font: "12.5px/1.3 system-ui, sans-serif", color: "#241430" }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
        <span style={{ fontWeight: 700 }}>{label}</span>
        <span style={{ fontWeight: 700, textTransform: "capitalize", padding: "1px 8px", borderRadius: 999,
          fontSize: 11, background: palette.badge, color: palette.badgeText }}>{status}</span>
      </div>
      <div role="progressbar" aria-label={`${label} time used`} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percentUsed}
        style={{ height: 7, borderRadius: 999, background: "#24143018", overflow: "hidden" }}>
        <div className="sla-fill" style={{ height: "100%", borderRadius: 999, width: `${percentUsed}%`, background: palette.fill }} />
      </div>
      <p style={{ margin: "6px 0 0", color: "#241430b3" }}>Due in {dueIn}</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .sla-fill { transition: width .2s ease; }
        }
      `}</style>
    </div>
  );
}