Design system Status and feedback

Threshold

Progress toward a boundary, stated with its arithmetic. The bar shows distance to the line — and leaves when the line is crossed.

.mk-threshold

Overview

The threshold states progress toward a required numeric boundary: a hairline track, the reached figure riding its mark as a label, and the target standing at the row's end. The bar shows distance to the LINE, not to a decorative 100%; the label and the total carry the same fact in figures, so colour is never the only signal. Once the boundary is crossed, the bar leaves: a settled total replaces it.

Usage

  • Show distance to a defined boundaryUse Threshold when a current amount is meaningfully evaluated against a required minimum or maximum.
  • State the arithmetic in textThe label, current value, and boundary communicate the result without relying on bar length or colour alone.
  • Do not use as decorative progressIf the task is completion over time rather than comparison with a decision boundary, use a progress indicator instead.

Anatomy

1 2 3
  1. 1Reached label. The reached figure in the money weight, riding the mark on the status family's tinted shape. Green is its ground, never its ink — the fill and the dot already carry the success colour. It never hides, so it is a label, not a tooltip.
  2. 2Track and mark. A 3px hairline with the success fill — the reached share of the way to the line. The 9px dot stands on the reached edge.
  3. 3Target total. The target at the row's end, in the money weight — the boundary itself, always visible.

Variants and states

One component represents any numeric boundary. Currency and count are content formats, not separate variants; the meaningful states are the distance to the boundary and what replaces the bar after it is met.

StateSpecimenWhat changes
Approaching The fill and reached label move together; the target stays fixed.
Near the boundary The label clamps to the track edge instead of colliding with the total or leaving the component.
Threshold met
Threshold met

2,000 OMR

 The progress drawing leaves. A settled total and explicit state replace it.

Do and don't

While the boundary is still ahead

Do

Keep the reached figure, distance and target together while the remaining gap still changes a decision.

1,200 OMR

Don't

A bare current amount hides both the required boundary and how far away it is.

After the boundary is met

Threshold met

2,000 OMR

Do

Replace completed progress with an explicit settled state and the final total.

Don't

Do not leave a decorative full bar behind after it no longer answers a live question.

Copy

  • The label is the reached figureOMR 1,200, 2 of 3 — the shortest true statement of where things stand.
  • The met state states settlementWhat is now true, not what the bar used to show.

Accessibility

  • One image, one sentenceThe whole bar is role="img" with the fact as its name — "1,200 of 2,000 received"; the drawing inside is aria-hidden.
  • Met is announcedCrossing the boundary is a state change the live region speaks.

When to reach for something else

  • Time pressureUse the State variant on the Label page — a deadline is not an amount.

Markup

<div class="mk-threshold" role="img" aria-label="1,200 of 2,000 received">
  <span class="track" aria-hidden="true">
    <span class="fill" style="width:60%"></span>
    <span class="mark" style="left:60%"></span>
    <span class="mk-status-label lab"
          style="left:clamp(70px, 60%, calc(100% - 70px))"><span class="cur">OMR</span> 1,200</span>
  </span>
  <span class="total"><span class="cur">OMR</span> 2,000</span>
</div>

<!-- once met: the bar leaves, a settled total replaces it -->
<p class="mk-price">2,000 <span class="mk-price-cur">OMR</span></p>