Badge

Name: Helptribe Dubai
Address: Marina Plaza, Level 28, Dubai Marina, Dubai, AE
Telephone: +971 4 456 7890

Status indicators for displaying state, category, or count. Compact and lightweight for inline use.

Installation

$ npx shadcn@latest add badge

Preview

Default

Variants

DefaultPrimarySuccessWarningDestructiveOutline

Usage (React/TSX)

import { Badge } from "@/components/ui/badge"

export default function Example() {
  return (
    <div className="flex gap-3">
      <Badge variant="success">Active</Badge>
      <Badge variant="warning">Pending</Badge>
      <Badge variant="destructive">Error</Badge>
    </div>
  )
}

Usage (HTML/CSS)

<span class="badge badge-success">Active</span>

<style>
  .badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 10px;
  }
  .badge-success {
    color: #166534;
    background: #dcfce7;
  }
</style>

Props

Prop	Type	Default	Description
variant	"default" \| "primary" \| "success" \| "warning" \| "destructive" \| "outline"	"default"	The visual style of the badge.
className	string	—	Additional CSS classes to apply.
children	ReactNode	—	Content inside the badge.

Design Notes

Use semantic variants: success for active, warning for pending, destructive for errors.
Keep badges short — single word or short phrase max.
Outline variant for neutral, non-emphasized states.