badge.tsx

1import * as React from 'react'
2import { cva, type VariantProps } from 'class-variance-authority'
3
4import { cn } from '@/lib/utils'
5
6const badgeVariants = cva(
7	'inline-flex items-center rounded-md 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',
8	{
9		variants: {
10			variant: {
11				default:
12					'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
13				secondary:
14					'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
15				destructive:
16					'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
17				outline: 'text-foreground',
18			},
19		},
20		defaultVariants: {
21			variant: 'default',
22		},
23	},
24)
25
26export interface BadgeProps
27	extends React.HTMLAttributes<HTMLDivElement>,
28		VariantProps<typeof badgeVariants> {}
29
30function Badge({ className, variant, ...props }: BadgeProps) {
31	return (
32		<div className={cn(badgeVariants({ variant }), className)} {...props} />
33	)
34}
35
36export { Badge, badgeVariants }
37