Badge

Displays a badge for labeling or highlighting content.

Badge

badge-demo.tsx

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

Installation

npx shadcn@latest add @9ui/badge

Imports

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

Anatomy

<Badge />

badge-outline-demo.tsx

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

badge-secondary-demo.tsx

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

badge-success-demo.tsx

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

badge-warning-demo.tsx

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

badge-info-demo.tsx

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

badge-danger-demo.tsx

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