Tag

A non-interactive label for categories, status, and contextual metadata. Tags identify and classify — they never trigger actions. Pill shape, mono font, restrained palette. Used for group categories (Goa, Flat, Swiggy), status labels (settled, pending), and eyebrow annotations on cards.

Variants

Goa trip Flat expenses Settled Pending Partial

Default is a hairline border on transparent — the quietest option. Use for category labels that need to be present but not loud.

Filled uses the warm canvas background — slightly more visual weight than default. Use for metadata that should be noticeable but not urgent.

Teal signals a positive state — settled, confirmed, complete. Teal-pale background with deep teal text.

Coral signals an attention state — pending, unpaid, unresolved. Reserve for genuinely actionable situations, not as decoration.

Butter signals a neutral-warning state — partial, in progress. Uses the warning palette.

Sizes

Goa 2024 Settled Pending

Size	Class	Font	Padding	Use case
Medium	`.tag-md`	12px / 500	7px 14px	Card labels, list item metadata, standalone eyebrows
Small	`.tag-sm`	10px / 500	4px 10px	Compact rows, table cells, inline within prose

States

Default Muted (disabled context) Confirmed Overdue

Tags don't have hover or pressed states — they're non-interactive. The only state change is muted (50% opacity) when the parent item is disabled or loading. An optional leading icon (10px SVG) can reinforce the status meaning.

On dark surfaces

Goa trip Flat expenses Settled Pending Partial

Default and filled variants adapt to dark surfaces — border uses --dark-border, filled uses --dark-elevated. Semantic variants (teal, coral, butter) are visually unchanged — their background colors provide adequate contrast on dark canvas.

Anatomy

Settled

Container (pill, teal-pale bg)

Optional leading icon (10px)

Label (mono, 12px, 500)

Part	Element	Notes
Container	`<span>`	Always a `<span>`, never a `<button>`. Pill radius. No pointer events.
Leading icon	Optional 10px SVG	Only for status reinforcement (checkmark for settled, exclamation for overdue). Never decorative.
Label	Text node	Sentence case. One to three words maximum. No punctuation.

Usage

Do Use tags for static metadata: categories, group names, status labels. Keep labels short — one to three words. Sentence case always. Use teal for resolved/positive states and coral for pending/unresolved.

Don't Don't use a tag where a chip should go — if the user can select or remove it, use chip instead. Don't use more than 3 tags in a single row before truncating. Don't add hover or click behavior.

Do Pair tags with ledger rows, cards, and expense items for contextual metadata. The small size is right for table cells and compact list rows.

Don't Don't mix variants in the same row — pick one or two and stick to them. Don't use butter for anything that isn't genuinely in-progress. Don't use tag as an eyebrow above a heading — use the mono eyebrow text style instead.

Accessibility

Semantics Tags are rendered as <span> elements — they carry no implicit role. When a tag conveys meaning that is not otherwise available in the surrounding text (e.g. a lone "Settled" tag next to an amount), add aria-label with full context: aria-label="Status: Settled".

Icon-only scenario Never use a tag with only an icon and no text label — screen readers won't have a text node to read. If space is genuinely unavailable, use an icon with an adjacent visually-hidden <span>.

Code

HTML

<!-- Category label -->
<span class="tag tag-md tag-default">Goa trip</span>

<!-- Status: settled -->
<span class="tag tag-md tag-teal" aria-label="Status: Settled">
  <svg width="10" height="10" viewBox="0 0 12 12" fill="none"
       stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="2 6 5 9 10 3"/>
  </svg>
  Settled
</span>

<!-- Status: pending, small -->
<span class="tag tag-sm tag-coral">Pending</span>

<!-- Filled category -->
<span class="tag tag-md tag-filled">Swiggy</span>

CSS classes

Class	Purpose
`.tag`	Base — inline-flex, pill radius, mono font, non-interactive
`.tag-md`	12px, 7px 14px padding
`.tag-sm`	10px, 4px 10px padding
`.tag-default`	Hairline border, transparent bg
`.tag-filled`	Warm canvas bg, no border
`.tag-teal`	Teal-pale bg, teal-deep text — settled/confirmed
`.tag-coral`	Coral-pale bg, coral text — pending/overdue
`.tag-butter`	Warning-bg, warning text — partial/in-progress

Design tokens used

Token	Value	Role
`--ink-line`	#DDD2B8	Default variant border
`--s-warm`	#F1E9D5	Filled variant background
`--teal-pale`	#D6EAE2	Teal variant background
`--teal-deep`	#0A5F4F	Teal variant text
`--coral-pale`	#FADED4	Coral variant background
`--coral`	#E76F51	Coral variant text
`--warning-bg`	#FAF0D4	Butter variant background
`--warning`	#D4940A	Butter variant text
`--r-pill`	999px	Border radius
`--font-mono`	JetBrains Mono	Label typeface