Status tag

Stable

Tags are short status labels: Paid, Overdue, Draft. They let managers scan a list for what needs attention. Always use a word, not colour alone, so the status is clear to everyone.

DraftScheduledPaidDue soonOverdue

---

Specifications

LightDark

Anatomy

Paid

1) Label

font-size: var(--at-text-xs) /* 12px */

font-weight: var(--at-weight-bold)

line-height: 1.4

color: status colour

2) Container

border: 1px solid currentColor

border-radius: var(--at-radius-1) /* 6px */

background: status -bg token

Size and spacing

Scheduled

Padding

block: var(--at-space-1) /* 2px */

inline: var(--at-space-3) /* 8px */

Spacing

between tags: use .at-inline (8px gap)

Neutral

No particular status: Draft, Archived, Not started.

LightDark

Example

Draft

Information

Something planned or in progress: Scheduled, Syncing.

LightDark

Example

Scheduled

Success

Done and fine: Paid, Active, Connected.

LightDark

Example

Paid

Warning

Needs attention soon: Due soon, Expiring.

LightDark

Example

Due soon

Danger

Needs attention now: Overdue, Failed.

LightDark

Example

Overdue

Discovery

Something new: New, Beta, AI drafted.

LightDark

Example

New

Bold

Emphasis: High

Add at-tag--bold for a solid fill. Use it for the one status that most needs attention in a view, such as Overdue in a list of otherwise subtle tags.

LightDark

Example

OverdueDue todayNew

Accent

Emphasis: Low

Categories with no status meaning, such as property types. Six hues: blue, teal, green, orange, purple and magenta. If swapping two hues would change what the tag means, use a status tag instead.

LightDark

Example

HMOStudioFlatStudent

---

Usage

When to use

• Showing the status of a record in a table, summary list or card.

When not to use

• Actions: use a button.
• Long text: tags are one or two words.
• More than one bold tag per view: bold only works when it is rare.

Content

• One or two words, sentence case: "Due soon", not "DUE SOON".
• Use the same word for the same status on every screen.

Do and don't

OverduePaid

DoShort words that carry the meaning on their own.

!PAYMENT RECEIVED IN FULL

Don'tA symbol only, and a long label in capitals.

Do

• Use one or two words.

Don't

• Rely on colour alone: the word must say the status.

---

Implementation

HTML

Copy

<div class="at-inline">
  <span class="at-tag">Draft</span>
  <span class="at-tag at-tag--info">Scheduled</span>
  <span class="at-tag at-tag--success">Paid</span>
  <span class="at-tag at-tag--warning">Due soon</span>
  <span class="at-tag at-tag--danger">Overdue</span>
</div>

Classes

Class	What it does
at-tag	Neutral
at-tag--info	Information
at-tag--success	Good
at-tag--warning	Needs attention
at-tag--danger	Problem
at-tag--discovery	New, beta, AI
at-tag--bold	Solid fill, combine with a status
at-tag--blue / --teal / --green / --orange / --purple / --magenta	Accent hues, no meaning

Tokens used

--at-text-subtle, --at-text-info, --at-bg-info-subtle, --at-text-success, --at-bg-success-subtle, --at-text-warning, --at-bg-warning-subtle, --at-text-danger, --at-bg-danger-subtle, --at-text-discovery, --at-bg-discovery-subtle, --at-text-inverse, --at-bg-danger-bold, --at-bg-accent-blue, --at-text-accent-blue

---

Accessibility

• The text carries the meaning, so colour-blind users get the same information.

Related

Table

Rows of data the user compares or scans.

View component

Summary list

Key and value pairs for one record, such as a property or tenancy.

View component