Split button into two sizes

hemilabs · Feb 15, 2024 · 9d0c000 · 9d0c000
1 parent 71d5f1a
commit 9d0c000
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/ui-common/components/button.tsx b/ui-common/components/button.tsx
@@ -1,11 +1,18 @@
+const sizes = {
+  large: 'h-14',
+  small: 'h-10',
+} as const
+
 type Props = React.DetailedHTMLProps<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
->
+> & { size?: keyof typeof sizes }
 
-export const Button = ({ disabled, ...props }: Props) => (
+export const Button = ({ disabled, size = 'large', ...props }: Props) => (
   <button
-    className={`h-14 w-full cursor-pointer rounded-xl bg-black text-base text-white ${
+    className={`${
+      sizes[size]
+    } w-full cursor-pointer rounded-xl bg-black text-base text-white ${
       disabled
         ? 'cursor-not-allowed bg-opacity-60'
         : 'cursor-pointer hover:bg-opacity-80'