Badge

1import { cva, type VariantProps } from 'class-variance-authority';
2import { ComponentProps } from 'react';
3 
4import { Label2 } from '@/components/ui/typography';
5import { cn } from '@/lib/utils';
6 
7/* UX4G badge: padding 0.35em 0.61em, font-size 0.75em, font-weight 400, border-radius 0.375rem */
8const BADGE_VARIANTS = cva(
9  'inline-flex items-center justify-center whitespace-nowrap align-baseline text-center text-[0.75em] leading-none transition-colors focus:outline-none',
10  {
11    variants: {
12      theme: {
13        primary:
14          'text-primary [--badge-bg:var(--color-primary)] [--badge-bg-tonal:var(--color-primary-100)] [--badge-border-color:var(--color-primary)] [--badge-text-color:var(--color-primary)]',
15        secondary:
16          'text-secondary [--badge-bg:var(--color-secondary)] [--badge-bg-tonal:var(--color-secondary-100)] [--badge-border-color:var(--color-secondary)] [--badge-text-color:var(--color-secondary)]',
17        success:
18          'text-success [--badge-bg:var(--color-success)] [--badge-bg-tonal:var(--color-success-100)] [--badge-border-color:var(--color-success)] [--badge-text-color:var(--color-success)]',
19        danger:
20          'text-danger [--badge-bg:var(--color-danger)] [--badge-bg-tonal:var(--color-danger-100)] [--badge-border-color:var(--color-danger)] [--badge-text-color:var(--color-danger)]',
21        warning:
22          'text-warning [--badge-bg:var(--color-warning)] [--badge-bg-tonal:var(--color-warning-100)] [--badge-border-color:var(--color-warning)] [--badge-text-color:var(--color-warning)]',
23        info: 'text-info [--badge-bg:var(--color-info)] [--badge-bg-tonal:var(--color-info-100)] [--badge-border-color:var(--color-info)] [--badge-text-color:var(--color-info)]',
24        neutral:
25          'text-neutral [--badge-bg:var(--color-neutral)] [--badge-bg-tonal:var(--color-neutral-100)] [--badge-border-color:var(--color-neutral)] [--badge-text-color:var(--color-neutral)]',
26        light:
27          'text-neutral [--badge-bg:var(--color-neutral-50)] [--badge-bg-tonal:var(--color-neutral-50)] [--badge-border-color:var(--color-neutral-200)] [--badge-text-color:var(--color-neutral)]',
28        dark: 'text-neutral-0 [--badge-bg:var(--color-neutral)] [--badge-bg-tonal:var(--color-neutral-900)] [--badge-border-color:var(--color-neutral)] [--badge-text-color:var(--color-neutral-0)]',
29      },
30      variant: {
31        filled: 'bg-(--badge-bg) text-neutral-0 border border-transparent',
32// … truncated