Tag

data

Inline label for categorization, status, and metadata. 4 color variants (default, success, warning, error) with optional leading icon. Non-interactive — use Chip for interactive tags.

Import

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

Props

TagProps

PropTypeRequired
childrenReactNodeYes
variantTagVariantNo
iconReactNodeNo
classNamestringNo

Examples

Variants

DefaultSuccessWarningError

With Icons

FeaturedActivePendingBlocked

Usage in Context

Component:ReactAccessibleProduction

Metadata

Component Metadata
Familydata
FrameworksNext.js, Astro/EmDash
DescriptionInline label for categorization, status, and metadata. 4 color variants (default, success, warning, error) with optional leading icon. Non-interactive — use Chip for interactive tags.
PropsTagProps (children: ReactNode, variant?: TagVariant, icon?: ReactNode, className?: string)
Statesdefault, success, warning, error, with-icon
A11y
  • Icon container is aria-hidden
  • Text content is readable by screen readers
  • Color is not the only differentiator (text labels required)
Responsive
  • Inline-flex, wraps naturally in flex containers
Motion
  • No animation — static label
Token Dependencies
  • components.tag.background
  • components.tag.textColor
  • components.tag.borderRadius
  • components.tag.paddingX
  • components.tag.paddingY
  • components.tag.fontSize
  • components.tag.fontWeight
  • components.tag.gap
  • components.tag.successBackground
  • components.tag.successColor
  • components.tag.warningBackground
  • components.tag.warningColor
  • components.tag.errorBackground
  • components.tag.errorColor
Content Slotschildren (ReactNode), icon (ReactNode)
CMS Bindings
  • Tag label from CMS taxonomy
  • Variant from CMS status field
Test Cases
  • Renders with children
  • Applies default variant class
  • Applies success variant
  • Applies warning variant
  • Applies error variant
  • Renders icon when provided
  • Icon is aria-hidden
  • Passes className through