Badge

A small status label with default, secondary, destructive, and outline variants.

The Badge is a compact label for statuses, counts, and tags.

Preview

Default
Secondary
Destructive
Outline

Usage

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/badge.json

Properties

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline""default"Visual style of the badge.
classNamestringAdditional CSS classes.