Status

Discrete progress marks with fill and border variants, explicit null progress, optional colors, and motion/react transitions.

Variant

Install

npm install @patternmode/status

import { StatusMark } from "@patternmode/status";
import "@patternmode/status/styles.css";

export function BuildStatus() {
  return (
    <div>
      <StatusMark
        value={75}
        label="Almost complete"
        color="#315c4b"
        trackColor="#edeae2"
      />
      <StatusMark status="null" label="Not measured yet" />
    </div>
  );
}

Core API

`StatusMark`

Animated SVG status mark for discrete progress steps.

value: numberNumeric progress input. Values are clamped from 0 to 100 and snapped to the nearest quarter step.
status: "null" | "empty" | "quarter" | "half" | "three-quarter" | "full"Named progress step. Use null only when progress is explicitly not yet known or measured.
tone: "neutral" | "accent" | "muted""neutral"Visual emphasis treatment. Tone changes color only.
size: "2xs" | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl""base"Patternmode size token used for the mark dimensions.
motion: "smooth" | "snap" | "reduced" | false"smooth"Transition preset for movement between progress steps.
variant: "fill" | "border""fill"Visual treatment for known progress. Null progress renders the same dashed placeholder in every variant.
color: stringOptional CSS color for active progress. Overrides tone.
trackColor: stringOptional CSS color for inactive track and placeholder structure.
label: stringAccessible label. Omit only when adjacent text already names the same state and the mark should be decorative.