Skip to main content
CodivDocs

Pill

Tiny rounded inline marker — even smaller than Badge.

Usage

<Pill> is the smallest label component. Use for "New", "Beta", "v2" markers next to text where space is tight.

## API v2 <Pill>New</Pill>

API v2 New

The default theme is dark <Pill>since v1.1</Pill>.

The default theme is dark since v1.1.

When to use Pill vs Badge

<Pill><Badge>
SizeSmaller, no uppercaseSlightly larger, uppercase
VariantsNone — single muted style7 colored variants
Use for"New", "v2", subtle markersStatus, plan tier, semantic labels

If you need color (success, warning, danger), reach for <Badge>. Pill is intentionally monochrome.

Props

PropTypeDescription
childrenReactNodePill label (kept very short — 1-3 words)

Last updated April 12, 2026