🚀 feat(button): add prop loading

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" />

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" />

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" />

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,