Badge

Displays a small badge or pill with a label.

Installation

Import the component:

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

Basic Usage

Different variants of the Badge component to convey different meanings.

Default

Sizes

The Badge component comes in three sizes to suit different use cases.

Default

Variants

Different visual styles to match your UI needs.

Default

Props

Prop
Type
Default
Description
variant
'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link'
—

The visual style of the badge

size
'default' | 'sm' | 'lg'
—

The size of the badge

className
string
—

Additional CSS classes to apply

childrenRequired
ReactNode
—

The content to display inside the badge