diff --git a/packages/doc/content/components/components/button/default-web.mdx b/packages/doc/content/components/components/button/default-web.mdx
index 3b4a590ab5..eca4cc0f54 100644
--- a/packages/doc/content/components/components/button/default-web.mdx
+++ b/packages/doc/content/components/components/button/default-web.mdx
@@ -14,6 +14,14 @@ You can use all differente compounds like `<Button.Outline />` and `<Button.Text
 </Box>
 ```
 
+#### Inverted
+```javascript
+<Box display="flex" justifyContent="space-evenly" width="100%">
+  <Button inverted>Find an activity</Button>
+  <Button secondary inverted>Find an activity</Button>
+</Box>
+```
+
 #### As an anchor
 
 ```javascript
@@ -35,6 +43,31 @@ You can use all differente compounds like `<Button.Outline />` and `<Button.Text
 </Box>
 ```
 
+#### With Loading
+
+```javascript state
+render(() => {
+  const [loading, setLoading] = useState(true);
+  const onChange = () => setLoading(!loading);
+
+  return (
+    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="start" width="auto" gap="medium">
+      <Box>
+        <Text>Loading</Text>
+        <Checkbox.Switch checked={loading} onChange={onChange} />
+      </Box>
+
+      <Box display="flex" gap="medium">
+        <Button isLoading={loading}>Find an activity</Button>
+        <Button icon={Booking} inverted isLoading={loading}>Find an activity</Button>
+        <Button icon={Booking} secondary isLoading={loading}>Find an activity</Button>
+        <Button secondary inverted isLoading={loading}>Find an activity</Button>
+      </Box>
+    </Box>
+  );
+});
+```
+
 ### Props
 
 <PropsTable component="Button" platform="web" />
diff --git a/packages/doc/content/components/components/button/icon-web.mdx b/packages/doc/content/components/components/button/icon-web.mdx
index ae3b35cb68..d187b3e2a1 100644
--- a/packages/doc/content/components/components/button/icon-web.mdx
+++ b/packages/doc/content/components/components/button/icon-web.mdx
@@ -23,6 +23,33 @@
 </Box>
 ```
 
+#### With Loading
+
+```javascript state
+render(() => {
+  const [loading, setLoading] = useState(true);
+  const onChange = () => setLoading(!loading);
+
+  return (
+    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="start" width="auto" gap="large">
+      <Box>
+        <Text>Loading</Text>
+        <Checkbox.Switch checked={loading} onChange={onChange} />
+      </Box>
+
+      <Box display="flex" justifyContent="center" alignItems="center" gap="xxxlarge">
+        <Button.Icon icon={Booking} isLoading={loading} />
+        <Button.Icon icon={Edit} secondary isLoading={loading} />
+        <Button.Icon icon={Add} small isLoading={loading} />
+        <Button.Icon icon={Check} small secondary isLoading={loading} />
+        <Button.Icon icon={ChevronLeft} inverted isLoading={loading} />
+        <Button.Icon icon={Close} inverted secondary isLoading={loading} />
+      </Box>
+    </Box>
+  );
+});
+```
+
 ### Props
 
 <PropsTable component="Button.Icon" platform="web" />
diff --git a/packages/doc/content/components/components/button/outline.mdx b/packages/doc/content/components/components/button/outline.mdx
index a1618b604d..3736307609 100644
--- a/packages/doc/content/components/components/button/outline.mdx
+++ b/packages/doc/content/components/components/button/outline.mdx
@@ -45,6 +45,33 @@ You can use all differente compounds like `<Button />` and `<Button.Text />` com
 </Box>
 ```
 
+#### With Loading
+
+```javascript state
+render(() => {
+  const [loading, setLoading] = useState(true);
+  const onChange = () => setLoading(!loading);
+
+  return (
+    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="start" width="auto" gap="large">
+      <Box>
+        <Text>Loading</Text>
+        <Checkbox.Switch checked={loading} onChange={onChange} />
+      </Box>
+
+      <Box display="flex" justifyContent="center" alignItems="center" gap="xxlarge">
+          <Button.Outline isLoading={loading}>Find an activity</Button.Outline>
+          <Button.Outline secondary isLoading={loading}>Find an activity</Button.Outline>
+          <Button.Outline icon={Booking} isLoading={loading}>Find an activity</Button.Outline>
+          <Button.Outline icon={Booking} secondary isLoading={loading}>
+            Find an activity
+          </Button.Outline>
+      </Box>
+    </Box>
+  );
+});
+```
+
 ### Props
 
 <PropsTable component="Button" platform="web" />
diff --git a/packages/yoga/src/Button/web/Button.jsx b/packages/yoga/src/Button/web/Button.jsx
index 20cb1f9c37..3d1d763610 100644
--- a/packages/yoga/src/Button/web/Button.jsx
+++ b/packages/yoga/src/Button/web/Button.jsx
@@ -1,6 +1,15 @@
 import React, { forwardRef } from 'react';
 import { func, node, oneOfType, bool, string } from 'prop-types';
+import styled from 'styled-components';
 import StyledButton from './StyledButton';
+import Spinner from '../../Spinner';
+
+const SpinnerContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
 
 /** Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them. */
 const Button = forwardRef(
@@ -14,6 +23,7 @@ const Button = forwardRef(
       small,
       secondary,
       icon: Icon,
+      isLoading,
       ...props
     },
     ref,
@@ -29,27 +39,36 @@ const Button = forwardRef(
     return (
       <StyledButton
         ref={ref}
-        disabled={disabled}
+        disabled={disabled || isLoading}
         aria-disabled={disabled}
         full={full}
         inverted={inverted}
         onClick={onClick}
         small={small}
         secondary={secondary}
+        isLoading={isLoading}
         {...finalProps}
       >
-        {Icon && <Icon />}
+        {Icon && <Icon role="img" />}
         {children}
+
+        {isLoading && (
+          <SpinnerContainer>
+            <Spinner color="deep" size={small ? 'small' : 'medium'} />
+          </SpinnerContainer>
+        )}
       </StyledButton>
     );
   },
 );
 
 Button.propTypes = {
+  ariaLabel: string,
   children: node,
   disabled: bool,
   full: bool,
   inverted: bool,
+  isLoading: bool,
   onClick: func,
   small: bool,
   secondary: bool,
@@ -59,10 +78,12 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
+  ariaLabel: undefined,
   children: 'Button',
   disabled: undefined,
   full: false,
   inverted: false,
+  isLoading: false,
   onClick: () => {},
   small: false,
   secondary: false,
diff --git a/packages/yoga/src/Button/web/Button.test.jsx b/packages/yoga/src/Button/web/Button.test.jsx
index 892f5ab3ef..8c860d7519 100644
--- a/packages/yoga/src/Button/web/Button.test.jsx
+++ b/packages/yoga/src/Button/web/Button.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen, within } from '@testing-library/react';
 import { Booking, Close } from '@gympass/yoga-icons';
 
 import ThemeProvider from '../../Theme';
@@ -29,174 +29,172 @@ describe('<Button />', () => {
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with outline Button', () => {
+        it('should match snapshot with default Button and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline />
+              <Button isLoading />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with outline Button with Icon', () => {
+        it('should match snapshot with default Button with Icon and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline icon={Booking} />
+              <Button icon={Booking} isLoading />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with text Button', () => {
+        it('should match snapshot with outline Button', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Text />
+              <Button.Outline />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with text Button with Icon', () => {
+        it('should match snapshot with outline Button with Icon', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Text icon={Booking} />
+              <Button.Outline icon={Booking} />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with link Button', () => {
+        it('should match snapshot with outline Button and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Link />
+              <Button.Outline isLoading />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with icon Button', () => {
+        it('should match snapshot with outline Button with Icon and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Icon icon={Booking} />
+              <Button icon={Booking} isLoading />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
-      });
 
-      describe('With inverted prop', () => {
-        it('should match snapshot with default Button', () => {
+        it('should match snapshot with text Button', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button inverted />
+              <Button.Text />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with default Button with Icon', () => {
+        it('should match snapshot with text Button with Icon', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button inverted icon={Booking} />
+              <Button.Text icon={Booking} />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with outline Button', () => {
+        it('should match snapshot with link Button', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline inverted />
+              <Button.Link />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with outline Button with Icon', () => {
+        it('should match snapshot with icon Button', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline inverted icon={Booking} />
+              <Button.Icon icon={Booking} />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with text Button', () => {
+        it('should match snapshot with text icon and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Text inverted />
+              <Button.Icon icon={Booking} isLoading />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
+      });
 
-        it('should match snapshot with outline Button with Icon', () => {
+      describe('With inverted prop', () => {
+        it('should match snapshot with default Button', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline inverted icon={Booking} />
+              <Button inverted />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with icon Button', () => {
+        it('should match snapshot with default Button and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Icon inverted icon={Booking} />
+              <Button inverted isLoading />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
-      });
 
-      describe('With small prop', () => {
-        it('should match snapshot with default Button', () => {
+        it('should match snapshot with default Button with Icon', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button small />
+              <Button inverted icon={Booking} />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with outline Button', () => {
+        it('should match snapshot with default Button with Icon and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline small />
+              <Button inverted icon={Booking} isLoading />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with text Button', () => {
+        it('should match snapshot with outline Button', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Text small />
+              <Button.Outline inverted />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with default Button with Icon', () => {
+        it('should match snapshot with outline Button and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button small icon={Booking} />
+              <Button.Outline inverted isLoading />
             </ThemeProvider>,
           );
 
@@ -206,690 +204,1360 @@ describe('<Button />', () => {
         it('should match snapshot with outline Button with Icon', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline icon={Booking} small />
+              <Button.Outline inverted icon={Booking} />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with text Button with Icon', () => {
+        it('should match snapshot with outline Button with Icon and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Text icon={Booking} small />
+              <Button.Outline inverted icon={Booking} isLoading />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with icon Button', () => {
+        it('should match snapshot with text Button', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Icon icon={Booking} small />
+              <Button.Text inverted />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
-      });
 
-      describe('With full prop', () => {
-        it('should match snapshot with default Button', () => {
+        it('should match snapshot with icon Button', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button full />
+              <Button.Icon inverted icon={Booking} />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with outline Button', () => {
+        it('should match snapshot with icon Button and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline full />
+              <Button.Icon inverted icon={Booking} isLoading />
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with text Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Text full />
-            </ThemeProvider>,
-          );
+        describe('With small prop', () => {
+          it('should match snapshot with default Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button small />
+              </ThemeProvider>,
+            );
 
-          expect(container).toMatchSnapshot();
-        });
+            expect(container).toMatchSnapshot();
+          });
 
-        it('should match snapshot with default Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button full icon={Booking} />
-            </ThemeProvider>,
-          );
+          it('should match snapshot with default Button when is Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button small isLoading />
+              </ThemeProvider>,
+            );
 
-          expect(container).toMatchSnapshot();
-        });
+            expect(container).toMatchSnapshot();
+          });
 
-        it('should match snapshot with outline Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Outline full icon={Booking} />
-            </ThemeProvider>,
-          );
+          it('should match snapshot with outline Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline small />
+              </ThemeProvider>,
+            );
 
-          expect(container).toMatchSnapshot();
-        });
+            expect(container).toMatchSnapshot();
+          });
 
-        it('should match snapshot with text Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Text full icon={Booking} />
-            </ThemeProvider>,
-          );
+          it('should match snapshot with outline Button when is Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline small isLoading />
+              </ThemeProvider>,
+            );
 
-          expect(container).toMatchSnapshot();
-        });
-      });
+            expect(container).toMatchSnapshot();
+          });
 
-      describe('With disabled prop', () => {
-        it('should match snapshot with default Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button disabled />
-            </ThemeProvider>,
-          );
+          it('should match snapshot with text Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text small />
+              </ThemeProvider>,
+            );
 
-          expect(container).toMatchSnapshot();
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button small icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button small icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline icon={Booking} small />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline icon={Booking} small isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text icon={Booking} small />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon icon={Booking} small />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon icon={Booking} small isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+        });
+
+        describe('With full prop', () => {
+          it('should match snapshot with default Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button full />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button full isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline full />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline full isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text full />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button full icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button full icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline full icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline full icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text full icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+        });
+
+        describe('With disabled prop', () => {
+          it('should match snapshot with default Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button disabled />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button disabled isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline disabled />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline disabled isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text disabled />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with link Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Link disabled />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button disabled icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button disabled icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline disabled icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline disabled icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text disabled icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon disabled icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon disabled icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
         });
+      });
 
-        it('should match snapshot with outline Button', () => {
+      describe('buttons rendering as an anchor', () => {
+        it('Default Button with href prop', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline disabled />
+              <Button href="http://www.gympass.com" target="blank">
+                Default Button as an anchor
+              </Button>
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with text Button', () => {
+        it('Default Button with href prop and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Text disabled />
+              <Button href="http://www.gympass.com" target="blank" isLoading>
+                Default Button as an anchor
+              </Button>
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with link Button', () => {
+        it('Link Button with href prop', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Link disabled />
+              <Button.Link href="http://www.gympass.com" target="blank">
+                Link as an anchor
+              </Button.Link>
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with default Button with Icon', () => {
+        it('Outline Button with href prop', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button disabled icon={Booking} />
+              <Button.Outline href="http://www.gympass.com" target="blank">
+                Outline as an anchor
+              </Button.Outline>
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with outline Button with Icon', () => {
+        it('Outline Button with href prop and Loading', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Outline disabled icon={Booking} />
+              <Button.Outline
+                href="http://www.gympass.com"
+                target="blank"
+                isLoading
+              >
+                Outline as an anchor
+              </Button.Outline>
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
 
-        it('should match snapshot with text Button with Icon', () => {
+        it('Text Button with href prop', () => {
           const { container } = render(
             <ThemeProvider>
-              <Button.Text disabled icon={Booking} />
+              <Button.Text href="http://www.gympass.com" target="blank">
+                Text as an anchor
+              </Button.Text>
             </ThemeProvider>,
           );
 
           expect(container).toMatchSnapshot();
         });
+      });
 
-        it('should match snapshot with icon Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Icon disabled icon={Booking} />
-            </ThemeProvider>,
-          );
+      describe('secondary buttons', () => {
+        describe('Without props', () => {
+          it('should match snapshot with default Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button secondary icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button secondary icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline icon={Booking} secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text secondary icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with link Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Link secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with link Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Link icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon icon={Booking} secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+        });
+
+        describe('With inverted prop', () => {
+          it('should match snapshot with default Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button inverted secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button inverted secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button inverted icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button inverted icon={Booking} secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline inverted secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline inverted secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline inverted icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline inverted icon={Booking} secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text inverted secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text inverted icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text inverted icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon inverted icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon inverted icon={Booking} secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+        });
+
+        describe('With small prop', () => {
+          it('should match snapshot with default Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button small secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button small secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline small secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline small secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text small secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button small icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button small icon={Booking} secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline icon={Booking} small secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline icon={Booking} small secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text icon={Booking} small secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon icon={Booking} small secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon icon={Booking} small secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+        });
+
+        describe('With full prop', () => {
+          it('should match snapshot with default Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button full secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button full secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline full secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline full secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text full secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button full icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button full icon={Booking} secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline full icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline full icon={Booking} secondary isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text full icon={Booking} secondary />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+        });
+      });
 
-          expect(container).toMatchSnapshot();
+      describe('disabled buttons', () => {
+        describe('With disabled prop', () => {
+          it('should match snapshot with default Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button disabled />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button disabled isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline disabled />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline disabled isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text disabled />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with link Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Link disabled />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button disabled icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with default Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button disabled icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline disabled icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with outline Button with Icon and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Outline disabled icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with text Button with Icon', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Text disabled icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon disabled icon={Booking} />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
+
+          it('should match snapshot with icon Button and Loading', () => {
+            const { container } = render(
+              <ThemeProvider>
+                <Button.Icon disabled icon={Booking} isLoading />
+              </ThemeProvider>,
+            );
+
+            expect(container).toMatchSnapshot();
+          });
         });
       });
     });
 
-    describe('buttons rendering as an anchor', () => {
-      it('Default Button with href prop', () => {
-        const { container } = render(
+    describe('onClick prop', () => {
+      it('should call onClick function when click on Button', () => {
+        const onClickMock = jest.fn();
+        const { getByText } = render(
           <ThemeProvider>
-            <Button href="http://www.gympass.com" target="blank">
-              Default Button as an anchor
-            </Button>
+            <Button onClick={onClickMock}>Button</Button>
           </ThemeProvider>,
         );
 
-        expect(container).toMatchSnapshot();
+        fireEvent.click(getByText('Button'));
+
+        expect(onClickMock).toHaveBeenCalled();
       });
 
-      it('Link Button with href prop', () => {
-        const { container } = render(
+      it('should call onClick function when click on Button.Outline', () => {
+        const onClickMock = jest.fn();
+        const { getByText } = render(
           <ThemeProvider>
-            <Button.Link href="http://www.gympass.com" target="blank">
-              Link as an anchor
-            </Button.Link>
+            <Button.Outline onClick={onClickMock}>
+              Button.Outline
+            </Button.Outline>
           </ThemeProvider>,
         );
 
-        expect(container).toMatchSnapshot();
+        fireEvent.click(getByText('Button.Outline'));
+
+        expect(onClickMock).toHaveBeenCalled();
       });
 
-      it('Outline Button with href prop', () => {
-        const { container } = render(
+      it('should call onClick function when click on Button.Text', () => {
+        const onClickMock = jest.fn();
+        const { getByText } = render(
           <ThemeProvider>
-            <Button.Outline href="http://www.gympass.com" target="blank">
-              Outline as an anchor
-            </Button.Outline>
+            <Button.Text onClick={onClickMock}>Button.Text</Button.Text>
           </ThemeProvider>,
         );
 
-        expect(container).toMatchSnapshot();
+        fireEvent.click(getByText('Button.Text'));
+
+        expect(onClickMock).toHaveBeenCalled();
       });
 
-      it('Text Button with href prop', () => {
-        const { container } = render(
+      it('should call onClick function when click on Button.Icon', () => {
+        const onClickMock = jest.fn();
+        const { getByRole } = render(
           <ThemeProvider>
-            <Button.Text href="http://www.gympass.com" target="blank">
-              Text as an anchor
-            </Button.Text>
+            <Button.Icon icon={Close} onClick={onClickMock} />
           </ThemeProvider>,
         );
 
-        expect(container).toMatchSnapshot();
-      });
-    });
+        fireEvent.click(getByRole('button'));
 
-    describe('secondary buttons', () => {
-      describe('Without props', () => {
-        it('should match snapshot with default Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with default Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button secondary icon={Booking} />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with outline Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Outline secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with outline Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Outline icon={Booking} secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with text Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Text secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with text Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Text secondary icon={Booking} />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
+        expect(onClickMock).toHaveBeenCalled();
+      });
 
-        it('should match snapshot with link Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Link secondary />
-            </ThemeProvider>,
-          );
+      it('should not call onClick function when click on Button disabled', () => {
+        const onClickMock = jest.fn();
+        const { getByText } = render(
+          <ThemeProvider>
+            <Button disabled onClick={onClickMock}>
+              Button
+            </Button>
+          </ThemeProvider>,
+        );
 
-          expect(container).toMatchSnapshot();
-        });
+        fireEvent.click(getByText('Button'));
 
-        it('should match snapshot with link Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Link icon={Booking} />
-            </ThemeProvider>,
-          );
+        expect(onClickMock).not.toHaveBeenCalled();
+      });
 
-          expect(container).toMatchSnapshot();
-        });
+      it('should not call onClick function when click on Button is loading', () => {
+        const onClickMock = jest.fn();
+        const { getByText } = render(
+          <ThemeProvider>
+            <Button isLoading onClick={onClickMock}>
+              Button
+            </Button>
+          </ThemeProvider>,
+        );
 
-        it('should match snapshot with icon Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Icon icon={Booking} secondary />
-            </ThemeProvider>,
-          );
+        fireEvent.click(getByText('Button'));
 
-          expect(container).toMatchSnapshot();
-        });
+        expect(onClickMock).not.toHaveBeenCalled();
       });
+    });
 
-      describe('With inverted prop', () => {
-        it('should match snapshot with default Button', () => {
-          const { container } = render(
+    describe('Loading prop', () => {
+      describe('Default Button', () => {
+        it('Text should not to be visible', () => {
+          render(
             <ThemeProvider>
-              <Button inverted secondary />
+              <Button isLoading>Button</Button>
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with default Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button inverted icon={Booking} secondary />
-            </ThemeProvider>,
-          );
+          const text = screen.getByText('Button');
 
-          expect(container).toMatchSnapshot();
+          expect(text).toHaveStyle('color: transparent');
         });
 
-        it('should match snapshot with outline Button', () => {
-          const { container } = render(
+        it('Icon should not to be visible', () => {
+          render(
             <ThemeProvider>
-              <Button.Outline inverted secondary />
+              <Button icon={Booking} isLoading aria-label="button">
+                Button
+              </Button>
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
+          const button = screen.getByRole('button', { name: 'button' });
+          const svg = within(button).getByRole('img');
 
-        it('should match snapshot with outline Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Outline inverted icon={Booking} secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
+          expect(svg).toHaveStyle('fill: transparent');
         });
 
-        it('should match snapshot with text Button', () => {
-          const { container } = render(
+        it('Spinner should to be rendered', () => {
+          render(
             <ThemeProvider>
-              <Button.Text inverted secondary />
+              <Button isLoading>Button</Button>
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
+          const spinner = screen.getByLabelText('loading-icon');
 
-        it('should match snapshot with text Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Text inverted icon={Booking} secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
+          expect(spinner).toBeVisible();
         });
 
-        it('should match snapshot with text Button with Icon', () => {
-          const { container } = render(
+        it('Button should to be disabled', () => {
+          render(
             <ThemeProvider>
-              <Button.Text inverted icon={Booking} secondary />
+              <Button isLoading aria-label="button">
+                Button
+              </Button>
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with icon Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Icon inverted icon={Booking} secondary />
-            </ThemeProvider>,
-          );
+          const button = screen.getByRole('button', { name: 'button' });
 
-          expect(container).toMatchSnapshot();
+          expect(button).toBeDisabled();
         });
       });
 
-      describe('With small prop', () => {
-        it('should match snapshot with default Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button small secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with outline Button', () => {
-          const { container } = render(
+      describe('Outline Button', () => {
+        it('Text should not to be visible', () => {
+          render(
             <ThemeProvider>
-              <Button.Outline small secondary />
+              <Button.Outline isLoading>Button</Button.Outline>
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with text Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Text small secondary />
-            </ThemeProvider>,
-          );
+          const text = screen.getByText('Button');
 
-          expect(container).toMatchSnapshot();
+          expect(text).toHaveStyle('color: transparent');
         });
 
-        it('should match snapshot with default Button with Icon', () => {
-          const { container } = render(
+        it('Icon should not to be visible', () => {
+          render(
             <ThemeProvider>
-              <Button small icon={Booking} secondary />
+              <Button.Outline icon={Booking} isLoading aria-label="button">
+                Button
+              </Button.Outline>
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
+          const button = screen.getByRole('button', { name: 'button' });
+          const svg = within(button).getByRole('img');
 
-        it('should match snapshot with outline Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Outline icon={Booking} small secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
+          expect(svg).toHaveStyle('fill: transparent');
         });
 
-        it('should match snapshot with text Button with Icon', () => {
-          const { container } = render(
+        it('Spinner should to be rendered', () => {
+          render(
             <ThemeProvider>
-              <Button.Text icon={Booking} small secondary />
+              <Button.Outline isLoading>Button</Button.Outline>
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
+          const spinner = screen.getByLabelText('loading-icon');
 
-        it('should match snapshot with icon Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Icon icon={Booking} small secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
+          expect(spinner).toBeVisible();
         });
-      });
 
-      describe('With full prop', () => {
-        it('should match snapshot with default Button', () => {
-          const { container } = render(
+        it('Button should to be disabled', () => {
+          render(
             <ThemeProvider>
-              <Button full secondary />
+              <Button.Outline isLoading aria-label="button">
+                Button
+              </Button.Outline>
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
+          const button = screen.getByRole('button', { name: 'button' });
 
-        it('should match snapshot with outline Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Outline full secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with text Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Text full secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with default Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button full icon={Booking} secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with outline Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Outline full icon={Booking} secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with text Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Text full icon={Booking} secondary />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
+          expect(button).toBeDisabled();
         });
       });
-    });
 
-    describe('disabled buttons', () => {
-      describe('With disabled prop', () => {
-        it('should match snapshot with default Button', () => {
-          const { container } = render(
+      describe('Icon Button', () => {
+        it('Icon should not to be visible', () => {
+          render(
             <ThemeProvider>
-              <Button disabled />
+              <Button.Icon icon={Booking} isLoading aria-label="button" />
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with outline Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Outline disabled />
-            </ThemeProvider>,
-          );
+          const button = screen.getByRole('button', {
+            name: 'button',
+          });
+          const svg = within(button).queryByRole('img');
 
-          expect(container).toMatchSnapshot();
+          expect(svg).toBeNull();
         });
 
-        it('should match snapshot with text Button', () => {
-          const { container } = render(
+        it('Spinner should to be rendered', () => {
+          render(
             <ThemeProvider>
-              <Button.Text disabled />
+              <Button.Icon icon={Booking} isLoading />
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
+          const spinner = screen.getByLabelText('loading-icon');
 
-        it('should match snapshot with link Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Link disabled />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with default Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button disabled icon={Booking} />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with outline Button with Icon', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Outline disabled icon={Booking} />
-            </ThemeProvider>,
-          );
-
-          expect(container).toMatchSnapshot();
+          expect(spinner).toBeVisible();
         });
 
-        it('should match snapshot with text Button with Icon', () => {
-          const { container } = render(
+        it('Button should to be disabled', () => {
+          render(
             <ThemeProvider>
-              <Button.Text disabled icon={Booking} />
+              <Button.Icon icon={Booking} isLoading aria-label="button" />
             </ThemeProvider>,
           );
 
-          expect(container).toMatchSnapshot();
-        });
-
-        it('should match snapshot with icon Button', () => {
-          const { container } = render(
-            <ThemeProvider>
-              <Button.Icon disabled icon={Booking} />
-            </ThemeProvider>,
-          );
+          const button = screen.getByRole('button', { name: 'button' });
 
-          expect(container).toMatchSnapshot();
+          expect(button).toBeDisabled();
         });
       });
     });
   });
-
-  describe('onClick prop', () => {
-    it('should call onClick function when click on Button', () => {
-      const onClickMock = jest.fn();
-      const { getByText } = render(
-        <ThemeProvider>
-          <Button onClick={onClickMock}>Button</Button>
-        </ThemeProvider>,
-      );
-
-      fireEvent.click(getByText('Button'));
-
-      expect(onClickMock).toHaveBeenCalled();
-    });
-
-    it('should call onClick function when click on Button.Outline', () => {
-      const onClickMock = jest.fn();
-      const { getByText } = render(
-        <ThemeProvider>
-          <Button.Outline onClick={onClickMock}>Button.Outline</Button.Outline>
-        </ThemeProvider>,
-      );
-
-      fireEvent.click(getByText('Button.Outline'));
-
-      expect(onClickMock).toHaveBeenCalled();
-    });
-
-    it('should call onClick function when click on Button.Text', () => {
-      const onClickMock = jest.fn();
-      const { getByText } = render(
-        <ThemeProvider>
-          <Button.Text onClick={onClickMock}>Button.Text</Button.Text>
-        </ThemeProvider>,
-      );
-
-      fireEvent.click(getByText('Button.Text'));
-
-      expect(onClickMock).toHaveBeenCalled();
-    });
-
-    it('should call onClick function when click on Button.Icon', () => {
-      const onClickMock = jest.fn();
-      const { getByRole } = render(
-        <ThemeProvider>
-          <Button.Icon icon={Close} onClick={onClickMock} />
-        </ThemeProvider>,
-      );
-
-      fireEvent.click(getByRole('button'));
-
-      expect(onClickMock).toHaveBeenCalled();
-    });
-
-    it('should not call onClick function when click on Button disabled', () => {
-      const onClickMock = jest.fn();
-      const { getByText } = render(
-        <ThemeProvider>
-          <Button disabled onClick={onClickMock}>
-            Button
-          </Button>
-        </ThemeProvider>,
-      );
-
-      fireEvent.click(getByText('Button'));
-
-      expect(onClickMock).not.toHaveBeenCalled();
-    });
-  });
 });
diff --git a/packages/yoga/src/Button/web/Icon.jsx b/packages/yoga/src/Button/web/Icon.jsx
index d11f556ab8..95e712b64c 100644
--- a/packages/yoga/src/Button/web/Icon.jsx
+++ b/packages/yoga/src/Button/web/Icon.jsx
@@ -4,6 +4,7 @@ import styled, { withTheme } from 'styled-components';
 
 import StyledButton from './StyledButton';
 import Icon from '../../Icon';
+import Spinner from '../../Spinner';
 
 const IconStyled = styled(StyledButton)`
   padding: 0;
@@ -39,6 +40,7 @@ const ButtonIcon = forwardRef(
       },
       small,
       disabled,
+      isLoading,
       ...props
     },
     ref,
@@ -48,13 +50,19 @@ const ButtonIcon = forwardRef(
         {...props}
         ref={ref}
         small={small}
-        disabled={disabled}
+        disabled={disabled || isLoading}
         aria-disabled={disabled}
+        isLoading={isLoading}
       >
-        <Icon
-          as={icon}
-          size={small ? button.icon.size.small : button.icon.size.default}
-        />
+        {isLoading ? (
+          <Spinner color="deep" size={small ? 'small' : 'medium'} />
+        ) : (
+          <Icon
+            as={icon}
+            size={small ? button.icon.size.small : button.icon.size.default}
+            role="img"
+          />
+        )}
       </IconStyled>
     );
   },
@@ -66,6 +74,7 @@ ButtonIcon.propTypes = {
   secondary: bool,
   inverted: bool,
   icon: oneOfType([node, func]),
+  isLoading: bool,
 };
 
 ButtonIcon.defaultProps = {
@@ -74,6 +83,7 @@ ButtonIcon.defaultProps = {
   secondary: false,
   inverted: false,
   icon: undefined,
+  isLoading: false,
 };
 
 ButtonIcon.displayName = 'Button.Icon';
diff --git a/packages/yoga/src/Button/web/Link.jsx b/packages/yoga/src/Button/web/Link.jsx
index 1058b7d4fc..212d443f9c 100644
--- a/packages/yoga/src/Button/web/Link.jsx
+++ b/packages/yoga/src/Button/web/Link.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { bool, string, oneOfType, node, func } from 'prop-types';
 
 import styled from 'styled-components';
@@ -68,9 +68,17 @@ const Link = styled(Button)`
   }}
 `;
 
-const ButtonLink = ({ disabled, ...props }) => (
-  <Link {...props} disabled={disabled} aria-disabled={disabled} />
-);
+const ButtonLink = forwardRef(({ ...rest }, ref) => {
+  const props = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key !== 'isLoading'),
+  );
+
+  const { disabled } = props;
+
+  return (
+    <Link {...props} disabled={disabled} aria-disabled={disabled} ref={ref} />
+  );
+});
 
 ButtonLink.propTypes = {
   disabled: bool,
diff --git a/packages/yoga/src/Button/web/Outline.jsx b/packages/yoga/src/Button/web/Outline.jsx
index 6852b85f2e..acc30f9dcc 100644
--- a/packages/yoga/src/Button/web/Outline.jsx
+++ b/packages/yoga/src/Button/web/Outline.jsx
@@ -7,6 +7,7 @@ const ButtonOutline = styled(Button)`
   ${({
     inverted,
     secondary,
+    isLoading,
     theme: {
       yoga: {
         colors: { white },
@@ -55,7 +56,7 @@ const ButtonOutline = styled(Button)`
         border-color: ${outline.font.disabled.color};
         color: ${outline.font.disabled.color};
 
-        svg {
+         svg {
           fill: ${outline.font.disabled.color};
         }
       }
@@ -99,6 +100,20 @@ const ButtonOutline = styled(Button)`
           `
           : ''
       }
+
+      ${
+        isLoading
+          ? `
+            &:disabled {
+              color: transparent;
+
+              svg {
+                fill: transparent;
+              }
+            }
+            `
+          : ''
+      }
     `;
   }}
 `;
diff --git a/packages/yoga/src/Button/web/StyledButton.jsx b/packages/yoga/src/Button/web/StyledButton.jsx
index 0729107d1a..1d0faaa2a0 100644
--- a/packages/yoga/src/Button/web/StyledButton.jsx
+++ b/packages/yoga/src/Button/web/StyledButton.jsx
@@ -14,6 +14,7 @@ const StyledButton = styled.button`
     inverted,
     secondary,
     disabled,
+    isLoading,
     theme: {
       yoga: {
         baseFont,
@@ -95,7 +96,6 @@ const StyledButton = styled.button`
       `
           : ''
       }
-      
 
       ${
         inverted
@@ -128,6 +128,25 @@ const StyledButton = styled.button`
       `
           : ''
       }
+
+      ${
+        isLoading
+          ? `
+            position: relative;
+            color: transparent;
+            `
+          : ''
+      }
+
+      ${
+        (isLoading && inverted) || (isLoading && disabled)
+          ? `
+          svg {
+            fill: transparent;
+          }
+            `
+          : ''
+      }
     `;
   }}
 `;
diff --git a/packages/yoga/src/Button/web/Text.jsx b/packages/yoga/src/Button/web/Text.jsx
index 968188e836..6ba8d9c4e0 100644
--- a/packages/yoga/src/Button/web/Text.jsx
+++ b/packages/yoga/src/Button/web/Text.jsx
@@ -1,9 +1,11 @@
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { hexToRgb } from '@gympass/yoga-common';
+import { bool } from 'prop-types';
 
 import Button from './Button';
 
-const ButtonText = styled(Button)`
+const StyledButton = styled(Button)`
   ${({
     secondary,
     inverted,
@@ -81,6 +83,33 @@ const ButtonText = styled(Button)`
   }}
 `;
 
+const ButtonText = forwardRef(({ ...rest }, ref) => {
+  const props = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key !== 'isLoading'),
+  );
+
+  const { secondary, inverted } = props;
+
+  return (
+    <StyledButton
+      {...props}
+      secondary={secondary}
+      inverted={inverted}
+      ref={ref}
+    />
+  );
+});
+
+ButtonText.propTypes = {
+  inverted: bool,
+  secondary: bool,
+};
+
+ButtonText.defaultProps = {
+  inverted: false,
+  secondary: false,
+};
+
 ButtonText.displayName = 'Button.Text';
 
 export default ButtonText;
diff --git a/packages/yoga/src/Button/web/__snapshots__/Button.test.jsx.snap b/packages/yoga/src/Button/web/__snapshots__/Button.test.jsx.snap
index d5a01acad7..fbf9e0f014 100644
--- a/packages/yoga/src/Button/web/__snapshots__/Button.test.jsx.snap
+++ b/packages/yoga/src/Button/web/__snapshots__/Button.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Button /> Snapshots buttons rendering as an anchor Default Button with href prop 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with default Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -38,6 +38,10 @@ exports[`<Button /> Snapshots buttons rendering as an anchor Default Button with
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
 }
 
 .c0 svg {
@@ -63,18 +67,22 @@ exports[`<Button /> Snapshots buttons rendering as an anchor Default Button with
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #6B6B78;
+}
+
 <div>
-  <a
+  <button
+    aria-disabled="true"
     class="c0"
-    href="http://www.gympass.com"
-    target="blank"
+    disabled=""
   >
-    Default Button as an anchor
-  </a>
+    Button
+  </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots buttons rendering as an anchor Link Button with href prop 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with default Button 2`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -112,6 +120,12 @@ exports[`<Button /> Snapshots buttons rendering as an anchor Link Button with hr
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -137,66 +151,88 @@ exports[`<Button /> Snapshots buttons rendering as an anchor Link Button with hr
   fill: #FFFFFF;
 }
 
-.c1 {
-  height: unset;
-  padding: 0;
-  background-color: unset;
-  border: none;
-  border-radius: 0;
-  color: #D8385E;
-}
-
-.c1 svg {
-  margin-right: 4px;
-  fill: #D8385E;
-}
-
-.c1:disabled,
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  box-shadow: unset;
-  background-color: unset;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c0 svg {
+  fill: #6B6B78;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c0 svg {
+  fill: transparent;
 }
 
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(216,56,94,0.75);
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
-.c1:disabled {
-  color: #6B6B78;
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
-  <a
-    class="c0 c1"
-    href="http://www.gympass.com"
-    target="blank"
+  <button
+    aria-disabled="true"
+    class="c0"
+    disabled=""
   >
-    Link as an anchor
-  </a>
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots buttons rendering as an anchor Outline Button with href prop 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with default Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -234,6 +270,10 @@ exports[`<Button /> Snapshots buttons rendering as an anchor Outline Button with
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
 }
 
 .c0 svg {
@@ -259,61 +299,25 @@ exports[`<Button /> Snapshots buttons rendering as an anchor Outline Button with
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border: 1px solid;
-  border-color: #D8385E;
-  color: #D8385E;
-}
-
-.c1 svg {
-  fill: #D8385E;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #D8385E;
-  color: #FFFFFF;
-}
-
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(216,56,94,0.75);
-  color: rgba(216,56,94,0.75);
-  box-shadow: none;
-}
-
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
-}
-
-.c1:disabled {
-  background-color: transparent;
-  border-color: #6B6B78;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
+.c0 svg {
   fill: #6B6B78;
 }
 
 <div>
-  <a
-    class="c0 c1"
-    href="http://www.gympass.com"
-    target="blank"
+  <button
+    aria-disabled="true"
+    class="c0"
+    disabled=""
   >
-    Outline as an anchor
-  </a>
+    <svg
+      role="img"
+    />
+    Button
+  </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots buttons rendering as an anchor Text Button with href prop 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with default Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -351,6 +355,12 @@ exports[`<Button /> Snapshots buttons rendering as an anchor Text Button with hr
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -376,63 +386,96 @@ exports[`<Button /> Snapshots buttons rendering as an anchor Text Button with hr
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #D8385E;
-}
-
-.c1 svg {
-  fill: #D8385E;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c0 svg {
+  fill: #6B6B78;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c0 svg {
+  fill: transparent;
 }
 
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(216,56,94,0.75);
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
-  <a
-    class="c0 c1"
-    href="http://www.gympass.com"
-    target="blank"
+  <button
+    aria-disabled="true"
+    class="c0"
+    disabled=""
   >
-    Text as an anchor
-  </a>
+    <svg
+      role="img"
+    />
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots disabled buttons With disabled prop should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with icon Button 1`] = `
+.c1 {
+  width: 24px;
+  height: 24px;
+}
+
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -474,6 +517,8 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   color: #6B6B78;
   pointer-events: none;
   cursor: not-allowed;
+  padding: 0;
+  width: 48px;
 }
 
 .c0 svg {
@@ -503,18 +548,57 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   fill: #6B6B78;
 }
 
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
 <div>
   <button
     aria-disabled="true"
     class="c0"
     disabled=""
   >
-    Button
+    <svg
+      aria-hidden="true"
+      class="c1"
+      height="24"
+      role="img"
+      width="24"
+    />
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots disabled buttons With disabled prop should match snapshot with default Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with icon Button and Loading 1`] = `
+.c1 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c1 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -556,6 +640,10 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   color: #6B6B78;
   pointer-events: none;
   cursor: not-allowed;
+  position: relative;
+  color: transparent;
+  padding: 0;
+  width: 48px;
 }
 
 .c0 svg {
@@ -585,24 +673,53 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   fill: #6B6B78;
 }
 
+.c0 svg {
+  fill: transparent;
+}
+
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
 <div>
   <button
     aria-disabled="true"
     class="c0"
     disabled=""
   >
-    <svg />
-    Button
+    <span
+      aria-label="loading-icon"
+      class="c1"
+      color="#6B6B78"
+      size="20"
+    >
+      <span
+        class="spinner"
+      >
+        <svg
+          class="circular"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="path"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </span>
+    </span>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots disabled buttons With disabled prop should match snapshot with icon Button 1`] = `
-.c1 {
-  width: 24px;
-  height: 24px;
-}
-
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with link Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -644,8 +761,6 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   color: #6B6B78;
   pointer-events: none;
   cursor: not-allowed;
-  padding: 0;
-  width: 48px;
 }
 
 .c0 svg {
@@ -675,31 +790,66 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   fill: #6B6B78;
 }
 
-.c0 svg {
-  width: unset;
+.c1 {
   height: unset;
-  margin-right: unset;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
-}
-
-<div>
-  <button
+  padding: 0;
+  background-color: unset;
+  border: none;
+  border-radius: 0;
+  color: #D8385E;
+}
+
+.c1 svg {
+  margin-right: 4px;
+  fill: #D8385E;
+}
+
+.c1:disabled,
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  box-shadow: unset;
+  background-color: unset;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
     aria-disabled="true"
-    class="c0"
+    class="c0 c1"
     disabled=""
   >
-    <svg
-      aria-hidden="true"
-      class="c1"
-      height="24"
-      width="24"
-    />
+    Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots disabled buttons With disabled prop should match snapshot with link Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with outline Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -771,46 +921,41 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 }
 
 .c1 {
-  height: unset;
-  padding: 0;
-  background-color: unset;
-  border: none;
-  border-radius: 0;
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
   color: #D8385E;
 }
 
 .c1 svg {
-  margin-right: 4px;
   fill: #D8385E;
 }
 
-.c1:disabled,
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  box-shadow: unset;
-  background-color: unset;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
   color: rgba(216,56,94,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(216,56,94,0.75);
 }
 
 .c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
   color: #6B6B78;
 }
 
@@ -829,7 +974,7 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 </div>
 `;
 
-exports[`<Button /> Snapshots disabled buttons With disabled prop should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with outline Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -871,6 +1016,8 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   color: #6B6B78;
   pointer-events: none;
   cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -900,6 +1047,44 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   fill: #6B6B78;
 }
 
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
 .c1 {
   background-color: transparent;
   border: 1px solid;
@@ -943,6 +1128,14 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   fill: #6B6B78;
 }
 
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
 <div>
   <button
     aria-disabled="true"
@@ -950,11 +1143,39 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
     disabled=""
   >
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots disabled buttons With disabled prop should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with outline Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -1074,13 +1295,15 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
     class="c0 c1"
     disabled=""
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots disabled buttons With disabled prop should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with outline Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -1122,6 +1345,8 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   color: #6B6B78;
   pointer-events: none;
   cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -1151,9 +1376,48 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   fill: #6B6B78;
 }
 
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
 .c1 {
   background-color: transparent;
-  border-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
   color: #D8385E;
 }
 
@@ -1162,33 +1426,30 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
 }
 
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
   color: rgba(216,56,94,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(216,56,94,0.75);
 }
 
 .c1:disabled {
   background-color: transparent;
-  border-color: transparent;
+  border-color: #6B6B78;
   color: #6B6B78;
 }
 
@@ -1196,18 +1457,57 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
   fill: #6B6B78;
 }
 
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
 <div>
   <button
     aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots disabled buttons With disabled prop should match snapshot with text Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with text Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -1329,13 +1629,12 @@ exports[`<Button /> Snapshots disabled buttons With disabled prop should match s
     class="c0 c1"
     disabled=""
   >
-    <svg />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With disabled prop should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With disabled prop should match snapshot with text Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -1406,18 +1705,66 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   fill: #6B6B78;
 }
 
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
 <div>
   <button
     aria-disabled="true"
-    class="c0"
+    class="c0 c1"
     disabled=""
   >
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With disabled prop should match snapshot with default Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with default Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -1437,7 +1784,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: auto;
+  width: 100%;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -1455,10 +1802,6 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #F5F5FA;
-  color: #6B6B78;
-  pointer-events: none;
-  cursor: not-allowed;
 }
 
 .c0 svg {
@@ -1484,28 +1827,16 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  fill: #6B6B78;
-}
-
 <div>
   <button
-    aria-disabled="true"
     class="c0"
-    disabled=""
   >
-    <svg />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With disabled prop should match snapshot with icon Button 1`] = `
-.c1 {
-  width: 24px;
-  height: 24px;
-}
-
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with default Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -1525,7 +1856,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: auto;
+  width: 100%;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -1547,8 +1878,8 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   color: #6B6B78;
   pointer-events: none;
   cursor: not-allowed;
-  padding: 0;
-  width: 48px;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -1579,30 +1910,82 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 }
 
 .c0 svg {
-  width: unset;
-  height: unset;
-  margin-right: unset;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
   <button
-    aria-disabled="true"
     class="c0"
     disabled=""
   >
-    <svg
-      aria-hidden="true"
+    Button
+    <div
       class="c1"
-      height="24"
-      width="24"
-    />
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With disabled prop should match snapshot with link Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with default Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -1622,7 +2005,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: auto;
+  width: 100%;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -1640,10 +2023,6 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #F5F5FA;
-  color: #6B6B78;
-  pointer-events: none;
-  cursor: not-allowed;
 }
 
 .c0 svg {
@@ -1669,70 +2048,171 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  fill: #6B6B78;
-}
+<div>
+  <button
+    class="c0"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
 
-.c1 {
-  height: unset;
-  padding: 0;
-  background-color: unset;
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with default Button with Icon and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
   border: none;
-  border-radius: 0;
-  color: #D8385E;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
-.c1 svg {
-  margin-right: 4px;
-  fill: #D8385E;
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
 }
 
-.c1:disabled,
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  box-shadow: unset;
-  background-color: unset;
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
 }
 
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c0:active svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(216,56,94,0.75);
+.c0 svg {
+  fill: #6B6B78;
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
+.c0 svg {
+  fill: transparent;
 }
 
-.c1:disabled {
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
   color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
   <button
-    aria-disabled="true"
-    class="c0 c1"
+    class="c0"
     disabled=""
   >
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With disabled prop should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with outline Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -1752,7 +2232,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: auto;
+  width: 100%;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -1770,10 +2250,6 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #F5F5FA;
-  color: #6B6B78;
-  pointer-events: none;
-  cursor: not-allowed;
 }
 
 .c0 svg {
@@ -1799,10 +2275,6 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  fill: #6B6B78;
-}
-
 .c1 {
   background-color: transparent;
   border: 1px solid;
@@ -1848,16 +2320,14 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
-    aria-disabled="true"
     class="c0 c1"
-    disabled=""
   >
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With disabled prop should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with outline Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -1877,7 +2347,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: auto;
+  width: 100%;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -1899,6 +2369,8 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   color: #6B6B78;
   pointer-events: none;
   cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -1928,6 +2400,44 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   fill: #6B6B78;
 }
 
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
 .c1 {
   background-color: transparent;
   border: 1px solid;
@@ -1971,19 +2481,53 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   fill: #6B6B78;
 }
 
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
 <div>
   <button
-    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
-    <svg />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With disabled prop should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with outline Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -2003,7 +2547,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: auto;
+  width: 100%;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -2021,10 +2565,6 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #F5F5FA;
-  color: #6B6B78;
-  pointer-events: none;
-  cursor: not-allowed;
 }
 
 .c0 svg {
@@ -2050,13 +2590,10 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  fill: #6B6B78;
-}
-
 .c1 {
   background-color: transparent;
-  border-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
   color: #D8385E;
 }
 
@@ -2065,33 +2602,30 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 }
 
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
   color: rgba(216,56,94,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(216,56,94,0.75);
 }
 
 .c1:disabled {
   background-color: transparent;
-  border-color: transparent;
+  border-color: #6B6B78;
   color: #6B6B78;
 }
 
@@ -2101,16 +2635,17 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 
 <div>
   <button
-    aria-disabled="true"
     class="c0 c1"
-    disabled=""
   >
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With disabled prop should match snapshot with text Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with outline Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -2130,7 +2665,7 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: auto;
+  width: 100%;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -2152,6 +2687,8 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   color: #6B6B78;
   pointer-events: none;
   cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -2181,9 +2718,48 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   fill: #6B6B78;
 }
 
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
 .c1 {
   background-color: transparent;
-  border-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
   color: #D8385E;
 }
 
@@ -2192,33 +2768,30 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
 }
 
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
   color: rgba(216,56,94,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(216,56,94,0.75);
 }
 
 .c1:disabled {
   background-color: transparent;
-  border-color: transparent;
+  border-color: #6B6B78;
   color: #6B6B78;
 }
 
@@ -2226,19 +2799,56 @@ exports[`<Button /> Snapshots primary buttons With disabled prop should match sn
   fill: #6B6B78;
 }
 
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
 <div>
   <button
-    aria-disabled="true"
     class="c0 c1"
     disabled=""
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With full prop should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with text Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -2301,89 +2911,61 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
   fill: #FFFFFF;
 }
 
-<div>
-  <button
-    class="c0"
-  >
-    Button
-  </button>
-</div>
-`;
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #D8385E;
+}
 
-exports[`<Button /> Snapshots primary buttons With full prop should match snapshot with default Button with Icon 1`] = `
-.c0 {
-  box-sizing: border-box;
-  text-align: center;
-  outline: none;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: 100%;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
-  background-color: #D8385E;
-  border: none;
-  border-radius: 9999px;
-  color: #FFFFFF;
-  font-size: 16px;
-  font-weight: 500;
-  font-family: Rubik;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  line-height: 1;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+.c1 svg {
+  fill: #D8385E;
 }
 
-.c0 svg {
-  width: 24px;
-  height: 24px;
-  fill: #FFFFFF;
-  margin-right: 8px;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
 }
 
-.c0:active {
-  background-color: rgba(216,56,94,0.75);
-  color: #FFFFFF;
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
 }
 
-.c0:active svg {
-  fill: #FFFFFF;
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
 }
 
 <div>
   <button
-    class="c0"
+    class="c0 c1"
   >
-    <svg />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With full prop should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With full prop should match snapshot with text Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -2448,8 +3030,7 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
 
 .c1 {
   background-color: transparent;
-  border: 1px solid;
-  border-color: #D8385E;
+  border-color: transparent;
   color: #D8385E;
 }
 
@@ -2458,30 +3039,33 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
 }
 
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #D8385E;
-  color: #FFFFFF;
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
 }
 
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
 }
 
+.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(216,56,94,0.75);
   color: rgba(216,56,94,0.75);
-  box-shadow: none;
 }
 
+.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(216,56,94,0.75);
 }
 
 .c1:disabled {
   background-color: transparent;
-  border-color: #6B6B78;
+  border-color: transparent;
   color: #6B6B78;
 }
 
@@ -2493,12 +3077,15 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
   <button
     class="c0 c1"
   >
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With full prop should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with default Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -2518,15 +3105,15 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: 100%;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  width: auto;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -2539,8 +3126,8 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -2561,60 +3148,16 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border: 1px solid;
-  border-color: #D8385E;
-  color: #D8385E;
-}
-
-.c1 svg {
-  fill: #D8385E;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #D8385E;
-  color: #FFFFFF;
-}
-
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(216,56,94,0.75);
-  color: rgba(216,56,94,0.75);
-  box-shadow: none;
-}
-
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
-}
-
-.c1:disabled {
-  background-color: transparent;
-  border-color: #6B6B78;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
-}
-
 <div>
   <button
-    class="c0 c1"
+    class="c0"
   >
-    <svg />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With full prop should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with default Button when is Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -2634,15 +3177,15 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: 100%;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  width: auto;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -2652,11 +3195,17 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -2677,61 +3226,87 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #D8385E;
-}
-
-.c1 svg {
-  fill: #D8385E;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c0 svg {
+  fill: #6B6B78;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c0 svg {
+  fill: transparent;
 }
 
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(216,56,94,0.75);
+.c2 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
   <button
-    class="c0 c1"
+    class="c0"
+    disabled=""
   >
     Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="16"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With full prop should match snapshot with text Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with default Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -2751,15 +3326,15 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: 100%;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  width: auto;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -2772,8 +3347,8 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -2794,62 +3369,19 @@ exports[`<Button /> Snapshots primary buttons With full prop should match snapsh
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #D8385E;
-}
+<div>
+  <button
+    class="c0"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
 
-.c1 svg {
-  fill: #D8385E;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
-}
-
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
-}
-
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(216,56,94,0.75);
-}
-
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
-}
-
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    <svg />
-    Button
-  </button>
-</div>
-`;
-
-exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with default Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -2870,14 +3402,14 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -2887,13 +3419,17 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #D8385E;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -2915,33 +3451,94 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
 }
 
 .c0 svg {
-  fill: #D8385E;
+  fill: #6B6B78;
 }
 
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(216,56,94,0.75);
+.c0 svg {
+  fill: transparent;
 }
 
-.c0:active svg {
-  fill: rgba(216,56,94,0.75);
+.c2 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
   <button
     class="c0"
+    disabled=""
   >
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="16"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with default Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with icon Button 1`] = `
+.c1 {
+  width: 16px;
+  height: 16px;
+}
+
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -2962,14 +3559,14 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -2979,13 +3576,13 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #D8385E;
+  padding: 0;
+  width: 32px;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -3007,37 +3604,52 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
 }
 
 .c0 svg {
-  fill: #D8385E;
-}
-
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(216,56,94,0.75);
-}
-
-.c0:active svg {
-  fill: rgba(216,56,94,0.75);
-}
-
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
 }
 
 <div>
   <button
     class="c0"
   >
-    <svg />
-    Button
+    <svg
+      aria-hidden="true"
+      class="c1"
+      height="16"
+      role="img"
+      width="16"
+    />
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with icon Button 1`] = `
-.c1 {
-  width: 24px;
-  height: 24px;
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with icon Button and Loading 1`] = `
+.c1 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c1 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
 }
 
 .c0 {
@@ -3060,14 +3672,14 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -3077,15 +3689,19 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #D8385E;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
   padding: 0;
-  width: 48px;
+  width: 32px;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -3107,21 +3723,11 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
 }
 
 .c0 svg {
-  fill: #D8385E;
-}
-
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(216,56,94,0.75);
-}
-
-.c0:active svg {
-  fill: rgba(216,56,94,0.75);
+  fill: #6B6B78;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+.c0 svg {
+  fill: transparent;
 }
 
 .c0 svg {
@@ -3135,18 +3741,37 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
 <div>
   <button
     class="c0"
+    disabled=""
   >
-    <svg
-      aria-hidden="true"
+    <span
+      aria-label="loading-icon"
       class="c1"
-      height="24"
-      width="24"
-    />
+      color="#6B6B78"
+      size="16"
+    >
+      <span
+        class="spinner"
+      >
+        <svg
+          class="circular"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="path"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </span>
+    </span>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with outline Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -3167,14 +3792,14 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -3184,13 +3809,11 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #D8385E;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -3211,31 +3834,11 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  fill: #D8385E;
-}
-
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(216,56,94,0.75);
-}
-
-.c0:active svg {
-  fill: rgba(216,56,94,0.75);
-}
-
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
-}
-
 .c1 {
   background-color: transparent;
   border: 1px solid;
   border-color: #D8385E;
   color: #D8385E;
-  border-color: #FFFFFF;
-  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -3274,50 +3877,16 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   fill: #6B6B78;
 }
 
-.c1 svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #FFFFFF;
-  color: #D8385E;
-}
-
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #D8385E;
-}
-
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(255,255,255,0.75);
-  color: rgba(255,255,255,0.75);
-}
+<div>
+  <button
+    class="c0 c1"
+  >
+    Button
+  </button>
+</div>
+`;
 
-.c1:not([disabled]):active svg {
-  fill: rgba(255,255,255,0.75);
-}
-
-.c1:disabled {
-  border-color: #6B6B78;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
-}
-
-<div>
-  <button
-    class="c0 c1"
-  >
-    Button
-  </button>
-</div>
-`;
-
-exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with outline Button when is Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -3338,14 +3907,14 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -3355,13 +3924,17 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #D8385E;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -3383,21 +3956,45 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
 }
 
 .c0 svg {
-  fill: #D8385E;
+  fill: #6B6B78;
 }
 
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(216,56,94,0.75);
+.c0 svg {
+  fill: transparent;
 }
 
-.c0:active svg {
-  fill: rgba(216,56,94,0.75);
+.c3 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 .c1 {
@@ -3405,8 +4002,6 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   border: 1px solid;
   border-color: #D8385E;
   color: #D8385E;
-  border-color: #FFFFFF;
-  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -3445,51 +4040,53 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   fill: #6B6B78;
 }
 
-.c1 svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #FFFFFF;
-  color: #D8385E;
-}
-
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #D8385E;
-}
-
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(255,255,255,0.75);
-  color: rgba(255,255,255,0.75);
-}
-
-.c1:not([disabled]):active svg {
-  fill: rgba(255,255,255,0.75);
-}
-
 .c1:disabled {
-  border-color: #6B6B78;
-  color: #6B6B78;
+  color: transparent;
 }
 
 .c1:disabled svg {
-  fill: #6B6B78;
+  fill: transparent;
 }
 
 <div>
   <button
     class="c0 c1"
+    disabled=""
   >
-    <svg />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="16"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with outline Button with Icon 2`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with outline Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -3510,14 +4107,14 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -3527,13 +4124,11 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #D8385E;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -3554,31 +4149,11 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  fill: #D8385E;
-}
-
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(216,56,94,0.75);
-}
-
-.c0:active svg {
-  fill: rgba(216,56,94,0.75);
-}
-
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
-}
-
 .c1 {
   background-color: transparent;
   border: 1px solid;
   border-color: #D8385E;
   color: #D8385E;
-  border-color: #FFFFFF;
-  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -3617,51 +4192,19 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   fill: #6B6B78;
 }
 
-.c1 svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #FFFFFF;
-  color: #D8385E;
-}
-
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #D8385E;
-}
-
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(255,255,255,0.75);
-  color: rgba(255,255,255,0.75);
-}
-
-.c1:not([disabled]):active svg {
-  fill: rgba(255,255,255,0.75);
-}
-
-.c1:disabled {
-  border-color: #6B6B78;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
-}
-
 <div>
   <button
     class="c0 c1"
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with outline Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -3682,14 +4225,14 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -3699,13 +4242,17 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #D8385E;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -3727,28 +4274,52 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
 }
 
 .c0 svg {
-  fill: #D8385E;
+  fill: #6B6B78;
 }
 
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(216,56,94,0.75);
+.c0 svg {
+  fill: transparent;
 }
 
-.c0:active svg {
-  fill: rgba(216,56,94,0.75);
+.c3 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 .c1 {
   background-color: transparent;
-  border-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
   color: #D8385E;
-  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -3756,72 +4327,87 @@ exports[`<Button /> Snapshots primary buttons With inverted prop should match sn
 }
 
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
   color: rgba(216,56,94,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(216,56,94,0.75);
 }
 
-.c1 svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(255,255,255,0.5);
-}
-
-.c1:not([disabled]):hover svg {
-  fill: rgba(255,255,255,0.5);
-}
-
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(255,255,255,0.75);
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(255,255,255,0.75);
+.c1:disabled svg {
+  fill: #6B6B78;
 }
 
 .c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
+  color: transparent;
 }
 
 .c1:disabled svg {
-  fill: #6B6B78;
+  fill: transparent;
 }
 
 <div>
   <button
     class="c0 c1"
+    disabled=""
   >
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="16"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With small prop should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with text Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -3884,16 +4470,61 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   fill: #FFFFFF;
 }
 
-<div>
-  <button
-    class="c0"
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
   >
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With small prop should match snapshot with default Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop With small prop should match snapshot with text Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -3956,22 +4587,64 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   fill: #FFFFFF;
 }
 
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
 <div>
   <button
-    class="c0"
+    class="c0 c1"
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With small prop should match snapshot with icon Button 1`] = `
-.c1 {
-  width: 16px;
-  height: 16px;
-}
-
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with default Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -3992,14 +4665,14 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -4009,13 +4682,13 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0;
-  width: 32px;
+  background-color: #FFFFFF;
+  color: #D8385E;
 }
 
 .c0 svg {
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -4037,28 +4710,33 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
 }
 
 .c0 svg {
-  width: unset;
-  height: unset;
-  margin-right: unset;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
+  fill: #D8385E;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(216,56,94,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
 }
 
 <div>
   <button
     class="c0"
   >
-    <svg
-      aria-hidden="true"
-      class="c1"
-      height="16"
-      width="16"
-    />
+    Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With small prop should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with default Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -4079,14 +4757,14 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -4096,11 +4774,19 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #D8385E;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -4121,59 +4807,105 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border: 1px solid;
-  border-color: #D8385E;
-  color: #D8385E;
+.c0 svg {
+  fill: #6B6B78;
 }
 
-.c1 svg {
+.c0 svg {
   fill: #D8385E;
 }
 
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #D8385E;
-  color: #FFFFFF;
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(216,56,94,0.75);
 }
 
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
+.c0:active svg {
+  fill: rgba(216,56,94,0.75);
 }
 
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(216,56,94,0.75);
-  color: rgba(216,56,94,0.75);
-  box-shadow: none;
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
 }
 
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
+.c0 svg {
+  fill: transparent;
 }
 
-.c1:disabled {
-  background-color: transparent;
-  border-color: #6B6B78;
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
   color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
   <button
-    class="c0 c1"
+    class="c0"
+    disabled=""
   >
     Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With small prop should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with default Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -4194,14 +4926,14 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -4211,11 +4943,13 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #FFFFFF;
+  color: #D8385E;
 }
 
 .c0 svg {
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -4236,60 +4970,37 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border: 1px solid;
-  border-color: #D8385E;
-  color: #D8385E;
-}
-
-.c1 svg {
+.c0 svg {
   fill: #D8385E;
 }
 
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #D8385E;
-  color: #FFFFFF;
-}
-
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(216,56,94,0.75);
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
   color: rgba(216,56,94,0.75);
-  box-shadow: none;
 }
 
-.c1:not([disabled]):active svg {
+.c0:active svg {
   fill: rgba(216,56,94,0.75);
 }
 
-.c1:disabled {
-  background-color: transparent;
-  border-color: #6B6B78;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
 }
 
 <div>
   <button
-    class="c0 c1"
+    class="c0"
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With small prop should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with default Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -4310,14 +5021,14 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -4327,11 +5038,19 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #D8385E;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -4352,61 +5071,113 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #D8385E;
+.c0 svg {
+  fill: #6B6B78;
 }
 
-.c1 svg {
+.c0 svg {
   fill: #D8385E;
 }
 
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(216,56,94,0.75);
 }
 
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c0:active svg {
+  fill: rgba(216,56,94,0.75);
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
 }
 
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(216,56,94,0.75);
+.c0 svg {
+  fill: transparent;
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
   <button
-    class="c0 c1"
+    class="c0"
+    disabled=""
   >
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons With small prop should match snapshot with text Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with icon Button 1`] = `
+.c1 {
+  width: 24px;
+  height: 24px;
+}
+
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -4427,14 +5198,14 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -4444,11 +5215,15 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #FFFFFF;
+  color: #D8385E;
+  padding: 0;
+  width: 48px;
 }
 
 .c0 svg {
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -4469,62 +5244,73 @@ exports[`<Button /> Snapshots primary buttons With small prop should match snaps
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #D8385E;
-}
-
-.c1 svg {
+.c0 svg {
   fill: #D8385E;
 }
 
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
-}
-
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
-}
-
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
   color: rgba(216,56,94,0.75);
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
+.c0:active svg {
   fill: rgba(216,56,94,0.75);
 }
 
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
 }
 
 <div>
   <button
-    class="c0 c1"
+    class="c0"
   >
-    <svg />
-    Button
+    <svg
+      aria-hidden="true"
+      class="c1"
+      height="24"
+      role="img"
+      width="24"
+    />
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons Without props should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with icon Button and Loading 1`] = `
+.c1 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c1 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -4562,6 +5348,16 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #D8385E;
+  position: relative;
+  color: transparent;
+  padding: 0;
+  width: 48px;
 }
 
 .c0 svg {
@@ -4587,16 +5383,74 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: #D8385E;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(216,56,94,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
 <div>
   <button
     class="c0"
+    disabled=""
   >
-    Button
+    <span
+      aria-label="loading-icon"
+      class="c1"
+      color="#6B6B78"
+      size="20"
+    >
+      <span
+        class="spinner"
+      >
+        <svg
+          class="circular"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="path"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </span>
+    </span>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons Without props should match snapshot with default Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with outline Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -4634,6 +5488,8 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #FFFFFF;
+  color: #D8385E;
 }
 
 .c0 svg {
@@ -4659,109 +5515,113 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #FFFFFF;
 }
 
-<div>
-  <button
-    class="c0"
-  >
-    <svg />
-    Button
-  </button>
-</div>
-`;
+.c0 svg {
+  fill: #D8385E;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(216,56,94,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
 
-exports[`<Button /> Snapshots primary buttons Without props should match snapshot with icon Button 1`] = `
 .c1 {
-  width: 24px;
-  height: 24px;
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+  border-color: #FFFFFF;
+  color: #FFFFFF;
 }
 
-.c0 {
-  box-sizing: border-box;
-  text-align: center;
-  outline: none;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
   background-color: #D8385E;
-  border: none;
-  border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
-  font-weight: 500;
-  font-family: Rubik;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  line-height: 1;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0;
-  width: 48px;
 }
 
-.c0 svg {
-  width: 24px;
-  height: 24px;
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
   fill: #FFFFFF;
-  margin-right: 8px;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
 }
 
-.c0:active {
-  background-color: rgba(216,56,94,0.75);
-  color: #FFFFFF;
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
 }
 
-.c0:active svg {
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1 svg {
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  width: unset;
-  height: unset;
-  margin-right: unset;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #FFFFFF;
+  color: #D8385E;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(255,255,255,0.75);
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
+.c1:disabled {
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
 }
 
 <div>
   <button
-    class="c0"
+    class="c0 c1"
   >
-    <svg
-      aria-hidden="true"
-      class="c1"
-      height="24"
-      width="24"
-    />
+    Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons Without props should match snapshot with link Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with outline Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -4799,6 +5659,14 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #D8385E;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -4824,47 +5692,138 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: #D8385E;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(216,56,94,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
 .c1 {
-  height: unset;
-  padding: 0;
-  background-color: unset;
-  border: none;
-  border-radius: 0;
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
   color: #D8385E;
+  border-color: #FFFFFF;
+  color: #FFFFFF;
 }
 
 .c1 svg {
-  margin-right: 4px;
   fill: #D8385E;
 }
 
-.c1:disabled,
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
 .c1:not([disabled]):active {
-  box-shadow: unset;
-  background-color: unset;
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #FFFFFF;
+  color: #D8385E;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #D8385E;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
-  color: rgba(216,56,94,0.75);
+  background-color: transparent;
+  border-color: rgba(255,255,255,0.75);
+  color: rgba(255,255,255,0.75);
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
+  fill: rgba(255,255,255,0.75);
 }
 
 .c1:disabled {
+  border-color: #6B6B78;
   color: #6B6B78;
 }
 
@@ -4872,16 +5831,53 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #6B6B78;
 }
 
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
 <div>
   <button
     class="c0 c1"
+    disabled=""
   >
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons Without props should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with outline Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -4919,6 +5915,8 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #FFFFFF;
+  color: #D8385E;
 }
 
 .c0 svg {
@@ -4944,11 +5942,31 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #D8385E;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(216,56,94,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
 .c1 {
   background-color: transparent;
   border: 1px solid;
   border-color: #D8385E;
   color: #D8385E;
+  border-color: #FFFFFF;
+  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -4987,16 +6005,53 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #6B6B78;
 }
 
-<div>
-  <button
-    class="c0 c1"
-  >
-    Button
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #FFFFFF;
+  color: #D8385E;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(255,255,255,0.75);
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
+.c1:disabled {
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    <svg
+      role="img"
+    />
+    Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons Without props should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with outline Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5034,6 +6089,14 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #D8385E;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -5059,11 +6122,73 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: #D8385E;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(216,56,94,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
 .c1 {
   background-color: transparent;
   border: 1px solid;
   border-color: #D8385E;
   color: #D8385E;
+  border-color: #FFFFFF;
+  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -5102,17 +6227,90 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #6B6B78;
 }
 
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #FFFFFF;
+  color: #D8385E;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(255,255,255,0.75);
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
+.c1:disabled {
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
 <div>
   <button
     class="c0 c1"
+    disabled=""
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons Without props should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons With inverted prop should match snapshot with text Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5150,6 +6348,8 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #FFFFFF;
+  color: #D8385E;
 }
 
 .c0 svg {
@@ -5175,10 +6375,29 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #D8385E;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(216,56,94,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
 .c1 {
   background-color: transparent;
   border-color: transparent;
   color: #D8385E;
+  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -5210,6 +6429,28 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: rgba(216,56,94,0.75);
 }
 
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(255,255,255,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(255,255,255,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
 .c1:disabled {
   background-color: transparent;
   border-color: transparent;
@@ -5229,7 +6470,7 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
 </div>
 `;
 
-exports[`<Button /> Snapshots primary buttons Without props should match snapshot with text Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with default Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5292,62 +6533,16 @@ exports[`<Button /> Snapshots primary buttons Without props should match snapsho
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #D8385E;
-}
-
-.c1 svg {
-  fill: #D8385E;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
-}
-
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
-}
-
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(216,56,94,0.75);
-}
-
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
-}
-
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
-}
-
 <div>
   <button
-    class="c0 c1"
+    class="c0"
   >
-    <svg />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With full prop should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with default Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5367,11 +6562,11 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: 100%;
+  width: auto;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
-  background-color: #231B22;
+  background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
@@ -5385,6 +6580,12 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -5398,11 +6599,11 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
 
 .c0:not([disabled]):hover,
 .c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
 }
 
 .c0:active {
-  background-color: rgba(35,27,34,0.75);
+  background-color: rgba(216,56,94,0.75);
   color: #FFFFFF;
 }
 
@@ -5410,16 +6611,87 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
 <div>
   <button
     class="c0"
+    disabled=""
   >
     Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With full prop should match snapshot with default Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with default Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5439,7 +6711,6950 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: 100%;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+<div>
+  <button
+    class="c0"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with default Button with Icon and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <button
+    class="c0"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with icon Button 1`] = `
+.c1 {
+  width: 24px;
+  height: 24px;
+}
+
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0;
+  width: 48px;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+<div>
+  <button
+    class="c0"
+  >
+    <svg
+      aria-hidden="true"
+      class="c1"
+      height="24"
+      role="img"
+      width="24"
+    />
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with link Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  height: unset;
+  padding: 0;
+  background-color: unset;
+  border: none;
+  border-radius: 0;
+  color: #D8385E;
+}
+
+.c1 svg {
+  margin-right: 4px;
+  fill: #D8385E;
+}
+
+.c1:disabled,
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  box-shadow: unset;
+  background-color: unset;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with outline Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with outline Button and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
+<div>
+  <button
+    class="c0 c1"
+    disabled=""
+  >
+    Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with outline Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with outline Button with Icon and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <button
+    class="c0"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with text Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with text Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons Without props should match snapshot with text icon and Loading 1`] = `
+.c1 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c1 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+  padding: 0;
+  width: 48px;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+<div>
+  <button
+    class="c0"
+    disabled=""
+  >
+    <span
+      aria-label="loading-icon"
+      class="c1"
+      color="#6B6B78"
+      size="20"
+    >
+      <span
+        class="spinner"
+      >
+        <svg
+          class="circular"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="path"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons buttons rendering as an anchor Default Button with href prop 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+<div>
+  <a
+    class="c0"
+    href="http://www.gympass.com"
+    target="blank"
+  >
+    Default Button as an anchor
+  </a>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons buttons rendering as an anchor Default Button with href prop and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <a
+    class="c0"
+    disabled=""
+    href="http://www.gympass.com"
+    target="blank"
+  >
+    Default Button as an anchor
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </a>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons buttons rendering as an anchor Link Button with href prop 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  height: unset;
+  padding: 0;
+  background-color: unset;
+  border: none;
+  border-radius: 0;
+  color: #D8385E;
+}
+
+.c1 svg {
+  margin-right: 4px;
+  fill: #D8385E;
+}
+
+.c1:disabled,
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  box-shadow: unset;
+  background-color: unset;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <a
+    class="c0 c1"
+    href="http://www.gympass.com"
+    target="blank"
+  >
+    Link as an anchor
+  </a>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons buttons rendering as an anchor Outline Button with href prop 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <a
+    class="c0 c1"
+    href="http://www.gympass.com"
+    target="blank"
+  >
+    Outline as an anchor
+  </a>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons buttons rendering as an anchor Outline Button with href prop and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
+<div>
+  <a
+    class="c0 c1"
+    disabled=""
+    href="http://www.gympass.com"
+    target="blank"
+  >
+    Outline as an anchor
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </a>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons buttons rendering as an anchor Text Button with href prop 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <a
+    class="c0 c1"
+    href="http://www.gympass.com"
+    target="blank"
+  >
+    Text as an anchor
+  </a>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with default Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0"
+    disabled=""
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with default Button and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0"
+    disabled=""
+  >
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with default Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with default Button with Icon and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with icon Button 1`] = `
+.c1 {
+  width: 24px;
+  height: 24px;
+}
+
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  padding: 0;
+  width: 48px;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0"
+    disabled=""
+  >
+    <svg
+      aria-hidden="true"
+      class="c1"
+      height="24"
+      role="img"
+      width="24"
+    />
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with icon Button and Loading 1`] = `
+.c1 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c1 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+  padding: 0;
+  width: 48px;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0"
+    disabled=""
+  >
+    <span
+      aria-label="loading-icon"
+      class="c1"
+      color="#6B6B78"
+      size="20"
+    >
+      <span
+        class="spinner"
+      >
+        <svg
+          class="circular"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="path"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with link Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c1 {
+  height: unset;
+  padding: 0;
+  background-color: unset;
+  border: none;
+  border-radius: 0;
+  color: #D8385E;
+}
+
+.c1 svg {
+  margin-right: 4px;
+  fill: #D8385E;
+}
+
+.c1:disabled,
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  box-shadow: unset;
+  background-color: unset;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0 c1"
+    disabled=""
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with outline Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0 c1"
+    disabled=""
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with outline Button and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0 c1"
+    disabled=""
+  >
+    Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with outline Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0 c1"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with outline Button with Icon and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #D8385E;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #D8385E;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(216,56,94,0.75);
+  color: rgba(216,56,94,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0 c1"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with text Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0 c1"
+    disabled=""
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons disabled buttons With disabled prop should match snapshot with text Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #D8385E;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+}
+
+.c0:active {
+  background-color: rgba(216,56,94,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #D8385E;
+}
+
+.c1 svg {
+  fill: #D8385E;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    aria-disabled="true"
+    class="c0 c1"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with default Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+<div>
+  <button
+    class="c0"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with default Button and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <button
+    class="c0"
+    disabled=""
+  >
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with default Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+<div>
+  <button
+    class="c0"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with default Button with Icon and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <button
+    class="c0"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with outline Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
+  color: #231B22;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with outline Button and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
+  color: #231B22;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
+<div>
+  <button
+    class="c0 c1"
+    disabled=""
+  >
+    Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with outline Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
+  color: #231B22;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with outline Button with Icon and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
+  color: #231B22;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
+<div>
+  <button
+    class="c0 c1"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with text Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #231B22;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(35,27,34,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(35,27,34,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(35,27,34,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With full prop should match snapshot with text Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #231B22;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(35,27,34,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(35,27,34,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(35,27,34,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with default Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #FFFFFF;
+  color: #231B22;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+<div>
+  <button
+    class="c0"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with default Button and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #231B22;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <button
+    class="c0"
+    disabled=""
+  >
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with default Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #FFFFFF;
+  color: #231B22;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+<div>
+  <button
+    class="c0"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with default Button with Icon and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #231B22;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <button
+    class="c0"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with icon Button 1`] = `
+.c1 {
+  width: 24px;
+  height: 24px;
+}
+
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #FFFFFF;
+  color: #231B22;
+  padding: 0;
+  width: 48px;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+<div>
+  <button
+    class="c0"
+  >
+    <svg
+      aria-hidden="true"
+      class="c1"
+      height="24"
+      role="img"
+      width="24"
+    />
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with icon Button and Loading 1`] = `
+.c1 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c1 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #231B22;
+  position: relative;
+  color: transparent;
+  padding: 0;
+  width: 48px;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+<div>
+  <button
+    class="c0"
+    disabled=""
+  >
+    <span
+      aria-label="loading-icon"
+      class="c1"
+      color="#6B6B78"
+      size="20"
+    >
+      <span
+        class="spinner"
+      >
+        <svg
+          class="circular"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="path"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with outline Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #FFFFFF;
+  color: #231B22;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
+  color: #231B22;
+  border-color: #FFFFFF;
+  color: #FFFFFF;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #FFFFFF;
+  color: #231B22;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(255,255,255,0.75);
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
+.c1:disabled {
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with outline Button and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #231B22;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
+  color: #231B22;
+  border-color: #FFFFFF;
+  color: #FFFFFF;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #FFFFFF;
+  color: #231B22;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(255,255,255,0.75);
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
+.c1:disabled {
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
+<div>
+  <button
+    class="c0 c1"
+    disabled=""
+  >
+    Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with outline Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #FFFFFF;
+  color: #231B22;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
+  color: #231B22;
+  border-color: #FFFFFF;
+  color: #FFFFFF;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #FFFFFF;
+  color: #231B22;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(255,255,255,0.75);
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
+.c1:disabled {
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+<div>
+  <button
+    class="c0 c1"
+  >
+    <svg
+      role="img"
+    />
+    Button
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with outline Button with Icon and Loading 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  background-color: #FFFFFF;
+  color: #231B22;
+  position: relative;
+  color: transparent;
+}
+
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c1 {
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
+  color: #231B22;
+  border-color: #FFFFFF;
+  color: #FFFFFF;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus {
+  background-color: #FFFFFF;
+  color: #231B22;
+}
+
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(255,255,255,0.75);
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
+.c1:disabled {
+  border-color: #6B6B78;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
+<div>
+  <button
+    class="c0 c1"
+    disabled=""
+  >
+    <svg
+      role="img"
+    />
+    Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with text Button 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -5457,6 +13672,8 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #FFFFFF;
+  color: #231B22;
 }
 
 .c0 svg {
@@ -5482,17 +13699,102 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(35,27,34,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(35,27,34,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(35,27,34,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(255,255,255,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(255,255,255,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
+}
+
 <div>
   <button
-    class="c0"
+    class="c0 c1"
   >
-    <svg />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With full prop should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with text Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5512,7 +13814,7 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: 100%;
+  width: auto;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -5530,6 +13832,8 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #FFFFFF;
+  color: #231B22;
 }
 
 .c0 svg {
@@ -5551,46 +13855,89 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   color: #FFFFFF;
 }
 
-.c0:active svg {
-  fill: #FFFFFF;
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #231B22;
+  color: #FFFFFF;
+}
+
+.c1 svg {
+  fill: #231B22;
+}
+
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(35,27,34,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(35,27,34,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(35,27,34,0.75);
 }
 
-.c1 {
-  background-color: transparent;
-  border: 1px solid;
-  border-color: #231B22;
-  color: #231B22;
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
 }
 
 .c1 svg {
-  fill: #231B22;
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #231B22;
-  color: #FFFFFF;
+.c1:not([disabled]):hover {
+  color: rgba(255,255,255,0.5);
 }
 
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
+.c1:not([disabled]):hover svg {
+  fill: rgba(255,255,255,0.5);
 }
 
+.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(35,27,34,0.75);
-  color: rgba(35,27,34,0.75);
-  box-shadow: none;
+  color: rgba(255,255,255,0.75);
 }
 
+.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
-  fill: rgba(35,27,34,0.75);
+  fill: rgba(255,255,255,0.75);
 }
 
 .c1:disabled {
   background-color: transparent;
-  border-color: #6B6B78;
+  border-color: transparent;
   color: #6B6B78;
 }
 
@@ -5602,12 +13949,15 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   <button
     class="c0 c1"
   >
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With full prop should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With inverted prop should match snapshot with text Button with Icon 2`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5627,7 +13977,7 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: 100%;
+  width: auto;
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
@@ -5645,6 +13995,8 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #FFFFFF;
+  color: #231B22;
 }
 
 .c0 svg {
@@ -5670,11 +14022,29 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #231B22;
+}
+
+.c0:active {
+  background-color: rgba(255,255,255,0.75);
+  color: rgba(35,27,34,0.75);
+}
+
+.c0:active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+}
+
 .c1 {
   background-color: transparent;
-  border: 1px solid;
-  border-color: #231B22;
+  border-color: transparent;
   color: #231B22;
+  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -5682,30 +14052,55 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
 }
 
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #231B22;
-  color: #FFFFFF;
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
 }
 
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
+.c1:not([disabled]):hover {
+  color: rgba(35,27,34,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(35,27,34,0.5);
 }
 
+.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(35,27,34,0.75);
   color: rgba(35,27,34,0.75);
-  box-shadow: none;
 }
 
+.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(35,27,34,0.75);
 }
 
+.c1 svg {
+  fill: #FFFFFF;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(255,255,255,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(255,255,255,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(255,255,255,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(255,255,255,0.75);
+}
+
 .c1:disabled {
   background-color: transparent;
-  border-color: #6B6B78;
+  border-color: transparent;
   color: #6B6B78;
 }
 
@@ -5717,13 +14112,15 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   <button
     class="c0 c1"
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With full prop should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with default Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5743,15 +14140,15 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: 100%;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  width: auto;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -5764,8 +14161,8 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -5786,61 +14183,16 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #231B22;
-}
-
-.c1 svg {
-  fill: #231B22;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(35,27,34,0.5);
-}
-
-.c1:not([disabled]):hover svg {
-  fill: rgba(35,27,34,0.5);
-}
-
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(35,27,34,0.75);
-}
-
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(35,27,34,0.75);
-}
-
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
-}
-
 <div>
   <button
-    class="c0 c1"
+    class="c0"
   >
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With full prop should match snapshot with text Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with default Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5860,15 +14212,15 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  width: 100%;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  width: auto;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -5878,11 +14230,17 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -5903,62 +14261,162 @@ exports[`<Button /> Snapshots secondary buttons With full prop should match snap
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #231B22;
+.c0 svg {
+  fill: #6B6B78;
 }
 
-.c1 svg {
-  fill: #231B22;
+.c0 svg {
+  fill: transparent;
 }
 
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
+.c2 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c1:not([disabled]):hover {
-  color: rgba(35,27,34,0.5);
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(35,27,34,0.5);
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+<div>
+  <button
+    class="c0"
+    disabled=""
+  >
+    Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="16"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with default Button with Icon 1`] = `
+.c0 {
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: auto;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
+  background-color: #231B22;
+  border: none;
+  border-radius: 9999px;
+  color: #FFFFFF;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: Rubik;
+  -webkit-letter-spacing: normal;
+  -moz-letter-spacing: normal;
+  -ms-letter-spacing: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
 }
 
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(35,27,34,0.75);
+.c0 svg {
+  width: 16px;
+  height: 16px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(35,27,34,0.75);
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
 }
 
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c0:active svg {
+  fill: #FFFFFF;
 }
 
 <div>
   <button
-    class="c0 c1"
+    class="c0"
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With inverted prop should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with default Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -5979,14 +14437,14 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -5996,13 +14454,17 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #231B22;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -6024,33 +14486,94 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 }
 
 .c0 svg {
-  fill: #231B22;
+  fill: #6B6B78;
 }
 
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(35,27,34,0.75);
+.c0 svg {
+  fill: transparent;
 }
 
-.c0:active svg {
-  fill: rgba(35,27,34,0.75);
+.c2 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
   <button
     class="c0"
+    disabled=""
   >
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="16"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With inverted prop should match snapshot with default Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with icon Button 1`] = `
+.c1 {
+  width: 16px;
+  height: 16px;
+}
+
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -6071,14 +14594,14 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -6088,13 +14611,13 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #231B22;
+  padding: 0;
+  width: 32px;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -6116,37 +14639,52 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 }
 
 .c0 svg {
-  fill: #231B22;
-}
-
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(35,27,34,0.75);
-}
-
-.c0:active svg {
-  fill: rgba(35,27,34,0.75);
-}
-
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
 }
 
 <div>
   <button
     class="c0"
   >
-    <svg />
-    Button
+    <svg
+      aria-hidden="true"
+      class="c1"
+      height="16"
+      role="img"
+      width="16"
+    />
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With inverted prop should match snapshot with icon Button 1`] = `
-.c1 {
-  width: 24px;
-  height: 24px;
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with icon Button and Loading 1`] = `
+.c1 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c1 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
 }
 
 .c0 {
@@ -6169,14 +14707,14 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -6186,15 +14724,19 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #231B22;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
   padding: 0;
-  width: 48px;
+  width: 32px;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -6216,21 +14758,11 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 }
 
 .c0 svg {
-  fill: #231B22;
-}
-
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(35,27,34,0.75);
-}
-
-.c0:active svg {
-  fill: rgba(35,27,34,0.75);
+  fill: #6B6B78;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+.c0 svg {
+  fill: transparent;
 }
 
 .c0 svg {
@@ -6244,18 +14776,37 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 <div>
   <button
     class="c0"
+    disabled=""
   >
-    <svg
-      aria-hidden="true"
+    <span
+      aria-label="loading-icon"
       class="c1"
-      height="24"
-      width="24"
-    />
+      color="#6B6B78"
+      size="16"
+    >
+      <span
+        class="spinner"
+      >
+        <svg
+          class="circular"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="path"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </span>
+    </span>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With inverted prop should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with outline Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -6276,14 +14827,14 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -6293,13 +14844,11 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #231B22;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -6320,31 +14869,11 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  fill: #231B22;
-}
-
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(35,27,34,0.75);
-}
-
-.c0:active svg {
-  fill: rgba(35,27,34,0.75);
-}
-
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
-}
-
 .c1 {
   background-color: transparent;
   border: 1px solid;
   border-color: #231B22;
   color: #231B22;
-  border-color: #FFFFFF;
-  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -6352,63 +14881,29 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 }
 
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #231B22;
-  color: #FFFFFF;
-}
-
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(35,27,34,0.75);
-  color: rgba(35,27,34,0.75);
-  box-shadow: none;
-}
-
-.c1:not([disabled]):active svg {
-  fill: rgba(35,27,34,0.75);
-}
-
-.c1:disabled {
-  background-color: transparent;
-  border-color: #6B6B78;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
-}
-
-.c1 svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #FFFFFF;
-  color: #231B22;
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
 }
 
 .c1:not([disabled]):hover svg,
 .c1:not([disabled]):focus svg {
-  fill: #231B22;
+  fill: #FFFFFF;
 }
 
 .c1:not([disabled]):active {
   background-color: transparent;
-  border-color: rgba(255,255,255,0.75);
-  color: rgba(255,255,255,0.75);
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
 }
 
 .c1:not([disabled]):active svg {
-  fill: rgba(255,255,255,0.75);
+  fill: rgba(35,27,34,0.75);
 }
 
 .c1:disabled {
+  background-color: transparent;
   border-color: #6B6B78;
   color: #6B6B78;
 }
@@ -6426,7 +14921,7 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With inverted prop should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with outline Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -6447,14 +14942,14 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -6464,13 +14959,17 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #231B22;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -6492,21 +14991,45 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 }
 
 .c0 svg {
-  fill: #231B22;
+  fill: #6B6B78;
 }
 
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(35,27,34,0.75);
+.c0 svg {
+  fill: transparent;
 }
 
-.c0:active svg {
-  fill: rgba(35,27,34,0.75);
+.c3 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 .c1 {
@@ -6514,8 +15037,6 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   border: 1px solid;
   border-color: #231B22;
   color: #231B22;
-  border-color: #FFFFFF;
-  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -6554,51 +15075,53 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   fill: #6B6B78;
 }
 
-.c1 svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #FFFFFF;
-  color: #231B22;
-}
-
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #231B22;
-}
-
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(255,255,255,0.75);
-  color: rgba(255,255,255,0.75);
-}
-
-.c1:not([disabled]):active svg {
-  fill: rgba(255,255,255,0.75);
-}
-
 .c1:disabled {
-  border-color: #6B6B78;
-  color: #6B6B78;
+  color: transparent;
 }
 
 .c1:disabled svg {
-  fill: #6B6B78;
+  fill: transparent;
 }
 
 <div>
   <button
     class="c0 c1"
+    disabled=""
   >
-    <svg />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="16"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With inverted prop should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with outline Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -6619,14 +15142,14 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -6636,13 +15159,11 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #231B22;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -6663,29 +15184,11 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  fill: #231B22;
-}
-
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(35,27,34,0.75);
-}
-
-.c0:active svg {
-  fill: rgba(35,27,34,0.75);
-}
-
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
-}
-
 .c1 {
   background-color: transparent;
-  border-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
   color: #231B22;
-  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -6693,55 +15196,30 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 }
 
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(35,27,34,0.5);
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(35,27,34,0.5);
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
   color: rgba(35,27,34,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(35,27,34,0.75);
 }
 
-.c1 svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(255,255,255,0.5);
-}
-
-.c1:not([disabled]):hover svg {
-  fill: rgba(255,255,255,0.5);
-}
-
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(255,255,255,0.75);
-}
-
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(255,255,255,0.75);
-}
-
 .c1:disabled {
   background-color: transparent;
-  border-color: transparent;
+  border-color: #6B6B78;
   color: #6B6B78;
 }
 
@@ -6753,12 +15231,15 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   <button
     class="c0 c1"
   >
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With inverted prop should match snapshot with text Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with outline Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -6779,14 +15260,14 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -6796,13 +15277,17 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #231B22;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -6824,28 +15309,52 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 }
 
 .c0 svg {
-  fill: #231B22;
+  fill: #6B6B78;
 }
 
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(35,27,34,0.75);
+.c0 svg {
+  fill: transparent;
 }
 
-.c0:active svg {
-  fill: rgba(35,27,34,0.75);
+.c3 .spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 .c1 {
   background-color: transparent;
-  border-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
   color: #231B22;
-  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -6853,73 +15362,87 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
 }
 
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(35,27,34,0.5);
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(35,27,34,0.5);
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
   color: rgba(35,27,34,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(35,27,34,0.75);
 }
 
-.c1 svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(255,255,255,0.5);
-}
-
-.c1:not([disabled]):hover svg {
-  fill: rgba(255,255,255,0.5);
-}
-
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(255,255,255,0.75);
+.c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
+  color: #6B6B78;
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(255,255,255,0.75);
+.c1:disabled svg {
+  fill: #6B6B78;
 }
 
 .c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
+  color: transparent;
 }
 
 .c1:disabled svg {
-  fill: #6B6B78;
+  fill: transparent;
 }
 
 <div>
   <button
     class="c0 c1"
+    disabled=""
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="16"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With inverted prop should match snapshot with text Button with Icon 2`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with text Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -6940,14 +15463,14 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
+  height: 32px;
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -6957,13 +15480,11 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #FFFFFF;
-  color: #231B22;
 }
 
 .c0 svg {
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -6984,29 +15505,10 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  fill: #231B22;
-}
-
-.c0:active {
-  background-color: rgba(255,255,255,0.75);
-  color: rgba(35,27,34,0.75);
-}
-
-.c0:active svg {
-  fill: rgba(35,27,34,0.75);
-}
-
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(255,255,255,0.45);
-}
-
 .c1 {
   background-color: transparent;
   border-color: transparent;
   color: #231B22;
-  color: #FFFFFF;
 }
 
 .c1 svg {
@@ -7038,28 +15540,6 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   fill: rgba(35,27,34,0.75);
 }
 
-.c1 svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(255,255,255,0.5);
-}
-
-.c1:not([disabled]):hover svg {
-  fill: rgba(255,255,255,0.5);
-}
-
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(255,255,255,0.75);
-}
-
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(255,255,255,0.75);
-}
-
 .c1:disabled {
   background-color: transparent;
   border-color: transparent;
@@ -7074,13 +15554,12 @@ exports[`<Button /> Snapshots secondary buttons With inverted prop should match
   <button
     class="c0 c1"
   >
-    <svg />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With small prop should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons With small prop should match snapshot with text Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -7143,94 +15622,64 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   fill: #FFFFFF;
 }
 
-<div>
-  <button
-    class="c0"
-  >
-    Button
-  </button>
-</div>
-`;
+.c1 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #231B22;
+}
 
-exports[`<Button /> Snapshots secondary buttons With small prop should match snapshot with default Button with Icon 1`] = `
-.c0 {
-  box-sizing: border-box;
-  text-align: center;
-  outline: none;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
-  background-color: #231B22;
-  border: none;
-  border-radius: 9999px;
-  color: #FFFFFF;
-  font-size: 14px;
-  font-weight: 500;
-  font-family: Rubik;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  line-height: 1;
-  -webkit-text-decoration: none;
-  text-decoration: none;
+.c1 svg {
+  fill: #231B22;
 }
 
-.c0 svg {
-  width: 16px;
-  height: 16px;
-  fill: #FFFFFF;
-  margin-right: 8px;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  background-color: transparent;
+  box-shadow: none;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+.c1:not([disabled]):hover {
+  color: rgba(35,27,34,0.5);
 }
 
-.c0:active {
-  background-color: rgba(35,27,34,0.75);
-  color: #FFFFFF;
+.c1:not([disabled]):hover svg {
+  fill: rgba(35,27,34,0.5);
 }
 
-.c0:active svg {
-  fill: #FFFFFF;
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(35,27,34,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
 }
 
 <div>
   <button
-    class="c0"
+    class="c0 c1"
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With small prop should match snapshot with icon Button 1`] = `
-.c1 {
-  width: 16px;
-  height: 16px;
-}
-
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with default Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -7251,14 +15700,14 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -7268,13 +15717,11 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0;
-  width: 32px;
 }
 
 .c0 svg {
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -7295,29 +15742,16 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  width: unset;
-  height: unset;
-  margin-right: unset;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
-}
-
 <div>
   <button
     class="c0"
   >
-    <svg
-      aria-hidden="true"
-      class="c1"
-      height="16"
-      width="16"
-    />
+    Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With small prop should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with default Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -7338,14 +15772,14 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -7355,11 +15789,17 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -7380,59 +15820,87 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border: 1px solid;
-  border-color: #231B22;
-  color: #231B22;
-}
-
-.c1 svg {
-  fill: #231B22;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #231B22;
-  color: #FFFFFF;
+.c0 svg {
+  fill: #6B6B78;
 }
 
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
+.c0 svg {
+  fill: transparent;
 }
 
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(35,27,34,0.75);
-  color: rgba(35,27,34,0.75);
-  box-shadow: none;
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c1:not([disabled]):active svg {
-  fill: rgba(35,27,34,0.75);
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
-.c1:disabled {
-  background-color: transparent;
-  border-color: #6B6B78;
-  color: #6B6B78;
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
   <button
-    class="c0 c1"
+    class="c0"
+    disabled=""
   >
     Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With small prop should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with default Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -7453,14 +15921,14 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -7472,9 +15940,9 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   text-decoration: none;
 }
 
-.c0 svg {
-  width: 16px;
-  height: 16px;
+.c0 svg {
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -7495,60 +15963,19 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border: 1px solid;
-  border-color: #231B22;
-  color: #231B22;
-}
-
-.c1 svg {
-  fill: #231B22;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus {
-  background-color: #231B22;
-  color: #FFFFFF;
-}
-
-.c1:not([disabled]):hover svg,
-.c1:not([disabled]):focus svg {
-  fill: #FFFFFF;
-}
-
-.c1:not([disabled]):active {
-  background-color: transparent;
-  border-color: rgba(35,27,34,0.75);
-  color: rgba(35,27,34,0.75);
-  box-shadow: none;
-}
-
-.c1:not([disabled]):active svg {
-  fill: rgba(35,27,34,0.75);
-}
-
-.c1:disabled {
-  background-color: transparent;
-  border-color: #6B6B78;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
-}
-
 <div>
   <button
-    class="c0 c1"
+    class="c0"
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With small prop should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with default Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -7569,14 +15996,14 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -7586,11 +16013,17 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -7611,61 +16044,95 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #231B22;
-}
-
-.c1 svg {
-  fill: #231B22;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(35,27,34,0.5);
+.c0 svg {
+  fill: #6B6B78;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(35,27,34,0.5);
+.c0 svg {
+  fill: transparent;
 }
 
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(35,27,34,0.75);
+.c2 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
 }
 
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(35,27,34,0.75);
+.c2 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
+.c2 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
 }
 
-.c1:disabled svg {
-  fill: #6B6B78;
+.c1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
 }
 
 <div>
   <button
-    class="c0 c1"
+    class="c0"
+    disabled=""
   >
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c1"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c2"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons With small prop should match snapshot with text Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with icon Button 1`] = `
+.c1 {
+  width: 24px;
+  height: 24px;
+}
+
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -7686,14 +16153,14 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   -ms-flex-pack: center;
   justify-content: center;
   width: auto;
-  height: 32px;
-  padding-left: 16px;
-  padding-right: 16px;
+  height: 48px;
+  padding-left: 24px;
+  padding-right: 24px;
   background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   font-family: Rubik;
   -webkit-letter-spacing: normal;
@@ -7703,11 +16170,13 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  padding: 0;
+  width: 48px;
 }
 
 .c0 svg {
-  width: 16px;
-  height: 16px;
+  width: 24px;
+  height: 24px;
   fill: #FFFFFF;
   margin-right: 8px;
   -webkit-transition: fill 0.2s;
@@ -7728,62 +16197,55 @@ exports[`<Button /> Snapshots secondary buttons With small prop should match sna
   fill: #FFFFFF;
 }
 
-.c1 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #231B22;
-}
-
-.c1 svg {
-  fill: #231B22;
-}
-
-.c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(35,27,34,0.5);
-}
-
-.c1:not([disabled]):hover svg {
-  fill: rgba(35,27,34,0.5);
-}
-
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  color: rgba(35,27,34,0.75);
-}
-
-.c1:not([disabled]):focus svg,
-.c1:not([disabled]):active svg {
-  fill: rgba(35,27,34,0.75);
-}
-
-.c1:disabled {
-  background-color: transparent;
-  border-color: transparent;
-  color: #6B6B78;
-}
-
-.c1:disabled svg {
-  fill: #6B6B78;
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
 }
 
 <div>
   <button
-    class="c0 c1"
+    class="c0"
   >
-    <svg />
-    Button
+    <svg
+      aria-hidden="true"
+      class="c1"
+      height="24"
+      role="img"
+      width="24"
+    />
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons Without props should match snapshot with default Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with icon Button and Loading 1`] = `
+.c1 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c1 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c1 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -7821,6 +16283,14 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
+  padding: 0;
+  width: 48px;
 }
 
 .c0 svg {
@@ -7846,16 +16316,56 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c0 svg {
+  width: unset;
+  height: unset;
+  margin-right: unset;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
 <div>
   <button
     class="c0"
+    disabled=""
   >
-    Button
+    <span
+      aria-label="loading-icon"
+      class="c1"
+      color="#6B6B78"
+      size="20"
+    >
+      <span
+        class="spinner"
+      >
+        <svg
+          class="circular"
+          viewBox="22 22 44 44"
+        >
+          <circle
+            class="path"
+            cx="44"
+            cy="44"
+            fill="none"
+            r="20.2"
+            stroke-width="3.6"
+          />
+        </svg>
+      </span>
+    </span>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons Without props should match snapshot with default Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with link Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -7895,45 +16405,87 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   text-decoration: none;
 }
 
-.c0 svg {
-  width: 24px;
-  height: 24px;
-  fill: #FFFFFF;
-  margin-right: 8px;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
+.c0 svg {
+  width: 24px;
+  height: 24px;
+  fill: #FFFFFF;
+  margin-right: 8px;
+  -webkit-transition: fill 0.2s;
+  transition: fill 0.2s;
+}
+
+.c0:not([disabled]):hover,
+.c0:not([disabled]):focus {
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+}
+
+.c0:active {
+  background-color: rgba(35,27,34,0.75);
+  color: #FFFFFF;
+}
+
+.c0:active svg {
+  fill: #FFFFFF;
+}
+
+.c1 {
+  height: unset;
+  padding: 0;
+  background-color: unset;
+  border: none;
+  border-radius: 0;
+  color: #231B22;
+}
+
+.c1 svg {
+  margin-right: 4px;
+  fill: #231B22;
+}
+
+.c1:disabled,
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  box-shadow: unset;
+  background-color: unset;
 }
 
-.c0:not([disabled]):hover,
-.c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+.c1:not([disabled]):hover {
+  color: rgba(35,27,34,0.5);
 }
 
-.c0:active {
-  background-color: rgba(35,27,34,0.75);
-  color: #FFFFFF;
+.c1:not([disabled]):hover svg {
+  fill: rgba(35,27,34,0.5);
 }
 
-.c0:active svg {
-  fill: #FFFFFF;
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(35,27,34,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(35,27,34,0.75);
+}
+
+.c1:disabled {
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
 }
 
 <div>
   <button
-    class="c0"
+    class="c0 c1"
   >
-    <svg />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons Without props should match snapshot with icon Button 1`] = `
-.c1 {
-  width: 24px;
-  height: 24px;
-}
-
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with link Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -7957,7 +16509,7 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
-  background-color: #231B22;
+  background-color: #D8385E;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
@@ -7971,8 +16523,6 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  padding: 0;
-  width: 48px;
 }
 
 .c0 svg {
@@ -7986,11 +16536,11 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
 
 .c0:not([disabled]):hover,
 .c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
+  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
 }
 
 .c0:active {
-  background-color: rgba(35,27,34,0.75);
+  background-color: rgba(216,56,94,0.75);
   color: #FFFFFF;
 }
 
@@ -7998,29 +16548,67 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   fill: #FFFFFF;
 }
 
-.c0 svg {
-  width: unset;
+.c1 {
   height: unset;
-  margin-right: unset;
-  -webkit-transition: fill 0.2s;
-  transition: fill 0.2s;
+  padding: 0;
+  background-color: unset;
+  border: none;
+  border-radius: 0;
+  color: #D8385E;
+}
+
+.c1 svg {
+  margin-right: 4px;
+  fill: #D8385E;
+}
+
+.c1:disabled,
+.c1:not([disabled]):hover,
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  box-shadow: unset;
+  background-color: unset;
+}
+
+.c1:not([disabled]):hover {
+  color: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):hover svg {
+  fill: rgba(216,56,94,0.5);
+}
+
+.c1:not([disabled]):focus,
+.c1:not([disabled]):active {
+  color: rgba(216,56,94,0.75);
+}
+
+.c1:not([disabled]):focus svg,
+.c1:not([disabled]):active svg {
+  fill: rgba(216,56,94,0.75);
+}
+
+.c1:disabled {
+  color: #6B6B78;
+}
+
+.c1:disabled svg {
+  fill: #6B6B78;
 }
 
 <div>
   <button
-    class="c0"
+    class="c0 c1"
   >
     <svg
-      aria-hidden="true"
-      class="c1"
-      height="24"
-      width="24"
+      role="img"
     />
+    Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons Without props should match snapshot with link Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with outline Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -8084,46 +16672,41 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
 }
 
 .c1 {
-  height: unset;
-  padding: 0;
-  background-color: unset;
-  border: none;
-  border-radius: 0;
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
   color: #231B22;
 }
 
 .c1 svg {
-  margin-right: 4px;
   fill: #231B22;
 }
 
-.c1:disabled,
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  box-shadow: unset;
-  background-color: unset;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(35,27,34,0.5);
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(35,27,34,0.5);
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
   color: rgba(35,27,34,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
   fill: rgba(35,27,34,0.75);
 }
 
 .c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
   color: #6B6B78;
 }
 
@@ -8140,7 +16723,7 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons Without props should match snapshot with link Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with outline Button and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -8164,7 +16747,7 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   height: 48px;
   padding-left: 24px;
   padding-right: 24px;
-  background-color: #D8385E;
+  background-color: #231B22;
   border: none;
   border-radius: 9999px;
   color: #FFFFFF;
@@ -8178,6 +16761,12 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -8191,11 +16780,11 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
 
 .c0:not([disabled]):hover,
 .c0:not([disabled]):focus {
-  box-shadow: 0 4px 8px rgba(216,56,94,0.45);
+  box-shadow: 0 4px 8px rgba(35,27,34,0.45);
 }
 
 .c0:active {
-  background-color: rgba(216,56,94,0.75);
+  background-color: rgba(35,27,34,0.75);
   color: #FFFFFF;
 }
 
@@ -8203,47 +16792,84 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
 .c1 {
-  height: unset;
-  padding: 0;
-  background-color: unset;
-  border: none;
-  border-radius: 0;
-  color: #D8385E;
+  background-color: transparent;
+  border: 1px solid;
+  border-color: #231B22;
+  color: #231B22;
 }
 
 .c1 svg {
-  margin-right: 4px;
-  fill: #D8385E;
+  fill: #231B22;
 }
 
-.c1:disabled,
 .c1:not([disabled]):hover,
-.c1:not([disabled]):focus,
-.c1:not([disabled]):active {
-  box-shadow: unset;
-  background-color: unset;
-}
-
-.c1:not([disabled]):hover {
-  color: rgba(216,56,94,0.5);
+.c1:not([disabled]):focus {
+  background-color: #231B22;
+  color: #FFFFFF;
 }
 
-.c1:not([disabled]):hover svg {
-  fill: rgba(216,56,94,0.5);
+.c1:not([disabled]):hover svg,
+.c1:not([disabled]):focus svg {
+  fill: #FFFFFF;
 }
 
-.c1:not([disabled]):focus,
 .c1:not([disabled]):active {
-  color: rgba(216,56,94,0.75);
+  background-color: transparent;
+  border-color: rgba(35,27,34,0.75);
+  color: rgba(35,27,34,0.75);
+  box-shadow: none;
 }
 
-.c1:not([disabled]):focus svg,
 .c1:not([disabled]):active svg {
-  fill: rgba(216,56,94,0.75);
+  fill: rgba(35,27,34,0.75);
 }
 
 .c1:disabled {
+  background-color: transparent;
+  border-color: #6B6B78;
   color: #6B6B78;
 }
 
@@ -8251,17 +16877,53 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   fill: #6B6B78;
 }
 
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
 <div>
   <button
     class="c0 c1"
+    disabled=""
   >
-    <svg />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons Without props should match snapshot with outline Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with outline Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -8371,12 +17033,15 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   <button
     class="c0 c1"
   >
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons Without props should match snapshot with outline Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with outline Button with Icon and Loading 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -8414,6 +17079,12 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   line-height: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
+  background-color: #F5F5FA;
+  color: #6B6B78;
+  pointer-events: none;
+  cursor: not-allowed;
+  position: relative;
+  color: transparent;
 }
 
 .c0 svg {
@@ -8439,6 +17110,48 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   fill: #FFFFFF;
 }
 
+.c0 svg {
+  fill: #6B6B78;
+}
+
+.c0 svg {
+  fill: transparent;
+}
+
+.c3 .spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  color: #6B6B78;
+  -webkit-animation: 1.4s linear 0s infinite normal none running rotation;
+  animation: 1.4s linear 0s infinite normal none running rotation;
+}
+
+.c3 .circular {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.c3 .path {
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: 1.4s ease-in-out 0s infinite normal none running dash;
+  -webkit-animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  animation: 1.6s ease-in-out 0s infinite normal none running dash;
+  stroke-linecap: round;
+  stroke: #6B6B78;
+}
+
+.c2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
 .c1 {
   background-color: transparent;
   border: 1px solid;
@@ -8482,17 +17195,56 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   fill: #6B6B78;
 }
 
+.c1:disabled {
+  color: transparent;
+}
+
+.c1:disabled svg {
+  fill: transparent;
+}
+
 <div>
   <button
     class="c0 c1"
+    disabled=""
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
+    <div
+      class="c2"
+    >
+      <span
+        aria-label="loading-icon"
+        class="c3"
+        color="#6B6B78"
+        size="20"
+      >
+        <span
+          class="spinner"
+        >
+          <svg
+            class="circular"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="path"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
   </button>
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons Without props should match snapshot with text Button 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with text Button 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -8609,7 +17361,7 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
 </div>
 `;
 
-exports[`<Button /> Snapshots secondary buttons Without props should match snapshot with text Button with Icon 1`] = `
+exports[`<Button /> Snapshots primary buttons secondary buttons Without props should match snapshot with text Button with Icon 1`] = `
 .c0 {
   box-sizing: border-box;
   text-align: center;
@@ -8721,7 +17473,9 @@ exports[`<Button /> Snapshots secondary buttons Without props should match snaps
   <button
     class="c0 c1"
   >
-    <svg />
+    <svg
+      role="img"
+    />
     Button
   </button>
 </div>
diff --git a/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap b/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
index c335856618..5972dfd740 100644
--- a/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
+++ b/packages/yoga/src/Dialog/web/__snapshots__/Dialog.test.jsx.snap
@@ -449,6 +449,7 @@ exports[`<Dialog /> should match snapshot with close button 1`] = `
                 aria-hidden="true"
                 class="c5"
                 height="24"
+                role="img"
                 width="24"
               />
             </button>
diff --git a/packages/yoga/src/Heading/web/__snapshots__/Heading.test.jsx.snap b/packages/yoga/src/Heading/web/__snapshots__/Heading.test.jsx.snap
index 725291bb39..cb8a314018 100644
--- a/packages/yoga/src/Heading/web/__snapshots__/Heading.test.jsx.snap
+++ b/packages/yoga/src/Heading/web/__snapshots__/Heading.test.jsx.snap
@@ -169,6 +169,7 @@ exports[`<Heading /> should match snapshot no padding 1`] = `
         aria-hidden="true"
         class="c3"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -193,6 +194,7 @@ exports[`<Heading /> should match snapshot no padding 1`] = `
           aria-hidden="true"
           class="c3"
           height="24"
+          role="img"
           width="24"
         />
       </button>
@@ -375,6 +377,7 @@ exports[`<Heading /> should match snapshot with all components 1`] = `
         aria-hidden="true"
         class="c3"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -399,6 +402,7 @@ exports[`<Heading /> should match snapshot with all components 1`] = `
           aria-hidden="true"
           class="c3"
           height="24"
+          role="img"
           width="24"
         />
       </button>
@@ -566,6 +570,7 @@ exports[`<Heading /> should match snapshot with back button 1`] = `
         aria-hidden="true"
         class="c3"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -840,6 +845,7 @@ exports[`<Heading /> should match snapshot with title and back button 1`] = `
         aria-hidden="true"
         class="c3"
         height="24"
+        role="img"
         width="24"
       />
     </button>
diff --git a/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap b/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap
index 21a8f5c92a..b915fd460d 100644
--- a/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap
+++ b/packages/yoga/src/Menu/web/__snapshots__/Menu.test.jsx.snap
@@ -91,6 +91,7 @@ exports[`<Menu /> should match snapshot Menu with a onMouseHover props false 1`]
       aria-hidden="true"
       class="c1"
       height="24"
+      role="img"
       width="24"
     />
   </button>
@@ -189,6 +190,7 @@ exports[`<Menu /> should match snapshot Menu with an align props end 1`] = `
         aria-hidden="true"
         class="c1"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -288,6 +290,7 @@ exports[`<Menu /> should match snapshot Menu with an align props start 1`] = `
         aria-hidden="true"
         class="c1"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -387,6 +390,7 @@ exports[`<Menu /> should match snapshot Menu.Item with active 1`] = `
         aria-hidden="true"
         class="c1"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -486,6 +490,7 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled 1`] = `
         aria-hidden="true"
         class="c1"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -585,6 +590,7 @@ exports[`<Menu /> should match snapshot Menu.Item with disabled and icon 1`] = `
         aria-hidden="true"
         class="c1"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -684,6 +690,7 @@ exports[`<Menu /> should match snapshot Menu.Item with icon 1`] = `
         aria-hidden="true"
         class="c1"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -783,6 +790,7 @@ exports[`<Menu /> should match snapshot Menu.Item with link 1`] = `
         aria-hidden="true"
         class="c1"
         height="24"
+        role="img"
         width="24"
       />
     </button>
@@ -882,6 +890,7 @@ exports[`<Menu /> should match snapshot in default Menu 1`] = `
         aria-hidden="true"
         class="c1"
         height="24"
+        role="img"
         width="24"
       />
     </button>
diff --git a/packages/yoga/src/Spinner/web/Spinner.jsx b/packages/yoga/src/Spinner/web/Spinner.jsx
index 47c97e26e8..957d8a7002 100644
--- a/packages/yoga/src/Spinner/web/Spinner.jsx
+++ b/packages/yoga/src/Spinner/web/Spinner.jsx
@@ -12,13 +12,11 @@ const StyledSpinner = styled.span`
       color: ${color};
       animation: 1.4s linear 0s infinite normal none running rotation;
     }
-
     .circular {
       display: block;
       height: 100%;
       width: 100%;
     }
-
     .path {
       stroke-dasharray: 80px, 200px;
       stroke-dashoffset: 0;
@@ -27,7 +25,6 @@ const StyledSpinner = styled.span`
       stroke-linecap: round;
       stroke: ${color};
     }
-
     @keyframes rotation {
       0% {
           transform: rotate(0deg);
@@ -36,7 +33,6 @@ const StyledSpinner = styled.span`
           transform: rotate(360deg);
       }
     }
-
     @keyframes dash {
       0% {
         stroke-dasharray: 1px, 200px;
@@ -60,6 +56,7 @@ const Spinner = React.forwardRef(({ size, color, theme }, ref) => {
       color={get(theme.yoga.colors, color, color)}
       size={get(theme.yoga.spacing, size, size)}
       ref={ref}
+      aria-label="loading-icon"
     >
       <span className="spinner">
         <svg className="circular" viewBox="22 22 44 44">
diff --git a/packages/yoga/src/Spinner/web/__snapshots__/Spinner.test.jsx.snap b/packages/yoga/src/Spinner/web/__snapshots__/Spinner.test.jsx.snap
index a3a127edaf..a4712da4cf 100644
--- a/packages/yoga/src/Spinner/web/__snapshots__/Spinner.test.jsx.snap
+++ b/packages/yoga/src/Spinner/web/__snapshots__/Spinner.test.jsx.snap
@@ -28,6 +28,7 @@ exports[`<Spinner /> should match snapshot 1`] = `
 
 <div>
   <span
+    aria-label="loading-icon"
     class="c0"
     color="#D7D7E0"
     size="56"