WritedocsWritedocs

Badge

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

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>

Props

color "gray" | "blue" | "green" | "yellow" | "orange" | "red" | "purple" default: "gray"
size "xs" | "sm" | "md" | "lg" default: "md"
shape "rounded" | "pill" default: "rounded"
icon string

See Icons.

stroke boolean default: false

Outline instead of filled.

disabled boolean default: false

Reduced opacity.