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
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 |
children | ReactNode | required | Badge label (kept short — "GA", "Beta", "v2") |