Badge

Displays a badge or a component that looks like a badge.

Preview

BadgeSecondaryOutlineDestructive

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/badge.json

Usage

tsx
5 lines
1
2
3
4
5
import { Badge } from "@/components/ui/badge"

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

Variants

Default

Default

Secondary

Secondary

Outline

Outline

Destructive

Destructive

Custom Colors

SuccessWarningInfoNew

Props

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "destructive"defaultThe visual style of the badge
classNamestringAdditional CSS classes