Display

Badge

Small label for status, counts, or categories.

Available inreactangular

Preview

Live previewreal component

Default

Secondary

Outline

Destructive

Install

TerminalBash

$ npx @mcp-elements/cli add badge

Usage

badge-example.tsxTSX

import { Badge } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="flex gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  )
}

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'outline' \| 'destructive'`	`'default'`	Visual style of the badge