BADGE: Passive inline indicator for counts, status dots, and key-value labels
TIERS: Solid | Subtle | Soft | Outline | Text-only
FEATURES: Label (key-value) | Circle | Dot | Sizes | Notification positioning
Use badges to label items with status, category, or count information. Five prominence tiers from bold to minimal. For interactive chips (removable, clickable), use Tag instead.
Solid badges: Full-color background with white text for high visibility. Use for primary status indicators that need to stand out.
<span class="tw-badge tw-badge-success">Success</span>
Subtle badges: Light tinted background with dark text and tinted border. Use when you need semantic colors with moderate visual weight.
<span class="tw-badge tw-badge-success-subtle">Success</span>
Soft badges: Same tinted background as subtle, but without a border. Use for softer emphasis where the border adds too much visual noise.
Note: .tw-badge-secondary-soft is visually identical to the default .tw-badge — use it when you want an explicit semantic choice that matches the naming system.
<span class="tw-badge tw-badge-success-soft">Success</span>
Outline badges: Transparent background with colored border and text. Use for secondary emphasis or when you need a lighter visual weight.
<span class="tw-badge tw-badge-outline-primary">Primary</span>
Text-only badges: No background or border — just colored text. Use for minimal inline indicators where the badge should blend with surrounding text.
<span class="tw-badge tw-badge-text-primary">Primary</span>
Sizes: Small for compact spaces (table cells), default for general use, large for emphasized labels.
<span class="tw-badge tw-badge-primary tw-badge-sm">Small</span>
Shape variants: Badges have pill shape (fully rounded) by default.
Use .tw-badge-rounded for subtle rounded corners.
For perfect circles, see the Circle Badges section below.
<span class="tw-badge tw-badge-primary">Default Pill</span><span class="tw-badge tw-badge-primary tw-badge-rounded">Rounded</span>
Circle badges: Perfect circle shape that doesn't expand horizontally.
Ideal for notification counts, numeric indicators, and single-character labels.
Use .tw-badge-circle with any color variant.
<span class="tw-badge tw-badge-danger tw-badge-circle">3</span><span class="tw-badge tw-badge-primary tw-badge-circle tw-badge-sm">12</span><span class="tw-badge tw-badge-info tw-badge-circle">99+</span>
Dot badges: Add a colored dot prefix for status indicators. The dot inherits the badge text color. Best used with subtle, soft, outline, or text-only tiers where the dot color is visible against the background. Dot size scales proportionally with badge size (sm/default/lg).
<span class="tw-badge tw-badge-success-subtle tw-badge-dot">Active</span>
Label badges: Use .tw-badge-key inside a badge to create a key-value label.
The key portion gets a semibold weight and a right separator. Works with all variants and sizes.
<span class="tw-badge tw-badge-success-subtle"><span class="tw-badge-key">Status</span> Active</span>
Combining modifiers: You can combine size, shape, and dot modifiers with any color variant across all five tiers.
<span class="tw-badge tw-badge-success tw-badge-sm">Small Pill</span><span class="tw-badge tw-badge-primary tw-badge-rounded">Rounded</span>
Real-world usage: Badges in context with other components.
John Smith - Year 7 Entry
| Name | Status | Type |
|---|---|---|
| Summer Campaign | Live | |
| Winter Newsletter | Draft | Newsletter |
| Spring Event Invite | Ended | Event |
Migrating from prototype: Class mapping for existing prototype pages.
| Prototype Class | New Class | Example |
|---|---|---|
.badge-active |
.tw-badge.tw-badge-info |
Active |
.badge-success |
.tw-badge.tw-badge-success |
Success |
.badge-warning |
.tw-badge.tw-badge-warning |
Warning |
.badge-draft |
.tw-badge.tw-badge-secondary |
Draft |
.badge-completed |
.tw-badge.tw-badge-success |
Completed |
Completing the text tier: .tw-badge-text-magenta gives the sixth hue a
badge home — type labels used to borrow .tw-timeline-card-type-magenta in tables.
.tw-badge-text-neutral is the quieter neutral (neutral-600) for a type label that must
not compete with the row's own text; .tw-badge-text (neutral-700) stays the default
neutral. Text badges carry no ground, so keep them on a plain surface.
| Activity | Type | Recorded |
|---|---|---|
| Bursary evidence uploaded | Bursary | 11 Aug 2026 |
| Called mother — no answer | Note added | 10 Aug 2026 |
| Offer letter sent | 8 Aug 2026 |
<span class="tw-badge tw-badge-text-magenta">Bursary</span> |
<span class="tw-badge tw-badge-text-neutral">Note added</span>
STATUS DOT: .tw-status-dot | -sm | -primary -info -success -danger -warning -magenta | -live
A bare 8px dot (6px with -sm) for a status marker that sits beside its own label —
list rows, legend keys, "connected" indicators. It is smaller and quieter than
.tw-badge-dot, which is a badge that happens to carry a dot.
Colour is never the only indicator: always pair the dot with the word, and mark the
dot aria-hidden="true" so a screen reader reads the label once, not twice.
Small (.tw-status-dot-sm) — for dense rows
Live (.tw-status-dot-live) — pulsing halo
Use sparingly: the pulse means "this figure is updating right now" — one per screen at
most. It is static under prefers-reduced-motion: reduce, so the meaning
must survive without the animation: the dot keeps its colour and the label still says "Live".
Announce the state with role="status" rather than relying on the movement.
Live — 1,284 applications, updated a moment ago
<span class="tw-status-dot tw-status-dot-success" aria-hidden="true"></span> Offer accepted<span class="tw-status-dot tw-status-dot-sm tw-status-dot-warning" aria-hidden="true"></span> Sync pending<span class="tw-status-dot tw-status-dot-success tw-status-dot-live" aria-hidden="true"></span> Live