Fix Button's disabled state when not loading (#1216)

.changeset/clever-carrots-deny.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed a bug in the Button component when it is disabled and not loading.

packages/circuit-ui/components/Button/Button.spec.tsx

@@ -133,9 +133,42 @@ describe('Button', () => {
       expect(props.onClick).toHaveBeenCalledTimes(1);
     });
 
-    /**
-     * Should accept a working ref for button
-     */
+    it('should render as disabled', () => {
+      const props = { ...baseProps, disabled: true };
+      const { getByRole } = renderButton(render, props);
+
+      const button = getByRole('button');
+
+      expect(button).toBeDisabled();
+    });
+
+    it('should render as disabled when loading', () => {
+      const props = {
+        ...baseProps,
+        isLoading: true,
+        loadingLabel: 'Loading',
+      };
+      const { getByRole } = renderButton(render, props);
+
+      const button = getByRole('button');
+
+      expect(button).toBeDisabled();
+    });
+
+    it('should render as disabled when not loading', () => {
+      const props = {
+        ...baseProps,
+        disabled: true,
+        isLoading: false,
+        loadingLabel: 'Loading',
+      };
+      const { getByRole } = renderButton(render, props);
+
+      const button = getByRole('button');
+
+      expect(button).toBeDisabled();
+    });
+
     it('should accept a working ref for a button', () => {
       const tref = createRef<any>();
       const { container } = render(
@@ -145,9 +178,6 @@ describe('Button', () => {
       expect(tref.current).toBe(button);
     });
 
-    /**
-     * Should accept a working ref for link
-     */
     it('should accept a working ref for a link', () => {
       const tref = createRef<any>();
       const { container } = render(

packages/circuit-ui/components/Button/Button.tsx

@@ -344,6 +344,7 @@ export const Button = forwardRef(
   (
     {
       children,
+      disabled,
       isLoading,
       loadingLabel,
       icon: Icon,
@@ -372,10 +373,10 @@ export const Button = forwardRef(
       <StyledButton
         {...props}
         {...(loadingLabel && {
-          'disabled': isLoading,
           'aria-live': 'polite',
           'aria-busy': isLoading,
         })}
+        disabled={disabled || isLoading}
         ref={ref}
         as={props.href ? Link : 'button'}
         onClick={handleClick}