Button

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { cn } from "@/lib/utils";
4import { useRender, mergeProps } from "@base-ui/react";
5 
6const solidFocusRing =
7  "focus-visible:inset-ring-2 focus-visible:inset-ring-white-1000 focus-visible:border-blue-500";
8 
9const buttonVariants = cva(
10  "typography-body-medium inline-flex shrink-0 items-center justify-center gap-1 rounded-md whitespace-nowrap outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
11  {
12    variants: {
13      variant: {
14        primary: cn(
15          "bg-blue-500 text-white-1000 active:bg-blue-600 disabled:bg-grey-500 dark:border dark:border-transparent dark:active:border-blue-500",
16          solidFocusRing,
17        ),
18        secondary:
19          "border border-grey-200 text-black-800 focus-visible:border-none focus-visible:inset-ring focus-visible:inset-ring-blue-500 active:border-grey-300 active:bg-grey-100 disabled:border-grey-300 disabled:text-grey-500 dark:border-grey-600 dark:text-white-1000 dark:active:border-grey-600 dark:active:bg-grey-700 dark:disabled:border-grey-700 dark:disabled:text-grey-400",
20        destructive: cn(
21          "bg-red-500 text-white-1000 active:bg-red-600 active:outline active:-outline-offset-1 disabled:bg-grey-500 dark:active:outline-red-500",
22          solidFocusRing,
23        ),
24        secondaryDestruct:
25          "border border-red-300 text-red-500 focus-visible:border-none focus-visible:inset-ring focus-visible:inset-ring-blue-500 active:bg-grey-100 disabled:border-red-600 disabled:text-red-400 dark:border-red-700 dark:text-red-300 dark:active:border-red-600 dark:active:bg-grey-700",
26        inverse: cn(
27          "bg-black-1000 text-white-1000 disabled:bg-grey-500 dark:bg-white-1000 dark:text-black-1000",
28          solidFocusRing,
29        ),
30        success: cn(
31          "bg-green-500 text-white-1000 active:bg-green-600 active:outline active:-outline-offset-1 disabled:bg-grey-500 dark:active:outline-green-500",
32          solidFocusRing,
33        ),
34        link: "text-blue-600 focus-visible:inset-ring focus-visible:inset-ring-blue-500 active:bg-blue-200 disabled:text-grey-500 dark:text-blue-400 dark:active:bg-pale-blue-800",
35        linkDanger:
36// … truncated