Badge

Compact status pill for tagging, categorisation, and inline emphasis.

Installation

npx nimbus-docs add badge

yarn dlx nimbus-docs add badge

pnpm dlx nimbus-docs add badge

bunx nimbus-docs add badge

Preview

Default Info Success Warning Danger

<Badge text="Default" />
<Badge text="Info" variant="info" />
<Badge text="Success" variant="success" />
<Badge text="Warning" variant="warning" />
<Badge text="Danger" variant="danger" />

Examples

Variants

Each variant signals a different intent. Aliases collapse onto the canonical four.

Stable Beta Deprecated Breaking

<Badge text="Stable" variant="success" />
<Badge text="Beta" variant="info" />
<Badge text="Deprecated" variant="warning" />
<Badge text="Breaking" variant="danger" />

Sizes

Three scales for use beside body text, headings, or display copy.

Small Medium Large

<Badge text="Small" size="small" />
<Badge text="Medium" size="medium" />
<Badge text="Large" size="large" />

In context

Paired with text to mark status without breaking reading flow.

Payments API
v2.1

The Payments API has reached general availability.

## Payments API <Badge text="v2.1" variant="info" size="medium" />

The Payments API has reached general availability.

API reference

Every prop the component accepts, sourced from a single declaration.

Prop	Type
`text` required	`string`
`variant`	`"default" \| "info" \| "note" \| "success" \| "tip" \| "warning" \| "caution" \| "danger"`
`size`	`"small" \| "medium" \| "large"`