Badge

A glassmorphic badge component with backdrop blur effect, perfect for labels, tags, and helper text.

Preview

Badge

Installation

bash

npx shadcn@latest add @zerodrive/badge

Then import the component:

tsx

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

Variants

The badge supports 3 different visual variants.

DefaultOutlineSolid

tsx

<Badge variant="default">Default</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="solid">Solid</Badge>

Color Palettes

Apply different color palettes to customize the badge text color.

LimePinkVioletPurpleBlue GrayGray

tsx

<Badge palette="lime">Lime</Badge>
<Badge palette="pink">Pink</Badge>
<Badge palette="violet">Violet</Badge>
<Badge palette="purple">Purple</Badge>
<Badge palette="blue-gray">Blue Gray</Badge>
<Badge palette="gray">Gray</Badge>

Solid Variant with Palettes

LimePinkVioletPurpleBlue GrayGray

Props

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "solid"`	`"default"`	The visual style variant of the badge.
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	`"blue-gray"`	The color palette for the badge text.
`className`	`string`	-	Additional CSS classes to apply.

Examples

As Labels

NewSaleFeatured

tsx

<Badge palette="lime">New</Badge>
<Badge palette="pink">Sale</Badge>
<Badge palette="purple">Featured</Badge>

Status Indicators

ActiveInactiveError

tsx

<Badge variant="solid" palette="lime">Active</Badge>
<Badge variant="solid" palette="gray">Inactive</Badge>
<Badge variant="solid" palette="pink">Error</Badge>

Helper Text

Password strength:Weak

Password strength:Strong

tsx

<div className="flex items-center gap-2">
  <span className="text-sm">Password strength:</span>
  <Badge palette="pink">Weak</Badge>
</div>
<div className="flex items-center gap-2">
  <span className="text-sm">Password strength:</span>
  <Badge palette="lime">Strong</Badge>
</div>