@still-ui/button
Version:
Highly customizable and accessible Button component.
50 lines (47 loc) • 1.12 kB
JavaScript
"use client";
// src/Button.tsx
import { tv } from "tailwind-variants";
import { jsxs } from "react/jsx-runtime";
var button = tv({
base: "flex items-center gap-3 rounded bg-sky-600 px-5 py-3 font-bold text-white hover:shadow-lg",
variants: {
variant: {
success: "bg-green-500 hover:shadow-lg",
danger: "bg-red-500 hover:shadow-lg",
outline: "border border-sky-500 bg-transparent text-sky-500 hover:shadow-lg",
ghost: "bg-sky-100 text-sky-800 hover:shadow-lg"
},
rounded: {
true: "rounded-full"
},
size: {
sm: "px-4 py-2 text-sm font-medium",
md: "",
lg: "px-6 py-4 text-lg",
xl: "px-7 py-5 text-xl"
},
isLoading: {
true: "opacity-80 cursor-not-allowed"
}
}
});
var Button = ({
children,
className,
disabled,
icon,
isLoading,
rounded,
size = "md",
variant,
...props
}) => {
return /* @__PURE__ */ jsxs("button", { className: button({ variant, rounded, size, isLoading, class: className }), ...props, children: [
icon,
children
] });
};
var Button_default = Button;
export {
Button_default
};