Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 55x 55x 1610x 55x | import { cva, type VariantProps } from "class-variance-authority";
import React from "react";
const buttonVariants = cva(
"inline-flex items-center justify-center font-medium rounded-pill transition-colors duration-200 ease-gentle focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary disabled:opacity-50 disabled:cursor-not-allowed active:opacity-75",
{
variants: {
variant: {
primary: "bg-primary text-primary-ink hover:bg-primary-hover",
secondary: "bg-glass text-ink hover:bg-glass-strong border border-ink-soft",
ghost: "bg-transparent text-primary hover:bg-glass",
danger: "bg-error text-primary-ink hover:bg-error-deep",
},
size: {
sm: "h-9 px-3 text-sm",
md: "h-11 px-4 text-base",
lg: "h-14 px-6 text-lg",
},
},
defaultVariants: {
variant: "primary",
size: "md",
},
}
);
interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
fullWidth?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, fullWidth, ...props }, ref) => (
<button
className={`${buttonVariants({ variant, size })} ${fullWidth ? "w-full" : ""} ${className || ""}`}
ref={ref}
{...props}
/>
)
);
Button.displayName = "Button";
export { Button, buttonVariants };
|