index.tsx 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. import React from 'react'
  2. import { type VariantProps, cva } from 'class-variance-authority'
  3. import classNames from 'classnames'
  4. import Spinner from '../spinner'
  5. const buttonVariants = cva(
  6. 'btn disabled:pointer-events-none',
  7. {
  8. variants: {
  9. variant: {
  10. primary: 'btn-primary disabled:btn-primary-disabled',
  11. warning:
  12. 'btn-warning disabled:btn-warning-disabled',
  13. default: 'btn-default disabled:btn-default-disabled',
  14. },
  15. },
  16. defaultVariants: {
  17. variant: 'default',
  18. },
  19. },
  20. )
  21. export type ButtonProps = {
  22. loading?: boolean
  23. } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
  24. const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  25. ({ className, variant, loading, children, ...props }, ref) => {
  26. return (
  27. <button
  28. className={classNames(buttonVariants({ variant, className }))}
  29. ref={ref}
  30. {...props}
  31. >
  32. {children}
  33. <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
  34. </button>
  35. )
  36. },
  37. )
  38. Button.displayName = 'Button'
  39. export default Button
  40. export { Button, buttonVariants }