Badge

Badges are small status indicators that highlight important information, categories, or statuses.

Usage

Code

mdx

1<Badge>Default</Badge>
2<Badge variant="success">Success</Badge>
3<Badge variant="warning">Warning</Badge>
4<Badge variant="error">Error</Badge>
5<Badge variant="info">Info</Badge>

Live Example

Default Success Warning Error Info

Variants

Default

Default Badge

Used for neutral information or general labels.

Success

Completed

Indicates successful operations, active status, or positive outcomes.

Warning

Pending

Highlights items that need attention or are in a transitional state.

Error

Failed

Shows errors, critical issues, or negative status.

Info

New

Provides informational context or highlights new features.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	required	Badge text content
`variant`	`"default" \| "success" \| "warning" \| "error" \| "info"`	`"default"`	Color variant

Common Patterns

Use badges inline with text to indicate status: