badge

1import { mergeProps } from '@base-ui/react/merge-props';
2import { useRender } from '@base-ui/react/use-render';
3import { cva, type VariantProps } from 'class-variance-authority';
4 
5import { cn } from '@/registry/lib/utils';
6 
7type Theme = 'gray' | 'accent' | 'destructive' | (string & {});
8 
9/**
10 * Slots: badge
11 */
12const badgeVariants = cva(
13  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[min(var(--radius),max(8px,calc(var(--radius)-10px)))] border border-transparent whitespace-nowrap font-medium text-ui-label focus-visible:outline-2 focus-visible:outline-focus [&>svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3",
14  {
15    variants: {
16      variant: {
17        solid:
18          'bg-fill text-on-fill focus-visible:outline-focus-fill focus-visible:outline-offset-2',
19        soft: 'bg-ui',
20        outline: 'border-line-ui bg-transparent',
21        surface: 'border-line-ui bg-ui/40',
22      },
23      size: {
24        default: 'min-w-4.5 h-5 px-1.5 text-xs',
25        icon: 'size-5 p-0 text-xs',
26      },
27      theme: {
28        gray: '',
29        accent: '',
30        destructive: '',
31        warning: '',
32        success: '',
33      },
34    },
35    defaultVariants: {
36      variant: 'soft',
37      size: 'default',
38      theme: 'gray',
39    },
40  }
41);
42 
43function Badge({
44  className,
45  variant = 'soft',
46  size = 'default',
47  theme = 'gray',
48  render,
49  ...props
50}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
51  return useRender({
52    defaultTagName: 'span',
53    props: mergeProps<'span'>(
54      {
55        className: cn(badgeVariants({ variant, size, theme }), className),
56        ...({
57          'data-slot': 'badge',
58          'data-variant': variant,
59          'data-theme': theme !== 'gray' ? theme : undefined,
60        } as React.HTMLAttributes<HTMLSpanElement>),
61      },
62      props
63    ),
64    render,
65    state: {
66      slot: 'badge',
67      variant,
68    },
69  });
70}
71 
72export { Badge, badgeVariants };