adonisjs-ui
Version:
[](https://npmjs.com/package/adonisjs-ui) [](https://npm.chart.dev/adonisjs-ui)
40 lines (39 loc) • 1.81 kB
JavaScript
import { tv } from "tailwind-variants";
export const button = tv({
slots: {
base: "relative items-center font-semibold justify-center gap-2 whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none inline-flex *:transition-opacity transition-colors",
},
variants: {
variant: {
primary: "bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20",
filled: "bg-neutral-800/60 hover:bg-neutral-800/80 text-white border border-neutral-700/40",
outline: "bg-neutral-900 hover:bg-neutral-800 text-white border border-neutral-800 hover:border-neutral-700",
danger: "bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-500/20",
ghost: "bg-transparent hover:bg-neutral-800/60 text-neutral-400 hover:text-white",
subtle: "bg-transparent hover:bg-neutral-800/60 text-neutral-400 hover:text-white",
},
size: {
base: "h-10 text-sm rounded-xl px-4",
sm: "h-8 text-sm rounded-lg px-3",
xs: "h-6 text-xs rounded-lg px-2",
},
type: {
button: [
"[&[data-ui-loading]>:not([data-ui-loading-indicator])]:opacity-0",
"[&[data-ui-loading]>[data-ui-loading-indicator]]:opacity-100",
"data-ui-loading:pointer-events-none",
].join(" "),
submit: [
"[&[disabled]>:not([data-ui-loading-indicator])]:opacity-0",
"[&[disabled]>[data-ui-loading-indicator]]:opacity-100",
"[&[disabled]]:pointer-events-none",
].join(" "),
},
},
compoundVariants: [],
defaultVariants: {
variant: "outline",
size: "base",
type: "submit",
},
});