Badge

A small inline label for status indicators, version tags, or metadata — sits naturally inside a sentence:

This endpoint is Stable, but this one is still Beta.

Gray Blue Green Yellow Orange Red Purple xs sm md lg Shipped Deprecated Locked

This endpoint is <Badge color="green">Stable</Badge>, but this one is still <Badge color="orange">Beta</Badge>.

<Badge icon="rocket" color="blue" shape="pill">Shipped</Badge>
<Badge stroke color="red">Deprecated</Badge>
<Badge disabled icon="lock" color="gray">Locked</Badge>

Badge props

size"xs" | "sm" | "md" | "lg"default: "md"

shape"rounded" | "pill"default: "rounded"

iconstring

See Icons.

strokebooleandefault: false

Outline instead of filled.

disabledbooleandefault: false

Reduced opacity.