GitHub

Badge

Displays a badge for labeling or highlighting content.

badge-demo.tsx
import { Badge } from "@/components/ui/badge"
 
export function BadgeDemo() {
	return <Badge>Badge</Badge>
}

Installation

npx shadcn@latest add @9ui/badge

Usage

Imports
import { Badge } from "@/components/ui/badge"
Anatomy
<Badge />

Examples

Outline

badge-outline.tsx
import { Badge } from "@/components/ui/badge"
 
export function BadgeOutline() {
	return <Badge variant="outline">Outline</Badge>
}

Secondary

badge-secondary.tsx
import { Badge } from "@/components/ui/badge"
 
export function BadgeSecondary() {
	return <Badge variant="secondary">Secondary</Badge>
}

Success

badge-success.tsx
import { Badge } from "@/components/ui/badge"
 
export function BadgeSuccess() {
	return <Badge variant="success">Success</Badge>
}

Warning

badge-warning.tsx
import { Badge } from "@/components/ui/badge"
 
export function BadgeWarning() {
	return <Badge variant="warning">Warning</Badge>
}

Info

badge-info.tsx
import { Badge } from "@/components/ui/badge"
 
export function BadgeInfo() {
	return <Badge variant="info">Info</Badge>
}

Danger

badge-danger.tsx
import { Badge } from "@/components/ui/badge"
 
export function BadgeDanger() {
	return <Badge variant="danger">Danger</Badge>
}