Components / Data display
Badge
Displays a status or compact label.
Preview
Project status
1import { Badge } from "@/components/ui/badge"2
3export function BadgeDemo() {4 return <Badge variant="default">Project status</Badge>5}secondary
The secondary style of this component.
Project status
1import { Badge } from "@/components/ui/badge"2
3export function BadgeDemo() {4 return <Badge variant="secondary">Project status</Badge>5}success
The success style of this component.
Project status
1import { Badge } from "@/components/ui/badge"2
3export function BadgeDemo() {4 return <Badge variant="success">Project status</Badge>5}warning
The warning style of this component.
Project status
1import { Badge } from "@/components/ui/badge"2
3export function BadgeDemo() {4 return <Badge variant="warning">Project status</Badge>5}destructive
The destructive style of this component.
Project status
1import { Badge } from "@/components/ui/badge"2
3export function BadgeDemo() {4 return <Badge variant="destructive">Project status</Badge>5}outline
The outline style of this component.
Project status
1import { Badge } from "@/components/ui/badge"2
3export function BadgeDemo() {4 return <Badge variant="outline">Project status</Badge>5}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/badgeUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.