Badge

Six badge variants — default, secondary, destructive, outline, ghost, and link — with optional leading or trailing icons, built on class-variance-authority and Radix Slot.

badgelabelstatustagcva

Open preview in new tab

How do I install the Badge component?

Run the command below in a project with the shadcn CLI. It copies the component source into your repo and installs its dependencies.

npx shadcn@latest add https://www.saasuji.com/r/badge.json

Dependencies

Also available as a markdown reference for AI agents: /components/badge.md

Related components

Button

Eight variants and twelve sizes with loading, disabled, and icon states, built on class-variance-authority and Radix Slot.

Button Group

A horizontal or vertical group of buttons with shared edges, plus separator and text primitives for toolbar-style and segmented layouts.