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.
Base tag: Neutral gray background with subtle border. The most common variant, used for general-purpose labels and metadata.
<span class="tw-tag">Default</span>
Solid tags: Full-color background with white text for high visibility. Use sparingly for tags that need strong visual emphasis.
<span class="tw-tag tw-tag-primary">Primary</span>
Subtle tags: Tinted background with colored text and tinted border. Use for semantic labelling where color conveys meaning (e.g., status, category).
<span class="tw-tag tw-tag-success-subtle">Success</span>
Soft tags: Same tinted background as subtle, but without a visible border. Use for softer emphasis where the border adds too much visual noise.
<span class="tw-tag tw-tag-success-soft">Success</span>
Outline tags: Transparent background with colored border and text. Use for secondary emphasis or lighter visual weight.
<span class="tw-tag tw-tag-outline-primary">Primary</span>
Text-only tags: No background or border — just colored text. Use for inline type labels in activity timelines, metadata, or compact UI.
<span class="tw-tag tw-tag-text-primary">Primary</span>
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.
<span class="tw-tag tw-tag-pill tw-tag-success-subtle">Engaged</span>
Size variants: .tag-sm for compact spaces (table cells), default for standard use, .tag-lg for prominent standalone tags.
Small
SmallDefault
DefaultLarge
LargeSmall
ApplesDefault
ApplesLarge
Apples<span class="tw-tag tw-tag-sm">Small</span>
<span class="tw-tag tw-tag-lg">Large</span>
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.
<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 group: Use .tag-group to arrange tags in a horizontal flex row with consistent gap-1.5 spacing. Tags wrap automatically.
<div class="tw-tag-group">...tags...</div>
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: 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.
Small
ApplesDefault
ApplesLarge
Apples<span class="tw-tag tw-tag-disabled">Apples <button class="tw-tag-close" disabled>...</button></span>
Modifier: .tw-tag-neutral-text forces text-neutral-800 regardless of the color variant. Useful with outline variants when you want colored borders but readable neutral text.
<span class="tw-tag tw-tag-outline-info tw-tag-neutral-text">Info</span>
Composition: Outline tag + .tw-tag-neutral-text with a solid .tw-badge nested inside. Use .tw-badge-rounded for squared tags or default pill badge for .tw-tag-pill.
Use for items with a count or capacity indicator — e.g., class groups with fill counts, categories with totals. Badges are auto-sized when nested inside any tag.
Small
12 CS A 5/13 12 CS A 5/13Default
12 CS A 5/13 12 CS A 5/13Large
12 CS A 5/13 12 CS A 5/13<span class="tw-tag tw-tag-outline-info tw-tag-neutral-text">12 Chem A <span class="tw-badge tw-badge-rounded tw-badge-info">12/14</span></span>