Badge

<Badge>TailwindCSS Modules

Badges are small visual indicators used to label, categorize, or show status. Coloxo UI badges support multiple shapes (pill, rounded), 10 semantic colors, leading status dots, and dismissible actions.

InstallationColoxo CLI

npx coloxo add badge --style coloxo-css

ES Module ImportPlayground / npm package

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

Design Tokens:

--cx-brand-50: #EEF2FF--cx-brand-600: #2348FF--cx-success-500: #10B981--cx-radius-full: 9999px

1. Variant Matrix

Every color rendered across different badge types and configurations.

Color	pill-color	badge-color	badge-modern	With dot	Dismissible
brand	Label	Label	Label	Label	Label
gray	Label	Label	—	Label	Label
error	Label	Label	—	Label	Label
warning	Label	Label	—	Label	Label
success	Label	Label	—	Label	Label
blue	Label	Label	—	Label	Label
indigo	Label	Label	—	Label	Label
purple	Label	Label	—	Label	Label
pink	Label	Label	—	Label	Label
orange	Label	Label	—	Label	Label

2. Control heights

Badge dimensions match standard typography line-heights and grid increments for perfect alignment.

Sizes

size="sm"

Height: 22px (1.375rem)

Padding-x: 8px

Radius: pill / 6px

SmallSmall

High-density tables, tags

size="md"DEFAULT

Height: 24px (1.5rem)

Padding-x: 10px

Radius: pill / 8px

MediumMedium

Standard forms, lists

size="lg"

Height: 28px (1.75rem)

Padding-x: 12px

Radius: pill / 10px

LargeLarge

Hero sections, titles

3. Interactive Props Configurator

type

color

size

dot

Visual Render CanvasHEIGHT: 24PX | TYPE: PILL-COLOR

Label

tsx

1<Badge2  type="pill-color"3  color="brand"4>5  Label6</Badge>

4. Dark theme

Badges automatically adapt to dark mode using semantic color variables.

SuccessOperational

pill-color + dot

WarningHigh CPU

badge-color

ErrorDeployment Failed

badge-modern

BrandBeta Feature

dismissible

5. Enterprise layout compositions

Demonstrating hierarchy, alignment, and data density.

API Tokens

Manage your active personal access tokens.

3 Active

production_ci_keyActive

Expires in 12 days

staging_read_onlyRevoked

Revoked by admin on Oct 24

Accessibility

Accessible Names

The text content inside the badge acts as the accessible name.

Color Independence

Do not rely on color alone to convey status. Include text or a visible icon.

Dismissible Badges

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

Props

Name	Type	Default	Description
type	"pill-color" \| "badge-color" \| "badge-modern"	pill-color	Badge shape family.
color	"brand" \| "gray" \| "error" \| "warning" \| "success" \| "blue" \| "indigo" \| "purple" \| "pink" \| "orange"	brand	Tone (variant prop deprecated).
size	"sm" \| "md" \| "lg"	md	Size.
dot	boolean	—	Leading status dot.
onClose	() => void	—	Dismissible badge.