Badge

data-display

Compact inline label for status indicators, counts, categories, and removable tags. Five color variants (default/success/warning/error/info), two sizes (sm/md), optional status dot, and removable mode with close button.

Import

typescript
import { Badge } from "packages/ui/src";

Props

BadgeProps

PropTypeRequired
childrenReactNodeYes
variantdefault|success|warning|error|infoNo
sizesm|mdNo
dotbooleanNo
removablebooleanNo
onRemove() => voidNo

Examples

Badge / Tag

Compact label component for status indicators, counts, categories, and tags. 22nd shared component — 18 dedicated tokens.

Interactive Playground

Badge Label

All Variants

defaultsuccesswarningerrorinfo

With Dot Indicator

defaultsuccesswarningerrorinfo

Size Comparison

SmallMedium

Removable Tags

ReactTypeScriptNext.jsTokensARIA

Real-World Use Cases

Pipeline Status

Build PassingTests 123/123Drift 100%

Component Families

feedbacknavigationdata-displayforms

Token Counts

390 tokens22 components24 routes

Metadata

Component Metadata
Familydata-display
FrameworksNext.js, Astro/EmDash
DescriptionCompact inline label for status indicators, counts, categories, and removable tags. Five color variants (default/success/warning/error/info), two sizes (sm/md), optional status dot, and removable mode with close button.
PropsBadgeProps (children: ReactNode, variant?: default|success|warning|error|info, size?: sm|md, dot?: boolean, removable?: boolean, onRemove?: () => void)
Statesdefault, success, warning, error, info, with-dot, removable, sm, md
A11y
  • Remove button has aria-label
  • Dot indicator is aria-hidden
  • Text content conveyed by label
Responsive
  • Inline-flex, wraps naturally in flex containers
Motion
  • Remove button hover color transition 150ms
Token Dependencies
  • components.badge.fontSize
  • components.badge.fontWeight
  • components.badge.paddingX
  • components.badge.paddingY
  • components.badge.borderRadius
  • components.badge.defaultBackground
  • components.badge.defaultText
  • components.badge.successBackground
  • components.badge.successText
  • components.badge.warningBackground
  • components.badge.warningText
  • components.badge.errorBackground
  • components.badge.errorText
  • components.badge.infoBackground
  • components.badge.infoText
  • components.badge.dotSize
  • components.badge.removeColor
  • components.badge.removeHoverColor
Content Slotschildren (ReactNode)
CMS Bindings
  • Label from CMS string field
  • Variant from CMS select field
Test Cases
  • Renders children
  • Applies variant class
  • Applies size class
  • Shows dot when dot=true
  • Shows remove button when removable
  • Calls onRemove on click
  • Hides remove button when not removable
  • Passes className through