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

Usage

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

Examples

Outline

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

Secondary

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

Success

Success
Success
badge-success.tsx
import { Badge, BadgeIndicator } from "@/components/ui/badge"
 
export function BadgeSuccess() {
	return (
		<div className="flex items-center gap-2">
			<Badge variant="success">Success</Badge>
			<Badge variant="outline">
				<BadgeIndicator variant="success" />
				Success
			</Badge>
		</div>
	)
}

Warning

Warning
Warning
badge-warning.tsx
import { Badge, BadgeIndicator } from "@/components/ui/badge"
 
export function BadgeWarning() {
	return (
		<div className="flex items-center gap-2">
			<Badge variant="warning">Warning</Badge>
			<Badge variant="outline">
				<BadgeIndicator variant="warning" />
				Warning
			</Badge>
		</div>
	)
}

Info

Info
Info
badge-info.tsx
import { Badge, BadgeIndicator } from "@/components/ui/badge"
 
export function BadgeInfo() {
	return (
		<div className="flex items-center gap-2">
			<Badge variant="info">Info</Badge>
			<Badge variant="outline">
				<BadgeIndicator variant="info" />
				Info
			</Badge>
		</div>
	)
}

Danger

Danger
Danger
badge-danger.tsx
import { Badge, BadgeIndicator } from "@/components/ui/badge"
 
export function BadgeDanger() {
	return (
		<div className="flex items-center gap-2">
			<Badge variant="danger">Danger</Badge>
			<Badge variant="outline">
				<BadgeIndicator variant="danger" />
				Danger
			</Badge>
		</div>
	)
}