Back to components
Playground

Badge Component

Variants

DefaultPrimarySecondarySuccessWarningError

Sizes

SmallMediumLarge

With Icons

MailStarSuccess

Usage Examples

Status:OnlinePendingOffline
Tags:NewHotFeatured

Usage Examples

Badge Variants

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

<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>

Badge Sizes

<Badge size="sm" variant="primary">Small</Badge>
<Badge size="md" variant="primary">Medium</Badge>
<Badge size="lg" variant="primary">Large</Badge>

Badge with Icons

import { Mail, Star } from "lucide-react";

<Badge icon={<Mail className="h-3 w-3" />} variant="primary">
  Mail
</Badge>
<Badge icon={<Star className="h-3 w-3" />} variant="secondary">
  Star
</Badge>