Tag

A small labeled badge, typically used to categorize or highlight content.

import { Tag } from '@jbpark/ui-kit';

<Tag color="primary">primary</Tag>;

defaultprimarysuccesswarningdanger

defaultprimarysuccesswarningdanger

bluepurplecyangreenfuchsiapinkredorangeyellowindigolimeamber

bluepurplecyangreenfuchsiapinkredorangeyellowindigolimeamber

Props

Prop	Type	Default
variant	'filled' | 'outlined'	'filled'
color	'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor	'default'
className	string	-
children	ReactNode	-

Tag shares Button's vocabulary (#320): variant="filled" matches Button's filled, and color accepts the same preset palette, named after Tailwind's own colours — blue, purple, cyan, green, fuchsia, pink, red, orange, yellow, indigo, lime, amber — on top of the named states (primary/success/warning/danger).

The presets are defined once and shared by both components, so a colour word is guaranteed to render the same hue on Tag and Button.

success and warning have no Button counterpart by design: a Tag marks state, which is why antd's Tag also carries status colours its Button does not.

Theming a colour

Every colour — states and presets alike — resolves from the same custom properties, set per data-color, so any of them can be re-themed the same way:

Property	Role
--tag-bg	the hue; the border when variant="outlined"
--tag-fg	text colour (defaults to --tag-bg)
--tag-tint	the fill behind variant="filled"

/* re-theme one colour, wherever it is used */
[data-slot='tag'][data-color='success'] {
  --tag-bg: oklch(70% 0.2 160);
}

Breaking in 9.0: the root data-slot changed from badge to tag. Selectors like the one above must be updated; nothing else about the rendered output changed (same element, same classes). The old value is now free for the separate antd-style Badge — a count/dot decorator, which is a different component from this chip. The names cross between ecosystems: what shadcn calls a Badge is what antd (and this library) calls a Tag.

Breaking in 7.0: variant="default" was removed — use variant="filled", which renders identically. Before 7.0 only preset colours emitted data-color and read --tag-*; the named states used fixed classes, so the hooks above silently did nothing for them. Now every colour takes the same path, and the rendered output for existing tags is pixel-identical.

Tag also accepts the rest of React.ComponentProps<'span'> (e.g. onClick, style).