Pill & Tag

Small label components for displaying status, tags, or labels.

Pill

A single line of text with a predefined text color. It has no background and a fixed height.

Basic

Leave color unset to inherit the surrounding text color.

Tracked

Cited

Mentioned

Recommended

Pending

Not cited

Archived

Draft

Tag

A rounded container for categorizing, labeling, or highlighting content. It has no color of its own; set background and text colors with className.

Basic

A neutral fill and an outline. Product tags use text-body-mini-regular.

Competitor
Product page

Colors

Pair a muted bg-bg-* fill with the matching text-text-* color.

Enabled
Failed
Disabled
New
Beta
Archived

Sizes

Tag has no size prop. Set the type token and padding with className.

Mini
Small

With Icons

Pass an Icon as a child. Tag lays out its children in a row.

Cited
Crawl failed
Stale data
Sampled

Usage

Pill

valueRequired
string

The text content to display in the pill

className
string

Additional CSS classes to apply to the pill container

color
'green''blue''purple''orange''red''gray'

Text color of the pill. Inherits the surrounding text color when unset

withPadding
boolean

Whether to include horizontal padding in the pill

Default: true


Tag

childrenRequired
React.ReactNode

The content to display inside the tag

className
string

Additional CSS classes to apply to the tag, including its colors