Tags
Tags are compact, inline labels that add quick context to headings, sentences, or list items. They carry lightweight metadata—status, category, ownership—without interrupting the reading flow, so dense views stay scannable.
Keep copy short and pair wording with color or icons only when it reinforces meaning. Place tags immediately next to the element they describe so assistive tech maintains the right reading order and readers can parse intent at a glance.
Regular
Default tags provide a neutral chip for inline annotations like “Draft”, “Beta”, or “New”. Use them to call out state, ownership, or taxonomy without overwhelming the surrounding content, and keep the label to a couple of words for rhythm.
Header H1 with tag Tagtastic
Header H2 with tag Tagtastic
Header H3 with tag Tagtastic
Header H4 with tag Tagtastic
Header H5 with tag Tagtastic
Header H6 with tag Tagtastic
A piece of text with a trailing tag Tagilicious
Accessibility: keep tag text legible at small sizes, avoid conveying meaning through color alone, and position the tag directly after the item it qualifies so screen readers present it in context.
<h1>... <span class="tag">...</span></h1>
<h2>... <span class="tag">...</span></h2>
<h3>... <span class="tag">...</span></h3>
<h4>... <span class="tag">...</span></h4>
<h5>... <span class="tag">...</span></h5>
<h6>... <span class="tag">...</span></h6>
<p>... <span class="tag">...</span></p>Colors
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Rosewater Flamingo Pink Magenta Mauve Purple Red Maroon Peach Orange Salmon Yellow Lemon Green Forest Olive Teal Sky Sapphire Cyan Blue Royal Lavender Navy Chocolate Lightgray Alt Darkgray Black
Color system: most hues come from the Catppuccin palette to keep status cues consistent; the remaining tones are legacy Nausikaa colors for backward compatibility. Verify contrast for text/icons and pair color with a clear label.
<span class="tag red">...</span>
<span class="tag yellow">...</span>
<span class="tag blue">...</span>
<span class="tag green">...</span>
<span class="tag purple">...</span>
<span class="tag orange">...</span>Icons
Icon tags mix a glyph with a short label to signal severity, category, or state without adding another line of text. Use icons to reinforce meaning—info, warning, success—rather than as decoration, and prefer concise wording that fits on a single line.
Regular
Alt
Rosewater
Flamingo
Pink
Magenta
Mauve
Purple
Red
Maroon
Peach
Orange
Salmon
Yellow
Lemon
Green
Forest
Olive
Cyan
Sky
Teal
Sapphire
Blue
Royal
Lavender
Navy
Chocolate
Lightgray
Darkgray
Black
Accessibility: supply text alongside icons or add an accessible label when an icon stands alone; set decorative icons to aria-hidden="true" and ensure focus styles remain visible on colored tags.
<span class="tag">
<svg class="icon"></svg>
</span>Links
Linked tags turn chips into navigation or filter controls while keeping their inline footprint. Use them for category filters, related content, or contextual shortcuts where a standard link feels too small and a button would be too heavy.
Interaction: ensure linked tags keep the standard focus ring, provide enough padding for touch targets, and avoid relying solely on color to communicate purpose—combine hue with copy or an icon.
<a class="tag">...</a>Badges
Badges are tags tailored for counts and status chips—unread totals, notifications, or compact labels. Keep numbers short, abbreviate large values, and pair icons only when they clarify what the count represents.
52 7438 6 1 24 99 883
74 56 99 22 4 61 21
9998 New message 6 1 24 99 88
3 12 6 87897 45 43 4
575 3135 54 88 79 8 88
1 1 1 1 1 1 1
36 2 55 78 98 7 0
Readability: provide an aria-label that spells out what the badge counts (e.g., “2 unread messages”), and avoid squeezing long words; truncate or abbreviate so badges remain legible next to their parent link or heading.
<span class="tag badge">...</span>