Badge

Visual indicators for status, labels, and category metadata with support for glassmorphism and icons.

Preview & Interactive Laboratory

Variants Grid

DefaultSecondaryOutlineDestructiveGlass VariantGhost

Status & Icons

Success Pending Error Secure

Premium Styles

Featured ComponentNew ReleaseInteractive Hover

Usage & Implementation

<Badge variant="glass" className="px-3 py-1">
  <Zap className="h-3 w-3 mr-1" />
  Premium
</Badge>
React / Tailwind

Granular Customization

1

Badge Shell

The main background and text container.

className={`className`}
2

Status Colors

Apply custom colors for specific business logic.

className={`bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-sm shadow-emerald-400/20`}
3

Glass Effect

Use the glass variant for a modern, translucent look.

className={`variant='glass'`}

API Reference (Props)

PropTypeDefaultDescription
variant'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'glass''default'The visual style of the badge.
asChildbooleanfalseWhether to render the badge as its child element.