#Badge

The <Badge> component renders inline labels for marking features, API endpoints, or documentation sections. Supports four semantic variants and arbitrary custom colors.

#Variants

Code

import { Badge } from '@theme'

- <Badge variant="info">Info</Badge> — informational
- <Badge variant="success">Success</Badge> — completed or stable
- <Badge variant="warning">Warning</Badge> — heads up
- <Badge variant="error">Error</Badge> — critical or breaking

Output

• Info — informational
• Success — completed or stable
• Warning — heads up
• Error — critical or breaking

#Custom colors

Use the color prop with any hex value to create custom badges. The background is automatically tinted at 12% opacity.

Code

- <Badge color="#d97706">Beta</Badge>
- <Badge color="#0891b2">New</Badge>
- <Badge color="#be185d">Deprecated</Badge>

Output

• Beta
• New
• Deprecated

#Inline with headings

## Authentication <Badge variant="warning">Warning</Badge>

#Props

#BadgeVariant

'info' | 'success' | 'warning' | 'error'