Badge

Inline status badge with five variants including electric accent.

DefaultSecondaryOutlineSuccessErrorWarning

Code

import { Badge } from "@/components/ui/badge"

export default function Example() {
  return <Badge>New</Badge>
}

Installation

$npx particleui-cli add badge

Usage

TSX

import { Badge } from "@/components/ui/badge"

export default function Example() {
  return <Badge>New</Badge>
}

Examples

Variants

Use variant to communicate intent.

TSX

import { Badge } from "@/components/ui/badge"

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

Props

Prop	Type	Default	Required
variant	"default" \| "secondary" \| "outline" \| "success" \| "destructive" \| "warning"	`"default"`	no

Details

Source filecomponents/ui/badge.tsx

Typeui

Categoriesbadges, core

npm dependenciestailwind-variants

Registry deps

Claude skill—