Badge
Badge
Inline status labels and category tags with muted tinted variants
Default
Secondary
Outline
Destructive
Success
Warning
Info
Installation
npx @ravikumarsurya/mdx-ui add badgeUsage
import { Badge } from "@/components/mdx/badge"
<Badge>Default</Badge>
<Badge variant="success">Published</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="info">New</Badge>Examples
In content
Use badges inline to label status, categories, or version numbers.
This feature is <Badge variant="info">Beta</Badge> and subject to change.
Release <Badge variant="success">v1.0.0</Badge> is now stable.
This API is <Badge variant="destructive">Deprecated</Badge>.Version tags
## API Reference <Badge variant="outline">v2</Badge>
### createUser() <Badge variant="success">Stable</Badge>
### legacyAuth() <Badge variant="warning">Deprecated</Badge>All variants
| Variant | Use for |
|---|---|
default | General labels, primary categorisation |
secondary | Secondary or neutral labels |
outline | Subtle, low-emphasis tags |
success | Stable, published, passing |
warning | Beta, deprecated, needs attention |
info | New, preview, informational |
destructive | Removed, broken, critical |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | "info" | "default" | Visual style of the badge |
className | string | — | Additional CSS classes |
children | React.ReactNode | — | Badge label content |