Badge

Data Display

macOS status pills (default, secondary, success, warning, destructive, outline).

Installation

$npx shadcn-macos@latest add badge

Default Blue

Secondary

Success

Syncing

Error

v1.5.0

<Badge />— macOS status pill badge with subtle glass borders and vibrant tone variants.

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "outline" \| "success" \| "warning"	"default"	The badge color theme.
className	string	—	Custom CSS class names.
children	React.ReactNode	—	Badge text or icons.