Badge

Overview

The Badge component renders a compact inline label with a colored background. It is ideal for tagging content with status indicators, version labels, or categorical metadata inline with text.

Example

Default Success Warning Error Info

Usage

Variants

mdx

    <Badge>Default</Badge>
 
    <Badge variant="success">Success</Badge>
 
    <Badge variant="warning">Warning</Badge>
 
    <Badge variant="error">Error</Badge>
 
    <Badge variant="info">Info</Badge>

Inline with text

Badges are inline elements and sit naturally within prose:

mdx

    This feature is <Badge variant="success">stable</Badge> and ready for production.
 
    The `/v1/legacy` endpoint is <Badge variant="warning">deprecated</Badge> and will be removed in v3.
 
    This method is <Badge variant="error">removed</Badge> as of version 2.0.

Props

Prop	Type	Required	Default	Description
`children`	`React.ReactNode`	Yes	—	The text or content displayed inside the badge.
`variant`	`"default"` `"success"` `"warning"` `"error"` `"info"`	No	`"default"`	Controls the color scheme of the badge.

Accessibility Notes

Badges are rendered as <span> elements and are inline by nature.
Do not rely solely on color to convey meaning — always use descriptive text inside the badge.
Avoid using badges as interactive elements; they are purely presentational.