Simplify and generalize Button component

this allows Button to have any attributes that normal button accepts,
like autofocus, role=link, ref, etc.

web/components/button.tsx

@@ -1,31 +1,25 @@
-import { ReactNode } from 'react'
 import clsx from 'clsx'
 
-export function Button(props: {
+export function Button(
-  className?: string
+  props: {
-  onClick?: () => void
+    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  children?: ReactNode
+    color?:
-  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+      | 'green'
-  color?:
+      | 'red'
-    | 'green'
+      | 'blue'
-    | 'red'
+      | 'indigo'
-    | 'blue'
+      | 'yellow'
-    | 'indigo'
+      | 'gray'
-    | 'yellow'
+      | 'gradient'
-    | 'gray'
+      | 'gray-white'
-    | 'gradient'
+  } & React.ButtonHTMLAttributes<HTMLButtonElement>
-    | 'gray-white'
+) {
-  type?: 'button' | 'reset' | 'submit'
-  disabled?: boolean
-}) {
   const {
     children,
     className,
-    onClick,
     size = 'md',
     color = 'indigo',
-    type = 'button',
+    ...buttonProps // onClick, disabled, type, etc.
-    disabled = false,
   } = props
 
   const sizeClasses = {
@@ -40,7 +34,6 @@ export function Button(props: {
 
   return (
     <button
-      type={type}
       className={clsx(
         'font-md items-center justify-center rounded-md border border-transparent shadow-sm hover:transition-colors disabled:cursor-not-allowed disabled:opacity-50',
         sizeClasses,
@@ -56,8 +49,8 @@ export function Button(props: {
           'border-none bg-white text-gray-500 shadow-none hover:bg-gray-200',
         className
       )}
-      disabled={disabled}
+      type="button"
-      onClick={onClick}
+      {...buttonProps}
     >
       {children}
     </button>