Component

Badge

A compact label for statuses, categories, filters, and small pieces of metadata.

Examples

Live previews paired with copyable source.

Variants

Use color with restraint for status, priority, and product metadata.

DefaultPrimaryLiveQueuedBlockedOutline

tsx

<div className="flex gap-3">
  <Badge>Default</Badge>
  <Badge variant="primary">Primary</Badge>
  <Badge variant="success">Live</Badge>
  <Badge variant="warning">Queued</Badge>
  <Badge variant="danger">Blocked</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

Sizes and Icons

Badges stay compact while supporting icons and longer labels.

BetaVerifiedEnterprise ready

tsx

<Badge size="sm" variant="primary" icon={<Sparkles className="h-3 w-3" />}>
  Beta
</Badge>

<Badge size="md" variant="success" icon={<Check className="h-3.5 w-3.5" />}>
  Verified
</Badge>

<Badge size="lg" variant="outline">Enterprise ready</Badge>

Removable

Add a remove action when badges represent user-selected filters.

ReactDesign system

tsx

<Badge variant="primary" removable onRemove={() => console.log('remove')}>
  React
</Badge>

API Reference

Props available on the component.

Prop	Type	Default	Description
variant	'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'outline'	'default'	Visual style for status or emphasis.
size	'sm' \| 'md' \| 'lg'	'md'	Controls badge height, spacing, and text size.
icon	React.ReactNode	undefined	Optional leading icon.
removable	boolean	false	Shows a compact remove button.
onRemove	() => void	undefined	Called when the remove button is clicked.