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>
}