Badge

Displays a badge or a component that looks like a badge.

DefaultSecondaryOutlineDestructive

Installation

npm i @radix-ui/react-slot

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

export function BadgeDemo() {
  return <Badge variant="secondary">Badge</Badge>
}

Default

Secondary

Outline

Destructive

Custom Color

Custom Shape

Custom Border

Check

Completed

Info

Information

Warning

Link Badge

Secondary Link

Button Badge

Prop	Type	Default	Description
variant	'default' \| 'secondary' \| 'destructive' \| 'outline'	'default'	The visual style of the badge.
className	string	undefined	Additional CSS classes to apply to the badge.
asChild	boolean	false	When true, the badge will be rendered as its child element. Useful for links and buttons.