TAG: Interactive label/chip for categorization, filtering, and metadata
TIERS: Solid | Subtle | Soft | Outline | Text-only
SHAPES: Default (rounded) | Pill (rounded-full)
SIZES: Small | Default | Large

Tags are compact interactive elements — removable, clickable, and composable into tag inputs. Five prominence tiers from bold to minimal. For passive indicators (counts, status dots), use Badge instead.

Default Tag

Base tag: Neutral gray background with subtle border. The most common variant, used for general-purpose labels and metadata.

Default Year 7 Open Day Website
<span class="tw-tag">Default</span>

Solid Variants

Solid tags: Full-color background with white text for high visibility. Use sparingly for tags that need strong visual emphasis.

Primary Secondary Success Danger Warning Info
<span class="tw-tag tw-tag-primary">Primary</span>

Subtle Variants

Subtle tags: Tinted background with colored text and tinted border. Use for semantic labelling where color conveys meaning (e.g., status, category).

Primary Secondary Success Danger Warning Info
<span class="tw-tag tw-tag-success-subtle">Success</span>

Soft Variants

Soft tags: Same tinted background as subtle, but without a visible border. Use for softer emphasis where the border adds too much visual noise.

Primary Secondary Success Danger Warning Info
<span class="tw-tag tw-tag-success-soft">Success</span>

Outline Variants

Outline tags: Transparent background with colored border and text. Use for secondary emphasis or lighter visual weight.

Primary Secondary Success Danger Warning Info
<span class="tw-tag tw-tag-outline-primary">Primary</span>

Text-Only Variants

Text-only tags: No background or border — just colored text. Use for inline type labels in activity timelines, metadata, or compact UI.

Neutral Primary Success Danger Warning Info
<span class="tw-tag tw-tag-text-primary">Primary</span>

Pill Shape

Pill modifier: Add .tag-pill for a fully-rounded capsule shape. Use for status indicators, filter chips, and patterns where a rounder shape is preferred.

Default Primary Engaged New Pending Rejected
<span class="tw-tag tw-tag-pill tw-tag-success-subtle">Engaged</span>

Sizes

Size variants: .tag-sm for compact spaces (table cells), default for standard use, .tag-lg for prominent standalone tags.

Small

Small

Default

Default

Large

Large

With close button

Small

Apples

Default

Apples

Large

Apples
<span class="tw-tag tw-tag-sm">Small</span>   <span class="tw-tag tw-tag-lg">Large</span>

Removable Tags

Close button: Add a .tag-close button inside the tag. Wire to data-controller="tag" for dismiss animation. Click the close icons below to see the fade-out effect.

Year 7 Open Day Enrolled Website Pending Rejected
<span class="tw-tag tw-tag-primary-subtle" data-controller="tag">Open Day <button class="tw-tag-close" data-action="click->tag#remove"><i class="fa-solid fa-xmark"></i></button></span>

Tag Groups

Tag group: Use .tag-group to arrange tags in a horizontal flex row with consistent gap-1.5 spacing. Tags wrap automatically.

Filter chips

Stage: New Source: Open Day Year: 2026

Status pills

Engaged New Pending Rejected +2 Siblings

Mixed metadata

Application Open Day Engaged
<div class="tw-tag-group">...tags...</div>

Interactive Tags

Interactive modifier: Add .tag-interactive for clickable tags that respond to hover and focus. Use <button> elements for proper keyboard support.

<button class="tw-tag tw-tag-interactive tw-tag-primary-subtle" type="button">Year 8</button>

Disabled State

Disabled: Add .tag-disabled for a translucent blue-tinted appearance with no pointer events. Used when tags are read-only or the parent control is disabled.

Without close button

Default Primary Success Pill

With close button

Apples Oranges

All sizes — disabled with close button

Small

Apples

Default

Apples

Large

Apples
<span class="tw-tag tw-tag-disabled">Apples <button class="tw-tag-close" disabled>...</button></span>