Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 9x 9x 9x 139x | import type { HTMLAttributes } from "react";
import { cn } from "@/utils/class-name";
const BADGE_VARIANT_CLASSES = {
neutral: "border-white/20 bg-white/8 text-white/80 light:border-slate-300 light:bg-slate-100 light:text-slate-600",
subtle: "border-white/16 bg-white/5 text-white/62 light:border-slate-200 light:bg-slate-50 light:text-slate-500",
brand: "border-violet-400/35 bg-violet-500/16 text-violet-200 light:border-violet-300 light:bg-violet-50 light:text-violet-700",
info: "border-cyan-400/30 bg-cyan-500/14 text-cyan-100 light:border-cyan-300 light:bg-cyan-50 light:text-cyan-700",
success: "border-emerald-400/35 bg-emerald-500/15 text-emerald-100 light:border-emerald-300 light:bg-emerald-50 light:text-emerald-700",
warning: "border-amber-300/35 bg-amber-500/15 text-amber-100 light:border-amber-300 light:bg-amber-50 light:text-amber-700",
danger: "border-rose-400/35 bg-rose-500/15 text-rose-100 light:border-rose-300 light:bg-rose-50 light:text-rose-700",
} as const;
const BADGE_SIZE_CLASSES = {
sm: "px-2 py-0.5 text-[10px]",
md: "px-2.5 py-0.5 text-[11px]",
lg: "px-3 py-1 text-xs",
} as const;
type BadgeVariant = keyof typeof BADGE_VARIANT_CLASSES;
type BadgeSize = keyof typeof BADGE_SIZE_CLASSES;
export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
variant?: BadgeVariant;
size?: BadgeSize;
};
export function Badge({
variant = "neutral",
size = "md",
className,
...props
}: BadgeProps) {
return (
<span
className={cn(
"inline-flex rounded-full border font-dm-sans font-medium",
BADGE_VARIANT_CLASSES[variant],
BADGE_SIZE_CLASSES[size],
className,
)}
{...props}
/>
);
}
|