Badge

The Badge component is a versatile, customizable element used to highlight and categorize content. It's perfect for displaying status, labels, counts, or tags in your application.

Playground

Customize the Badge properties to see different variations.

Example

Customize

Installation

pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/badge.json

Basic Usage

import { Badge } from "@/components/ui/badge"
<Badge>Example</Badge>

Examples

With Icons

Completed
Rejected
Information
Warning
Verified

Interactive Badges

React
Next.js
TypeScript
React
Favorited
Next.js
Favorite
TypeScript
Favorite

Notification Badges

5
New

Custom Styling

Gradient
Shadow
Animated
Dashed Border

Badge Props

PropTypeDefault
variant
enum"default"
size
enum"sm"
shape
enum"pill"
leftElement
React.ReactElement—
rightElement
React.ReactElement—
disabled
booleanfalse