index.tsx 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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. type='button'
  29. className={classNames(buttonVariants({ variant, className }))}
  30. ref={ref}
  31. {...props}
  32. >
  33. {children}
  34. <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
  35. </button>
  36. )
  37. },
  38. )
  39. Button.displayName = 'Button'
  40. export default Button
  41. export { Button, buttonVariants }