Badge

Display status indicators, labels, and tags

Installation

Install the badge component using the shadcn CLI:

npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/badge.json

Examples

Variants

Six different badge variants for various use cases

Default

Secondary

Outline

Destructive

Success

Warning

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>

With Icons

Badges can include icons for enhanced visual communication

Success

Error

Warning

Info

import { Check, X, AlertCircle, Info } from "lucide-react";

<Badge className="gap-1">
  <Check className="h-3 w-3" />
  Success
</Badge>
<Badge variant="destructive" className="gap-1">
  <X className="h-3 w-3" />
  Error
</Badge>
<Badge variant="warning" className="gap-1">
  <AlertCircle className="h-3 w-3" />
  Warning
</Badge>
<Badge variant="secondary" className="gap-1">
  <Info className="h-3 w-3" />
  Info
</Badge>

Status Indicators

Common status badge patterns

Active:

Active

Pending:

Pending

Inactive:

Inactive

Blocked:

Blocked

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="secondary">Inactive</Badge>
<Badge variant="destructive">Blocked</Badge>

With Buttons

Badges can be combined with buttons for notifications

<Button>
  Messages
  <Badge className="ml-2">12</Badge>
</Button>
<Button variant="secondary">
  Notifications
  <Badge variant="destructive" className="ml-2">3</Badge>
</Button>
<Button variant="outline">
  Updates
  <Badge variant="secondary" className="ml-2">new</Badge>
</Button>

As Tags

Use badges to display categories or tags

Technologies:

React

TypeScript

Tailwind CSS

Next.js

Categories:

Design

Development

Marketing

<div className="flex flex-wrap gap-2">
  <Badge variant="outline">React</Badge>
  <Badge variant="outline">TypeScript</Badge>
  <Badge variant="outline">Tailwind CSS</Badge>
  <Badge variant="outline">Next.js</Badge>
</div>

<div className="flex flex-wrap gap-2">
  <Badge variant="secondary">Design</Badge>
  <Badge variant="secondary">Development</Badge>
  <Badge variant="secondary">Marketing</Badge>
</div>

Custom Sizes

Adjust badge size with custom classes

Small

Default

Large

Extra Large

<Badge className="text-xs px-2 py-0">Small</Badge>
<Badge>Default</Badge>
<Badge className="text-sm px-3 py-1">Large</Badge>
<Badge className="text-base px-4 py-1.5">Extra Large</Badge>

API Reference

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "outline" \| "destructive" \| "success" \| "warning"	"default"	Visual style variant
className	string	-	Additional CSS classes
children	ReactNode	-	Badge content (text, icons, etc.)

Variant Guide

default

Primary badge for important information, notifications, or counts

secondary

Secondary information, categories, or less prominent labels

outline

Tags, chips, or when you need a more subtle appearance

destructive

Errors, warnings, blocked status, or critical notifications

success

Success states, active status, or positive indicators

warning

Pending status, caution indicators, or items needing attention

Accessibility

• Badges are rendered as div elements with semantic content
• Use descriptive text that conveys meaning without relying solely on color
• When using badges for status, consider adding aria-label for clarity
• Icons should have appropriate sizing (h-3 w-3) for readability
• Ensure sufficient color contrast for text readability
• Avoid using badges as interactive elements; use buttons instead