@mikeheinrich/adobe-xd-design-system
Version:
Adobe XD-based design system with React components and Tailwind CSS
37 lines (36 loc) • 2.02 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";
import { cn } from "../lib/utils";
const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-[2px] text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
variants: {
variant: {
default: "bg-[#006d89] text-white hover:bg-[#00495b]",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "bg-white border border-[#006d89] text-[#006d89] hover:bg-blue-50",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-[#006d89] hover:underline p-0 h-auto",
attention: "bg-white border border-[#d6002a] text-[#d6002a] hover:bg-red-50",
"button-group": "bg-white text-gray-700 border-r border-gray-300 last:border-r-0 rounded-none h-[32px] border-t-2 border-t-transparent",
"button-group-active": "bg-[#eeeeee] text-[#d6002a] border-t-2 border-t-[#d6002a] border-r border-gray-300 last:border-r-0 rounded-none h-[32px] relative",
},
size: {
default: "h-[30px] px-4",
sm: "h-6 rounded-[2px] px-2 text-xs",
lg: "h-[40px] rounded-[2px] px-6",
icon: "h-[30px] w-[30px] p-0",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
});
const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
});
Button.displayName = "Button";
export { Button, buttonVariants };