Badge

A small visual indicator for labeling, categorizing, or displaying status information.

#Installation

npx @dinachi/cli@latest add badge

tsx

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

A basic badge

Badge

Different badge variants for various contexts

Default

Secondary

Destructive

Outline

Success

Warning

Info

Badges in different sizes

Small

Default

Large

Prop	Type	Default	Description
variant	'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning' \| 'info'	'default'	The visual style variant of the badge
size	'sm' \| 'default' \| 'lg'	'default'	The size of the badge
rounded	'default' \| 'sm' \| 'md' \| 'lg' \| 'none'	'default'	The border radius of the badge
render	ReactElement	—	Custom render prop for composition (Base UI pattern)
interactive	boolean	false	Whether the badge should be interactive (clickable)
icon	ReactNode	—	Icon to display before the content
dismissible	boolean	false	Whether to show a close button
onDismiss	() => void	—	Callback when close button is clicked