Badge

New

<div class="flex flex-wrap gap-2">
  <Badge>New</Badge>
  <Badge variant="secondary">Popular</Badge>
  <Badge variant="destructive">Sold out</Badge>
  <Badge variant="outline">Draft</Badge>
</div>

Installation

npx bearnie add badge

Usage

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

<Badge variant="default | secondary | destructive | outline | success | warning | info">Badge</Badge>

Examples

Variants

Default

Secondary

Destructive

Outline

<div class="flex flex-wrap gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

Status variants

Completed

Pending

In review

<div class="flex flex-wrap gap-2">
  <Badge variant="success">Completed</Badge>
  <Badge variant="warning">Pending</Badge>
  <Badge variant="info">In review</Badge>
</div>

With icon

Use data-icon="inline-start" or data-icon="inline-end" to position icons.

Pro feature

Featured

Coming soon

<div class="flex flex-wrap gap-2">
  <Badge variant="warning">
    <Zap data-icon="inline-start" />
    Pro feature
  </Badge>
  <Badge variant="secondary">
    <Star data-icon="inline-start" />
    Featured
  </Badge>
  <Badge variant="info">
    <Clock data-icon="inline-start" />
    Coming soon
  </Badge>
</div>

With spinner

Syncing

Processing

<div class="flex flex-wrap gap-2">
  <Badge variant="info">
    <Spinner class="size-3" data-icon="inline-start" />
    Syncing
  </Badge>
  <Badge variant="success">
    Processing
    <Spinner class="size-3" data-icon="inline-end" />
  </Badge>
</div>

Link

Use the href prop to render a badge as a link.

View docs

<Badge href="/docs" variant="outline">
  View docs
  <ExternalLink data-icon="inline-end" />
</Badge>

Anatomy

Badge - A single inline element for labels

Props

Prop	Type	Default	Description
variant	”default” \| “secondary” \| “destructive” \| “outline” \| “success” \| “warning” \| “info"	"default”	Visual style variant
href	string	-	Renders badge as a link
class	string	-	Additional CSS classes