Usage
<Badge variant="success">GA</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="danger">Deprecated</Badge>GA Beta Deprecated
Variants
Seven theme-token-driven color variants:
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="neutral">Neutral</Badge>Default Primary Success Warning Danger Info Neutral
Sizes
Four sizes from tiny labels to prominent tags:
<Badge size="xs">XS</Badge>
<Badge size="sm">SM</Badge>
<Badge size="md">MD</Badge>
<Badge size="lg">LG</Badge>XS SM MD LG
Pill shape
Set shape="pill" for fully rounded badges:
<Badge variant="primary" shape="pill">v2.1</Badge>
<Badge variant="success" shape="pill">Live</Badge>v2.1 Live
With icon
Add a Lucide icon before the label:
<Badge variant="success" icon="check">Verified</Badge>
<Badge variant="warning" icon="alert-triangle">Review</Badge>Verified Review
Stroke (outline)
Set stroke for a transparent background with border-only style:
<Badge variant="primary" stroke>Outline</Badge>
<Badge variant="danger" stroke>Removed</Badge>Outline Removed
Disabled
Reduced opacity and non-interactive:
<Badge variant="info" disabled>Coming soon</Badge>Mintlify color names
If you're migrating from Mintlify, you can use named color values instead of variant:
<Badge color="blue">Info</Badge>
<Badge color="green">Success</Badge>
<Badge color="red">Danger</Badge>
<Badge color="yellow">Warning</Badge>
<Badge color="purple">Primary</Badge>Info Success Danger Warning Primary
Inline with headings
A common pattern: pin a status badge next to an h2 heading.
## Authentication <Badge variant="success">GA</Badge>
## Webhooks <Badge variant="warning">Beta</Badge>
## Legacy API <Badge variant="danger">Deprecated</Badge>Differences from <ApiMethod>
<ApiMethod> is a specialized badge for HTTP method labels (GET, POST, PUT, etc) with a fixed color mapping. <Badge> is the generic primitive — use it for everything that isn't an HTTP method.
Props
| Prop | Type | Default | Description |
variant | "default" | "primary" | "success" | "warning" | "danger" | "info" | "neutral" | "default" | Color variant |
color | string | — | Mintlify compat: named color (gray, blue, green, yellow, red, purple). Maps to variant |
size | "xs" | "sm" | "md" | "lg" | "sm" | Badge height and font size |
shape | "rounded" | "pill" | "rounded" | Border radius style |
icon | string | — | Icon name (Lucide, Tabler, or Font Awesome) |
iconType | string | — | FA icon style (solid, brands, etc.) |
stroke | boolean | false | Transparent bg with border-only outline |
disabled | boolean | false | Reduced opacity, no pointer events |
className | string | — | Custom CSS class |
children | ReactNode | required | Badge label (kept short — "GA", "Beta", "v2") |