diff options
author | polwex <polwex@sortug.com> | 2025-05-29 16:25:31 +0700 |
---|---|---|
committer | polwex <polwex@sortug.com> | 2025-05-29 16:25:31 +0700 |
commit | a03c92dc82ad527d7da6bbaa3c43000e2e5f0e69 (patch) | |
tree | 9a47cae250d043d31f751c1383bdcbe09d4bc9d8 /src/components/ui/badge.tsx | |
parent | 7de09570c0d7907424c30f492207e80ff69e4061 (diff) |
better better
Diffstat (limited to 'src/components/ui/badge.tsx')
-rw-r--r-- | src/components/ui/badge.tsx | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..12daad7 --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes<HTMLDivElement>, + VariantProps<typeof badgeVariants> {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( + <div className={cn(badgeVariants({ variant }), className)} {...props} /> + ) +} + +export { Badge, badgeVariants }
\ No newline at end of file |