Badge

Preview

Badge Secondary Destructive Outline

Pill Secondary Destructive Outline

Verified 8 99 20000+

Source

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

import Badge from '@bejamas/ui/components/Badge.astro';
---

<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 className="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 className="size-3" />
      Verified
    </Badge>
    <Badge className="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>

Installation

CLI

bun

 bunx bejamas add badge

npm

 npx bejamas add badge

pnpm

 pnpm dlx bejamas add badge

yarn

 yarn dlx bejamas add badge

Manual

---
/**
 * @component Badge
 * @description A small label for status, categories, or counts.
 *
 * @preview
 *
 * <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 className="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 className="size-3" />
 *       Verified
 *     </Badge>
 *     <Badge className="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>
 *
 */

import type { HTMLTag, Polymorphic } from "astro/types";
import { cva } from "class-variance-authority";
import { cn } from "@bejamas/ui/lib/utils";

type Props = {
  as?: HTMLTag;
  variant?: "default" | "secondary" | "destructive" | "outline";
  class?: string;
  shape?: "default" | "pill";
  size?: "default" | "sm";
};

const {
  as = "span",
  variant = "default",
  class: className = "",
  shape = "default",
  size = "default",
  ...props
} = Astro.props;

const badgeVariants = cva(
  [
    "badge inline-flex items-center justify-center border px-2 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0",
    "[&>svg]:size-3 gap-1 [&>svg]:pointer-events-none",
    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
    "transition-[color,box-shadow] overflow-hidden",
  ],
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary:
          "border-border bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive:
          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "text-foreground border [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
      },
      shape: {
        default: "rounded-xs",
        pill: "rounded-full",
      },
      size: {
        default: "text-sm h-6",
        sm: "text-xs h-5",
      },
    },
    defaultVariants: {
      variant: "default",
      shape: "default",
      size: "default",
    },
  },
);

const Tag = as;
const classes = cn(badgeVariants({ variant, shape, size, className }));
---

<Tag class={classes} {...props}>
  <slot />
</Tag>

Props

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