Primitives

Badges & Pills

Status badges, tags, and count pills. Notification counts use the indigo variant, never the brand accent — the neon-green signal color fails contrast at small text sizes.

Variants

All variants at the sm size.

neutralaccentsuccesswarningdangerinfoslateindigooutline

<Badge variant="success">completed</Badge>

Sizes

xs / sm / md.

xssmmd

With leading icon

VerifiedRate limitedNew

Removable

Click the X to remove a tag from the list.

Deep SearchFinanceReal-timePlayground

Recommended / featured pattern

An inverse-of-page-color chip — never accent-on-accent, which fails contrast.

Pro planRecommended

Unlimited Deep Search, priority latency.

<span className="bg-ink text-bg dark:bg-bg dark:text-ink ...">Recommended</span>

Notification count

Indigo, not accent — small neon-green text fails AA contrast.