Badge

A small status label used to display counts, states, or categories.

Import

tsx

import { Badge } from '@tac-ui/web';

Playground

Interactively configure the Badge props below.

Badge

Variant

Label

tsx

<Badge variant="default">Badge</Badge>

Variants

Nine semantic variants cover the full range of status communication from neutral to critical.

DefaultSecondaryOutlineGlassDestructiveSuccessErrorWarningInfo

tsx

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="glass">Glass</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>

Glass

The glass variant uses a frosted-glass backdrop filter with a subtle border, adapting naturally to both light and dark themes.

NewBetaPro

tsx

<Badge variant="glass">New</Badge>
<Badge variant="glass">Beta</Badge>
<Badge variant="glass">Pro</Badge>

Interactive

Set interactive or provide an onClick to enable spring hover and tap animations. Useful for filterable tag chips.

ClickableFilterStatus

tsx

<Badge variant="default" interactive>Clickable</Badge>
<Badge variant="outline" interactive>Filter</Badge>
<Badge variant="success" onClick={() => alert('clicked')}>Status</Badge>

Count

The count prop animates numeric value changes with a popLayout exit transition. Use it for notification counts or unread indicators.

tsx

const [count, setCount] = useState(3);

<Badge variant="default" count={count} />
<button onClick={() => setCount((c) => c - 1)}>−</button>
<button onClick={() => setCount((c) => c + 1)}>+</button>

API Reference

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "outline" \| "glass" \| "destructive" \| "success" \| "error" \| "warning" \| "info"	"default"	Visual style of the badge.
count	number	-	Numeric value to display. When provided, changes animate with an exit transition via AnimatePresence.
interactive	boolean	false	Enables spring hover and tap animations. Automatically enabled when onClick is provided.
onClick	React.MouseEventHandler<HTMLSpanElement>	-	Click handler. Implicitly enables interactive mode when set.
children	React.ReactNode	-	Content displayed inside the badge. Ignored when count is provided.
className	string	-	Additional CSS class names.