Badge

BadgeSecondaryDestructiveOutline

PillSecondaryDestructiveOutline

Verified 8 99 20000+

---
import { BadgeCheckIcon, XIcon } from '@lucide/astro';

import { Badge } from '@bejamas/registry/ui/badge';
---

<div class="flex flex-col items-center gap-3">
  <div class="flex w-full flex-wrap gap-3">
    <Badge>Badge</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="destructive">Destructive</Badge>
    <Badge variant="outline">Outline</Badge>
  </div>
 <div class="flex w-full flex-wrap gap-3">
    <Badge shape="pill">Pill</Badge>
    <Badge shape="pill" variant="secondary">Secondary</Badge>
    <Badge shape="pill" variant="destructive">Destructive</Badge>
    <Badge shape="pill" variant="outline">Outline <XIcon class="size-6" /></Badge>
  </div>
  <div class="flex w-full flex-wrap gap-3">
    <Badge
      variant="secondary"
      class="bg-blue-500 text-white dark:bg-blue-600 border-blue-600"
    >
      <BadgeCheckIcon class="size-3" />
      Verified
    </Badge>
    <Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
        8
    </Badge>
    <Badge
      class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
      variant="destructive"
    >
      99
    </Badge>
    <Badge
      class="h-5 min-w-5 rounded-full px-1.5 text-xs font-mono tabular-nums"
      variant="outline"
    >
      20000+
    </Badge>
  </div>
</div>

View CodeHide Code

Installation

bun

bunx bejamas add badge

npm

npx bejamas add badge

pnpm

pnpm dlx bejamas add badge

yarn

yarn dlx bejamas add badge

Usage

---
import { Badge } from '@bejamas/ui/components/badge';
---

<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>

Props

Prop	Type	Default
as	HTMLTag	"span"
variant	"default" | "secondary" | "destructive" | "outline"	"default"
class	string	""
shape	"default" | "pill"	"default"
size	"default" | "sm"	"default"