1. Documentation
  3. Components
  5. Badge
ReadmeGitHub
  • Introduction
  • Quickstart
  • Text
  • Code
  • Lists
  • Tables
  • Accordion
  • Badge
  • Button
  • Callout
  • Code Block
  • Code Block Group
  • Code Snippet
  • Columns
  • Custom components
  • GitHub
  • Hover Card
  • Mermaid
  • Properties
  • Related Topics
  • Tabs
  • Tree
  • Images
  • Video
  • Files
  • Grain
  • Shade
  • Moss
  • Configuration
  • Content
  • Navigation
  • Site Identity
  • Appearance
  • Header and Footer
  • Fonts
  • Icons
  • Integrations
  • Search
  • OpenAPI
  • AI Chat
  • React Router
  • Astro
  • Next.js
  • Cloudflare
  • Vercel
  • robots.txt
  • sitemap.xml
  • JSON-LD
  • rss.xml
  • llms.txt
  • llms-full.txt
  • .md endpoints

Badge

Add a compact status, category, or metadata label to MDX content.

Loading documentation…

Accordion< PreviousButtonNext >

Powered by heyo

On this page

Choose a semantic variantCreate a compact release statusProperties
New
<Badge variant="secondary">New</Badge>

Badge is a small inline label for communicating status, type, or category. Use it next to a heading, a version number, or a short piece of metadata where a full callout would add too much visual weight.

Choose a semantic variant

Use the default style for the primary label, secondary for neutral metadata, and destructive for an error or breaking-change status. outline, ghost, and link work well when the badge should recede into surrounding prose.

Stable v2.0 Deprecated

Keep badge text short and make meaning clear in the surrounding sentence. A badge adds emphasis; it should not be the only way readers learn about an important state.

Create a compact release status

Combine short labels to make a lightweight release summary. The surrounding text still explains the state, while the badges make it easy to scan.

v2.4Public betaUpdated todayDocs ready
<div className="flex flex-wrap items-center gap-2"><Badge>v2.4</Badge><Badge variant="secondary">Public beta</Badge><Badge variant="outline">Updated today</Badge><Badge variant="ghost">Docs ready</Badge></div>

Properties

variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link"optional

Selects the visual treatment. It defaults to default.

childrenReactNodeoptional

The compact label displayed inside the badge.

classNamestringoptional

Extra classes applied to the rendered badge.