Skip to content

Status

In the app

The one place the semantic colours appear. The dot inherits currentColor, so a status never needs a second token.

@varick/ui/components/statusAdded 26 Aug 2026

Submission routerRunning
Compliance checkQueued
Renewal managerReview
Invoice matcherPaused

Usage

import { Status } from "@varick/ui/components/status";

export function Example() {
  return <Status tone="success" pulse>Running</Status>;
}

Variants

Tones

SuccessTealWarnDangerNeutral
<Status tone="success">Success</Status>
<Status tone="teal">Teal</Status>
<Status tone="warn">Warn</Status>
<Status tone="danger">Danger</Status>
<Status tone="neutral">Neutral</Status>

With pulse, for live states

RunningQueued
<Status tone="success" pulse>Running</Status>

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
tone'success' | 'warn' | 'danger' | 'teal' | 'neutral''neutral'Picks the colour pair. Neutral is the muted, paused state.
pulsebooleanfalseLeading dot, for states that are live right now.
childrenReactNoderequiredOne or two words.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--success);
  background: var(--success-soft);
}
.status.warn { color: var(--warn); background: var(--warn-soft); }
.status.bad  { color: var(--danger); background: var(--danger-soft); }
.status .pulse { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }