Badge
A small label for status, categories, or counts.
Badge Secondary Destructive Outline
Pill Secondary Destructive Outline
Verified
8
99
20000+
---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
Section titled “Installation” bunx bejamas add badge npx bejamas add badge pnpm dlx bejamas add badge yarn dlx bejamas add badge---/** * @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>| Prop | Type | Default |
|---|---|---|
as | HTMLTag | "span" |
variant | "default" | "secondary" | "destructive" | "outline" | "default" |
class | string | "" |
shape | "default" | "pill" | "default" |
size | "default" | "sm" | "default" |