Button

1import { Button } from "@/components/ui/button";
2
3<Button />

1import { ark } from "@ark-ui/react/factory";
2import type React from "react";
3import { tv, type VariantProps } from "tailwind-variants";
4import { cn } from "@/lib/utils";
5import { Spinner } from "@/registry/react/components/spinner";
6
7export const buttonVariants = tv({
8  base: [
9    "relative",
10    "inline-flex shrink-0 items-center justify-center gap-2",
11    "whitespace-nowrap font-medium text-sm",
12    "rounded-lg",
13    "transition-all",
14    "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/32",
15    "disabled:pointer-events-none disabled:opacity-64",
16    "data-disabled:pointer-events-none data-disabled:opacity-64",
17    "aria-disabled:pointer-events-none aria-disabled:opacity-64",
18    "data-[state=loading]:pointer-events-none",
19    "aria-invalid:border-destructive aria-invalid:ring-destructive/24",
20    "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
21    "motion-reduce:transition-none!",
22  ],
23  variants: {
24    variant: {
25      default: [
26        "bg-primary",
27        "border border-transparent shadow-primary/24 shadow-sm",
28        "text-primary-foreground",