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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 33x 33x 23971x | import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-primary bg-transparent text-primary shadow hover:bg-primary/20",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
muted:
"border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
destructive:
"border-transparent bg-rose-800 text-destructive-foreground shadow hover:bg-rose-800/80",
outline: "text-foreground",
ghost:
"border-transparent hover:bg-accent hover:text-accent-foreground",
pending: "border-transparent bg-amber-600 text-muted-foreground",
},
size: {
xs: "text-xs",
sm: "text-sm",
},
borderRadius: {
round: "rounded-full text-nowrap",
square: "rounded-2",
},
},
defaultVariants: {
variant: "default",
size: "xs",
borderRadius: "square",
},
},
);
export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}
// Forward ref to the root div element
const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
({ className, variant, borderRadius, size, ...props }, ref) => {
return (
<div
ref={ref} // Forward the ref to the div element (added to allow ToolTipCover to attach a ref to the Badge).
className={cn(
badgeVariants({ variant, size, borderRadius }),
className,
)}
{...props}
/>
);
},
);
export { Badge, badgeVariants };
|