Badge

Pill-shaped labels with glassmorphic styling for status, categories, and file formats

Badge

Versatile badge components for displaying labels, status indicators, and file format tags. Features glassmorphic styling with backdrop blur and gradient-masked borders.

Usage

import { Badge, BadgeWithDot, FormatBadge } from "@/components/ui/badge";

export default function Example() {
  return (
    <div className="flex gap-4">
      <Badge>New</Badge>
      <BadgeWithDot dotStatus="success">Active</BadgeWithDot>
      <FormatBadge>DOC</FormatBadge>
    </div>
  );
}

Components

Badge

The base badge component with glassmorphic styling.

BadgeWithDot

Badge with a colored dot indicator for status display.

FormatBadge

Specialized badge for file format labels (DOC, MP4, PDF, etc.) with centered text and minimum width.

Props

Badge Props

Prop	Type	Default	Description
variant	"default" | "outline" | "solid" | "subtle"	"default"	Visual style variant
size	"sm" | "default" | "lg"	"default"	Badge size

BadgeWithDot Props

Prop	Type	Default	Description
size	"sm" | "default" | "lg"	"default"	Badge size
dotColor	string	-	Custom dot color (CSS value)
dotStatus	"default" | "success" | "warning" | "error" | "info"	"default"	Predefined status color

FormatBadge Props

Prop	Type	Default	Description
size	"sm" | "default" | "lg"	"default"	Badge size

Variants

Style Variants

// Default - glassmorphic with blur and gradient border
<Badge variant="default">Default</Badge>

// Outline - transparent with border
<Badge variant="outline">Outline</Badge>

// Solid - 10% opacity background
<Badge variant="solid">Solid</Badge>

// Subtle - 5% opacity background
<Badge variant="subtle">Subtle</Badge>

Size Variants

// Small - 8px radius, xs text
<Badge size="sm">Small</Badge>

// Default - 12px radius, sm text
<Badge size="default">Default</Badge>

// Large - 16px radius, base text
<Badge size="lg">Large</Badge>

Examples

Status Badges

<div className="flex gap-3">
  <BadgeWithDot dotStatus="success">Online</BadgeWithDot>
  <BadgeWithDot dotStatus="warning">Away</BadgeWithDot>
  <BadgeWithDot dotStatus="error">Offline</BadgeWithDot>
  <BadgeWithDot dotStatus="info">Busy</BadgeWithDot>
</div>

Custom Dot Color

<BadgeWithDot dotColor="#8b5cf6">
  Custom Purple
</BadgeWithDot>

File Format Labels

<div className="flex gap-2">
  <FormatBadge>DOC</FormatBadge>
  <FormatBadge>MP4</FormatBadge>
  <FormatBadge>PDF</FormatBadge>
  <FormatBadge>PNG</FormatBadge>
</div>

Category Tags

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

With Icons

<Badge>
  <CheckIcon className="w-3 h-3 mr-1" />
  Verified
</Badge>

Notification Count

<Badge variant="solid" size="sm">
  99+
</Badge>

Design Tokens

Dimensions

Size	Padding	Border Radius	Min Width (Format)
sm	8px 8px	var(--radius-xs) (8px)	40px
default	4px 12px	var(--radius-sm) (12px)	52px
lg	6px 16px	var(--radius-lg) (16px)	64px

Effects

Token	Value	Description
Background	var(--gradient-overlay-170)	Glassmorphic gradient
Blur	var(--blur-sm) (6px)	Backdrop blur
Border	var(--neutral-2-10)	Gradient-masked border
Inset shadow	inset 0px 0px 8px rgba(248,248,248,0.25)	Inner glow

Status Colors

Status	Token	Color
default	var(--neutral-2-40)	rgba(248, 248, 248, 0.4)
success	var(--color-success)	#4ade80
warning	var(--color-warning)	#fbbf24
error	var(--color-error)	#f87171
info	var(--color-info)	#60a5fa

Found In

• Bento10 - Category labels
• Bento18 - File type indicators
• Bento19 - Price tags
• Bento20 - Format badges (DOC, MP4)

Accessibility

• Uses semantic <span> element
• Color is not the only indicator (text labels included)
• Sufficient color contrast for all variants
• Status dots include text labels for screen readers