<div style="max-width:24rem;display:flex;flex-direction:column;gap:var(--space-4)">
  <div>
    <div class="row" style="justify-content:space-between;margin-bottom:var(--space-1)">
      <span style="font-size:var(--text-sm)">Settlement batch</span>
      <span class="muted" style="font-size:var(--text-sm)">70%</span>
    </div>
    <div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="Settlement batch"
         style="height:var(--space-2);border-radius:var(--radius-pill);background:var(--bg-muted);overflow:hidden">
      <div style="width:70%;height:100%;background:var(--accent);border-radius:var(--radius-pill)"></div>
    </div>
  </div>
  <div>
    <div class="row" style="justify-content:space-between;margin-bottom:var(--space-1)">
      <span style="font-size:var(--text-sm)">Certificate rotation</span>
      <span style="font-size:var(--text-sm);color:var(--warning-text)">31 days left</span>
    </div>
    <div role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" aria-label="Certificate rotation window"
         style="height:var(--space-2);border-radius:var(--radius-pill);background:var(--bg-muted);overflow:hidden">
      <div style="width:15%;height:100%;background:var(--warning);border-radius:var(--radius-pill)"></div>
    </div>
  </div>
</div>

Usage

Track is --bg-muted, fill is the accent; a judgement colour replaces the accent only when the bar expresses a judgement (a closing deadline, a failing quota).
Always pair the bar with a text value; the bar alone is not readable enough for operations work.
Use role="progressbar" with the aria value attributes, or a native <progress> element where its styling limits are acceptable.
For indeterminate waits use the kit's spinner, not a looping bar.

‹ Alert Modal ›