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 https://9ui.dev/r/badge.json

Imports

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

Anatomy

<Badge />

badge-outline.tsx

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

badge-secondary.tsx

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

badge-success.tsx

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

badge-warning.tsx

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

badge-info.tsx

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

badge-danger.tsx

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