Sign Up Working

components/ui/Button/Button.module.css

@@ -24,3 +24,12 @@
 .slim {
   @apply py-2 transform-none normal-case;
 }
+
+.disabled,
+.disabled:hover {
+  @apply text-accents-4 border-accents-2 bg-accents-1 cursor-not-allowed;
+  filter: grayscale(1);
+  -webkit-transform: translateZ(0);
+  -webkit-perspective: 1000;
+  -webkit-backface-visibility: hidden;
+}

components/ui/Button/Button.tsx

@@ -19,6 +19,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   Component?: string | JSXElementConstructor<any>
   width?: string | number
   loading?: boolean
+  disabled?: boolean
 }
 
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
@@ -28,10 +29,10 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     children,
     active,
     onClick,
-    disabled,
     width,
     Component = 'button',
     loading = false,
+    disabled = false,
     style = {},
     ...rest
   } = props
@@ -52,6 +53,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     {
       [s.slim]: variant === 'slim',
       [s.loading]: loading,
+      [s.disabled]: disabled,
     },
     className
   )
@@ -64,6 +66,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       {...buttonProps}
       data-active={isPressed ? '' : undefined}
       className={rootClassName}
+      disabled={disabled}
       style={{
         width,
         ...style,