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

import Badge from "@/components/ui/badge/Badge.astro";

Usage

import { Badge } from "@/components/ui/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