Badge

1import { Slot } from '@radix-ui/react-slot';
2import { type VariantProps, cva } from 'class-variance-authority';
3import * as React from 'react';
4 
5import { cn } from '@/lib/utils';
6 
7const badgePadding = {
8  icon: { sm: 'pl-1 pr-2', default: 'pl-1 pr-2', lg: 'pl-1 pr-2' },
9  dot: { sm: 'pl-1 pr-2', default: 'px-2', lg: 'pl-2 pr-3' },
10  label: { sm: 'px-2', default: 'px-2', lg: 'px-2' },
11} as const;
12 
13function getBadgePadding(
14  size: 'sm' | 'default' | 'lg',
15  withIcon: boolean,
16  withDot: boolean,
17) {
18  const mode = withIcon ? 'icon' : withDot ? 'dot' : 'label';
19 
20  return badgePadding[mode][size];
21}
22 
23const badgeVariants = cva(
24  'inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 rounded-full [&>svg]:size-4 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
25  {
26    variants: {
27      variant: {
28        'high-emphasis': 'bg-fill-active text-fg-primary-inverse',
29        'brand-accent': 'bg-brand-accents-qb-accent text-mist-50',
30        alternative: 'bg-fill-muted text-fg-secondary',
31        error: 'bg-status-error text-fg-primary-inverse',
32        warning: 'bg-status-warning text-fg-primary-inverse',
33        success: 'bg-status-success text-fg-primary-inverse',
34      },
35      size: {
36        sm: 'h-5 label-small-primary min-w-5',
37        default: 'h-6 label-small-primary min-w-6',
38        lg: 'h-7 label-regular-primary min-w-7',
39      },
40      outline: {
41        true: 'bg-fill-active-inverse text-fg-primary outline outline-solid outline-1',
42      },
43      // Declared so compoundVariants can match on them; they add no classes on
44      // their own (icon/dot-derived spacing is handled in the Badge function).
45      withIcon: { true: '', false: '' },
46      withDot: { true: '', false: '' },
47    },
48    compoundVariants: [
49      {
50        variant: 'high-emphasis',
51        outline: true,
52        className: 'outline-stroke-primary',
53      },
54      // A leading icon/dot softens the high-emphasis outline from
55      // Border/Primary to Border/Secondary (Figma Icon+Label / Dot+Label).
56      {
57        variant: 'high-emphasis',
58        outline: true,
59        withIcon: true,
60        className: 'outline-stroke-secondary',
61      },
62      {
63        variant: 'high-emphasis',
64        outline: true,
65        withDot: true,
66// … truncated