Tag

<Tag>TailwindCSS Modules

Tags are neutral filter chips or metadata indicators. They support optional status dots, avatars, trailing counts, and close buttons for interactive filtering contexts.

InstallationColoxo CLI

npx coloxo add tag --style coloxo-css

ES Module ImportPlayground / npm package

import { Tag } from '@coloxo/ui';

Design Tokens:

--cx-slate-100: #F1F5F9--cx-slate-700: #334155--cx-radius-sm: 4pxfocus: 2px ring

1. Variant Matrix

Different combinations of Tag content.

Base	With dot	With count	With avatar	Dismissible
Default	Engineering	Operational	Open issues12	Alex Smith	Remote

2. Control heights (Sizes)

Sizes match standard spacing increments.

Sizes

size="sm"

Dimensions: 24px (1.5rem)

LabelDismissible

Compact filter bars, dense lists

size="md"DEFAULT

Dimensions: 28px (1.75rem)

LabelDismissible

Standard forms, standard empty states

size="lg"

Dimensions: 32px (2rem)

LabelDismissible

Hero sections, primary filter chips

3. Interactive Props Configurator

Size

dot

count

avatarSrc

onClose

Visual Render CanvasHEIGHT: 28PX

Label

tsx

1<Tag2>3  Label4</Tag>

4. Dark theme

Tags automatically adapt to dark mode using CSS variables.

EngineeringOperationalOpen issues12

Alex SmithRemote

5. Enterprise layout compositions

Tags are frequently used in filter toolbars and data tables.

Active Filters

Status: ActiveRole: DeveloperLocation: Remote

Accessibility

Focus Management

When an onClose handler is provided, the embedded close button is fully keyboard accessible.

Accessible Names

The close button has an aria-label of 'Remove tag' for screen readers.

Decorative Dots

The leading dot is decorative and hidden from screen readers using aria-hidden='true'.

Props

Name	Type	Default	Description
size	"sm" \| "md" \| "lg"	md	Size.
count	number \| string	—	Trailing count.
onClose	() => void	—	Remove tag.