Badge

Displays a badge or a component that looks like a badge.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/badge.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Variants

DefaultSecondaryDestructiveOutlineGhostLink

With Icons

Verified 12 Tracks Error Settings

Use Cases

NewDraftv2.1.0Overdue Paid3 pending

Usage

How to use this component in your code.

{/* Variants */}
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>
<Badge variant="link">Link</Badge>

{/* With Icons */}
<Badge><Check /> Verified</Badge>
<Badge variant="destructive"><AlertCircle /> Error</Badge>