UNPKG

@vela-ui/react

Version:

Vela UI React components

41 lines (38 loc) 1.28 kB
import { focusRing } from "./chunk-2FWUIDJB.mjs"; // src/components/badge.tsx import { tv } from "tailwind-variants"; import { jsx } from "react/jsx-runtime"; var badgeVariants = tv({ extend: focusRing, base: "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] [&>svg]:pointer-events-none [&>svg]:size-3", variants: { variant: { default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent", secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent", destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 border-transparent text-white", outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground" } }, defaultVariants: { variant: "default" } }); function Badge({ className, variant, ...props }) { return /* @__PURE__ */ jsx( "span", { "data-slot": "badge", className: badgeVariants({ variant, className }), ...props } ); } export { badgeVariants, Badge };