# Status tag

Status: stable

A short status label: Paid, Overdue, Draft.

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.

## Example

```html
<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>
```

## Anatomy

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

- **Padding**: block: var(--at-space-1) /* 2px */; inline: var(--at-space-3) /* 8px */

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

## Variants

### Neutral

No particular status: Draft, Archived, Not started.

```html
<span class="at-tag">Draft</span>
```

### Information

Something planned or in progress: Scheduled, Syncing.

```html
<span class="at-tag at-tag--info">Scheduled</span>
```

### Success

Done and fine: Paid, Active, Connected.

```html
<span class="at-tag at-tag--success">Paid</span>
```

### Warning

Needs attention soon: Due soon, Expiring.

```html
<span class="at-tag at-tag--warning">Due soon</span>
```

### Danger

Needs attention now: Overdue, Failed.

```html
<span class="at-tag at-tag--danger">Overdue</span>
```

### Discovery

Something new: New, Beta, AI drafted.

```html
<span class="at-tag at-tag--discovery">New</span>
```

### 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.

```html
<div class="at-inline"><span class="at-tag at-tag--bold at-tag--danger">Overdue</span><span class="at-tag at-tag--bold at-tag--warning">Due today</span><span class="at-tag at-tag--bold at-tag--discovery">New</span></div>
```

### 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.

```html
<div class="at-inline"><span class="at-tag at-tag--blue">HMO</span><span class="at-tag at-tag--teal">Studio</span><span class="at-tag at-tag--orange">Flat</span><span class="at-tag at-tag--purple">Student</span></div>
```

## 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

Do: Short words that carry the meaning on their own.

```html
<div class="at-inline"><span class="at-tag at-tag--danger">Overdue</span><span class="at-tag at-tag--success">Paid</span></div>
```

Don't: A symbol only, and a long label in capitals.

```html
<div class="at-inline"><span class="at-tag at-tag--danger">!</span><span class="at-tag at-tag--success">PAYMENT RECEIVED IN FULL</span></div>
```

## Do

- Use one or two words.

## Don't

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

## Code

```html
<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

`--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.