46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
const button = cva('button', {
|
|
variants: {
|
|
intent: {
|
|
primary: ['bg-blue-500', 'text-white', 'border-transparent'],
|
|
secondary: ['bg-white', 'text-gray-800', 'border-gray-400'],
|
|
},
|
|
size: {
|
|
small: ['text-sm', 'py-1', 'px-2'],
|
|
medium: ['text-base', 'py-2', 'px-4'],
|
|
},
|
|
disabled: {
|
|
false: null,
|
|
true: ['opacity-50', 'cursor-not-allowed'],
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
intent: 'primary',
|
|
disabled: false,
|
|
class: 'hover:bg-blue-600',
|
|
},
|
|
{
|
|
intent: 'secondary',
|
|
disabled: false,
|
|
class: 'hover:bg-gray-100',
|
|
},
|
|
{ intent: 'primary', size: 'medium', class: 'uppercase' },
|
|
],
|
|
defaultVariants: {
|
|
disabled: false,
|
|
intent: 'primary',
|
|
size: 'medium',
|
|
},
|
|
});
|
|
|
|
export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof button> {}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({ className, intent, size, disabled, ...props }) => (
|
|
<button className={twMerge('cursor-pointer', button({ intent, size, disabled, className }))} disabled={disabled || undefined} {...props} />
|
|
);
|