Tag Component

Tag / chip component with border, background, and hover states. Supports variants, shapes, sizes, and dynamic colors.

Notes

Base: .tag. Variants: tag-subtle (light bg), tag-ghost (transparent), tag-muted (border only), tag-plain (text only).
States: tag-selected (highlight border), tag-compact (smaller padding).
Prefer compound variant+color classes like tag-subtle-primary over tag-subtle tag-primary.
Shapes: tag-rounded, tag-square, tag-fluid, tag-pill. Sizes: tag-4 (16px) to tag-15 (60px).

Basic usage

Default tags

Default HTML CSS

Selected state (tag-selected)

Selected Primary

Compact (tag-compact)

Compact v1.0 beta

Interactive (a tag)

Clickable tag Selected link

With close button

Tag × Primary ×

Variants

Default (border)

Default Primary Success Error

tag-subtle (light bg)

Subtle Primary Success Error

tag-ghost (transparent)

Ghost Primary Success Error

tag-muted (border only)

Muted Primary Success

tag-plain (text only)

Plain Primary Success

Compound shortcuts

tag-subtle-*

Primary Success Error Info

tag-ghost-*

Primary Success Error

tag-muted-*

Primary Success Error

tag-plain-*

Primary Success Error

Shapes

tag-rounded

Rounded Success

tag-square

Square Success

tag-fluid

Fluid Success

tag-pill

Circle Success Error Small Medium

Sizes

16px (tag-4)

4 Success Sub O

20px (tag-5)

5 Sub O

24px (tag-6)

6 Sub O

28px (tag-7)

7 Sub O

32px (tag-8, default)

8 Sub O

36px (tag-9)

9 Sub

40px (tag-10)

10 Sub

44px (tag-11)

48px (tag-12)

52px (tag-13)

56px (tag-14)

60px (tag-15)

Theme colors

Each color shown in 4 variants: default / subtle / ghost / plain.

Primary

Primary Sub Ghost Plain

Secondary

Secondary Sub

Tertiary

Tertiary Sub

Success

Success Sub Ghost Plain

Error

Error Sub Ghost Plain

Info

Info Sub

Highlight

Highlight Sub

Warning

Warning Sub

Caution

Caution Sub

Ink

Ink Sub

Title

Title Sub

Description

Description Sub

Caption

Caption Sub

Placeholder

Placeholder Sub

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

Tailwind colors

green-100 green-500 green-800 sub ghost