Status label

In context

Purpose

StatusLabel answers "what's the state of this?" in one glance — on a payment row, a synced entry, a draft. It's the smallest way to show status, and it's read-only: if tapping it does something, it's an ActionChip, not a StatusLabel.

Anatomy

• Pill — a tone-tinted rounded container.
• Dot (optional) — a small tone-coloured dot, good for live/sync status.
• Icon (optional, overrides the dot) — for a more specific mark.
• Label — one or two words, never a sentence.

Variants

neutral (plain states like "Draft"), info, success ("Paid", "Synced"), warning ("Pending"), error ("Overdue"), and brand (a teal-tinted highlight state). Tones map to the feedback tokens.

Code

import { StatusLabel } from '@daytwo/components'

<StatusLabel label="Paid" tone="success" dot />
<StatusLabel label="Pending" tone="warning" dot />
<StatusLabel label="Overdue" tone="error" />

When to use

• A status per row in a list (payments, entries, missions).
• A sync/online marker (with dot).
• Any place a state needs a name but no interaction.

When NOT to use

• A tappable filter/action — use an ActionChip.
• A full message — use an Alert.
• Decoration — a pill with no real state behind it is noise.

Good vs bad

• Good: "Overdue" in error next to a customer who owes money — a real state, one word, scannable down the column.
• Bad: a bright brand pill on every row "for emphasis" — colour stops meaning anything, and the one row that actually needs attention disappears.

Edge cases

Tokens used