From 5b80b54ad7187c24c41e5a0a40c2ae7b1d80cf66 Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Tue, 30 Jul 2024 15:34:46 -0300
Subject: [PATCH 1/9] chore(Popover.jsx, SnackBar.jsx): Removed passing of
 non-native props from the Button component

---
 components/Popover/sub-components/Content.jsx | 12 +++++++++---
 components/SnackBar/SnackBar.jsx              | 16 ++++++++++++----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/components/Popover/sub-components/Content.jsx b/components/Popover/sub-components/Content.jsx
index e03cbd6d3..9d352cc21 100644
--- a/components/Popover/sub-components/Content.jsx
+++ b/components/Popover/sub-components/Content.jsx
@@ -89,9 +89,15 @@ const PopoverContent = styled.div`
   ${_getColors}
 `;
 
-const CloseButton = styled(Button.Icon).attrs({
-  icon: 'close',
-})`
+const propsNotContainedInButton = ['inverted'];
+
+const CloseButton = styled(Button.Icon)
+  .attrs({
+    icon: 'close',
+  })
+  .withConfig({
+    shouldForwardProp: (prop) => !propsNotContainedInButton.includes(prop),
+  })`
   ${_getTextColor}
   display: inherit;
   height: auto;
diff --git a/components/SnackBar/SnackBar.jsx b/components/SnackBar/SnackBar.jsx
index dbcfc67cf..4f5b2b1e2 100644
--- a/components/SnackBar/SnackBar.jsx
+++ b/components/SnackBar/SnackBar.jsx
@@ -125,9 +125,15 @@ const SkinIcon = styled(Icon)`
   `}
 `;
 
-const CloseButton = styled(Button.Icon).attrs({
-  icon: 'close',
-})`
+const propsNotContainedInButton = ['inverted'];
+
+const CloseButton = styled(Button.Icon)
+  .attrs({
+    icon: 'close',
+  })
+  .withConfig({
+    shouldForwardProp: (prop) => !propsNotContainedInButton.includes(prop),
+  })`
   ${({ skin, theme, inverted }) => {
     const { text } = getBackgroundAndTextColorBySkin({ skin, theme, inverted });
 
@@ -150,7 +156,9 @@ const CloseButton = styled(Button.Icon).attrs({
   }}
 `;
 
-const ActionButton = styled(Button)`
+const ActionButton = styled(Button).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInButton.includes(prop),
+})`
   ${({ theme, skin, inverted }) => {
     const { text: color } = getBackgroundAndTextColorBySkin({
       skin,

From d99ea37344a76d108a22cbde28969fea8428edbd Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Wed, 31 Jul 2024 15:28:29 -0300
Subject: [PATCH 2/9] feat: Migrated SegmentedControl component and use of
 shared styles with the button

---
 components/Button/Button.jsx                  | 39 ++++----
 components/Button/index.css                   |  1 -
 .../SegmentedControl/SegmentedButton.jsx      | 47 +++++-----
 .../SegmentedButton.module.css                | 23 +++++
 .../SegmentedControl/SegmentedControl.jsx     | 91 ++++++-------------
 .../SegmentedControl.module.css               |  4 +
 components/SegmentedControl/index.css         |  2 +
 components/index.css                          |  2 +-
 .../styles/ButtonBase.module.css}             |  0
 9 files changed, 104 insertions(+), 105 deletions(-)
 delete mode 100644 components/Button/index.css
 create mode 100644 components/SegmentedControl/SegmentedButton.module.css
 create mode 100644 components/SegmentedControl/SegmentedControl.module.css
 create mode 100644 components/SegmentedControl/index.css
 rename components/{Button/Button.module.css => shared/styles/ButtonBase.module.css} (100%)

diff --git a/components/Button/Button.jsx b/components/Button/Button.jsx
index 436dd6299..c17a01498 100644
--- a/components/Button/Button.jsx
+++ b/components/Button/Button.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import Icon from '../Icon/Icon';
-import styles from './Button.module.css';
+import buttonBaseStyles from '../shared/styles/ButtonBase.module.css';
 
 const Button = ({
   children,
@@ -22,26 +22,26 @@ const Button = ({
   const isStrokedType = stroked && !disabled;
 
   const defaultButtonStyle = classNames(
-    styles.button,
-    styles[`button-${size}`],
-    { [styles['button-disable']]: disabled },
-    { [styles['button-center']]: center },
-    { [styles['button-default']]: isDefaultType },
-    { [styles[`button-default-${skin}`]]: isDefaultType },
-    { [styles['button-disable-stroked']]: disabled && stroked },
-    { [styles[`button-stroked-${skin}`]]: isStrokedType },
-    { [styles['button-full']]: full },
-    styles['shadow-2-neutral-500'],
-    { [styles[`shadow-4-${skin}-900`]]: !disabled },
-    { [styles[`shadow-4-${skin}-700`]]: !disabled },
-    { [styles[`shadow-8-${skin}-900`]]: !disabled },
+    buttonBaseStyles.button,
+    buttonBaseStyles[`button-${size}`],
+    { [buttonBaseStyles['button-disable']]: disabled },
+    { [buttonBaseStyles['button-center']]: center },
+    { [buttonBaseStyles['button-default']]: isDefaultType },
+    { [buttonBaseStyles[`button-default-${skin}`]]: isDefaultType },
+    { [buttonBaseStyles['button-disable-stroked']]: disabled && stroked },
+    { [buttonBaseStyles[`button-stroked-${skin}`]]: isStrokedType },
+    { [buttonBaseStyles['button-full']]: full },
+    buttonBaseStyles['shadow-2-neutral-500'],
+    { [buttonBaseStyles[`shadow-4-${skin}-900`]]: !disabled },
+    { [buttonBaseStyles[`shadow-4-${skin}-700`]]: !disabled },
+    { [buttonBaseStyles[`shadow-8-${skin}-900`]]: !disabled },
     className,
   );
 
   const iconStyle = classNames(
-    styles['button-icon'],
-    { [styles['button-icon-with-children']]: children },
-    styles[`button-icon-${size}`],
+    buttonBaseStyles['button-icon'],
+    { [buttonBaseStyles['button-icon-with-children']]: children },
+    buttonBaseStyles[`button-icon-${size}`],
   );
 
   return (
@@ -97,7 +97,10 @@ Button.propTypes = {
 };
 
 const IconButton = ({ className = '', skin, ...props }) => {
-  const classIconButton = classNames(styles['icon-button'], className);
+  const classIconButton = classNames(
+    buttonBaseStyles['icon-button'],
+    className,
+  );
   return <Button className={classIconButton} {...props} />;
 };
 
diff --git a/components/Button/index.css b/components/Button/index.css
deleted file mode 100644
index 7c9e980ba..000000000
--- a/components/Button/index.css
+++ /dev/null
@@ -1 +0,0 @@
-@import "./Button.module.css";
\ No newline at end of file
diff --git a/components/SegmentedControl/SegmentedButton.jsx b/components/SegmentedControl/SegmentedButton.jsx
index 7be416a03..f4fbcedc0 100644
--- a/components/SegmentedControl/SegmentedButton.jsx
+++ b/components/SegmentedControl/SegmentedButton.jsx
@@ -1,29 +1,15 @@
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Button from '../Button';
+import classNames from 'classnames';
 import Icon from '../Icon';
 import HiddenInput from '../shared/HiddenInput';
+import buttonBaseStyles from '../shared/styles/ButtonBase.module.css';
+import styles from './SegmentedButton.module.css';
 import { createUniqId } from '../shared/uniqId';
 
-const LabelButton = styled(Button)`
-  width: 100%;
-  border-radius: 0px;
-  font-weight: 400;
-  letter-spacing: 0.2px;
-
-  &.input-checked {
-    font-weight: 700;
-  }
-`;
-
-LabelButton.displayName = 'LabelButton';
 HiddenInput.displayName = 'HiddenInput';
 
 const uniqId = createUniqId('segmented-button-');
 
-const a11yCheckedIndex = (checked) =>
-  checked ? { tabIndex: -1, className: 'input-checked' } : { tabIndex: 0 };
-
 const SegmentedButton = ({
   label,
   value,
@@ -32,17 +18,34 @@ const SegmentedButton = ({
   onChange,
   icon,
   darkMode,
+  className,
+  ...rest
 }) => {
   const ID = uniqId();
+  const stroked = darkMode ? checked : !checked;
 
-  const handleStroke = () => (darkMode ? checked : !checked);
+  const labelClass = classNames(
+    buttonBaseStyles.button,
+    buttonBaseStyles['button-medium'],
+    { [buttonBaseStyles['button-default']]: !stroked },
+    { [buttonBaseStyles['button-default-primary']]: !stroked },
+    { [buttonBaseStyles['button-stroked-primary']]: stroked },
+    buttonBaseStyles['shadow-2-neutral-500'],
+    buttonBaseStyles['shadow-4-primary-900'],
+    buttonBaseStyles['shadow-4-primary-700'],
+    buttonBaseStyles['shadow-8-primary-900'],
+    styles.label,
+    { [styles['label-checked']]: checked },
+    className,
+  );
 
   return (
-    <LabelButton
+    <label
       aria-label={label}
-      stroked={handleStroke()}
+      className={labelClass}
       htmlFor={ID}
-      {...a11yCheckedIndex(checked)}
+      tabIndex={checked ? -1 : 0}
+      {...rest}
     >
       <HiddenInput
         id={ID}
@@ -53,7 +56,7 @@ const SegmentedButton = ({
         onChange={(e) => onChange(e, { value, label })}
       />
       {icon ? <Icon name={icon} aria-label={label} /> : label}
-    </LabelButton>
+    </label>
   );
 };
 
diff --git a/components/SegmentedControl/SegmentedButton.module.css b/components/SegmentedControl/SegmentedButton.module.css
new file mode 100644
index 000000000..31dbb97ef
--- /dev/null
+++ b/components/SegmentedControl/SegmentedButton.module.css
@@ -0,0 +1,23 @@
+.label {
+    width: 100%;
+    border: 1px solid;
+    border-right: 0px;
+    border-radius: 0px;
+    border-color: var(--qtm-colors-primary-700);
+    font-weight: 400;
+    letter-spacing: 0.2px;
+    padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-xsmall);
+}
+
+.label:first-child {
+    border-radius: 4px 0px 0px 4px;
+}
+
+.label:last-child {
+    border-radius: 0px 4px 4px 0px;
+    border: 1px solid var(--qtm-colors-primary-700);
+}
+
+.label-checked {
+    font-weight: 700;
+}
\ No newline at end of file
diff --git a/components/SegmentedControl/SegmentedControl.jsx b/components/SegmentedControl/SegmentedControl.jsx
index e398e1905..056c0e682 100644
--- a/components/SegmentedControl/SegmentedControl.jsx
+++ b/components/SegmentedControl/SegmentedControl.jsx
@@ -1,69 +1,38 @@
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { Row, Col } from '../Grid';
-import { colors, spacing } from '../shared/theme';
 import SegmentedButtons from './SegmentedButtons';
-
-const SegmentedWrapper = styled.div`
-  display: flex;
-  justify-content: space-around;
-
-  button {
-    border: 1px solid;
-    border-right: 0px;
-    ${({
-      theme: {
-        colors: {
-          primary: { 700: primaryColor700 },
-        },
-        spacing: { xsmall, xxsmall },
-      },
-    }) => `
-      border-color: ${primaryColor700};
-      padding: ${xxsmall}px ${xsmall}px;
-    `}
-
-    &:first-child {
-      border-radius: 4px 0px 0px 4px;
-    }
-
-    &:last-child {
-      border-radius: 0px 4px 4px 0px;
-      ${({
-        theme: {
-          colors: {
-            primary: { 700: primaryColor700 },
-          },
-        },
-      }) => `
-        border: 1px solid ${primaryColor700};
-      `}
-    }
-  }
-`;
-
-const SegmentedControl = ({ items, name, onChange, theme, darkMode }) => (
-  <Row>
-    <Col small={6} medium={5}>
-      <SegmentedWrapper theme={theme}>
-        <SegmentedButtons
-          items={items}
-          name={name}
-          darkMode={darkMode}
-          onChange={onChange}
-        />
-      </SegmentedWrapper>
-    </Col>
-  </Row>
-);
+import styles from './SegmentedControl.module.css';
+
+const SegmentedControl = ({
+  items,
+  name,
+  onChange,
+  darkMode,
+  className,
+  ...rest
+}) => {
+  const classWrapper = classNames(styles.wrapper, className);
+
+  return (
+    <Row>
+      <Col small={6} medium={5}>
+        <div className={classWrapper} {...rest}>
+          <SegmentedButtons
+            items={items}
+            name={name}
+            darkMode={darkMode}
+            onChange={onChange}
+          />
+        </div>
+      </Col>
+    </Row>
+  );
+};
 
 SegmentedControl.defaultProps = {
   name: 'segmented-control',
   onChange: () => {},
-  theme: {
-    spacing,
-    colors,
-  },
   darkMode: false,
 };
 
@@ -81,10 +50,6 @@ SegmentedControl.propTypes = {
   name: PropTypes.string,
   /** receives a callback function */
   onChange: PropTypes.func,
-  theme: PropTypes.shape({
-    spacing: PropTypes.object,
-    colors: PropTypes.object,
-  }),
   /** this prop changes the layout to dark mode */
   darkMode: PropTypes.bool,
 };
diff --git a/components/SegmentedControl/SegmentedControl.module.css b/components/SegmentedControl/SegmentedControl.module.css
new file mode 100644
index 000000000..02323cdf8
--- /dev/null
+++ b/components/SegmentedControl/SegmentedControl.module.css
@@ -0,0 +1,4 @@
+.wrapper {
+    display: flex;
+    justify-content: space-around;
+}
\ No newline at end of file
diff --git a/components/SegmentedControl/index.css b/components/SegmentedControl/index.css
new file mode 100644
index 000000000..33d628510
--- /dev/null
+++ b/components/SegmentedControl/index.css
@@ -0,0 +1,2 @@
+@import "./SegmentedButton.module.css";
+@import "./SegmentedControl.module.css";
\ No newline at end of file
diff --git a/components/index.css b/components/index.css
index 334460edb..2d2e294e7 100644
--- a/components/index.css
+++ b/components/index.css
@@ -17,4 +17,4 @@
 @import "./Badge/index.css";
 @import "./Modal/index.css";
 @import "./Typography/index.css";
-@import "./Button/index.css";
+@import "./SegmentedControl/index.css";
diff --git a/components/Button/Button.module.css b/components/shared/styles/ButtonBase.module.css
similarity index 100%
rename from components/Button/Button.module.css
rename to components/shared/styles/ButtonBase.module.css

From 11f3ba3c1d37ef5980be5bc074362206f7151d2b Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Thu, 1 Aug 2024 09:31:18 -0300
Subject: [PATCH 3/9] fix(Button.jsx): Implementing Button.icon with custom
 size and skins

---
 components/Button/Button.jsx                  |   7 +-
 .../shared/styles/ButtonBase.module.css       | 263 ++++++++++++++----
 2 files changed, 209 insertions(+), 61 deletions(-)

diff --git a/components/Button/Button.jsx b/components/Button/Button.jsx
index c17a01498..e79dac57e 100644
--- a/components/Button/Button.jsx
+++ b/components/Button/Button.jsx
@@ -96,12 +96,15 @@ Button.propTypes = {
   onClick: PropTypes.func,
 };
 
-const IconButton = ({ className = '', skin, ...props }) => {
+const IconButton = ({ className = '', skin, size, ...props }) => {
   const classIconButton = classNames(
     buttonBaseStyles['icon-button'],
+    buttonBaseStyles[`icon-button-${size}`],
+    buttonBaseStyles[`icon-button-${skin}`],
     className,
   );
-  return <Button className={classIconButton} {...props} />;
+
+  return <Button className={classIconButton} size={size} {...props} />;
 };
 
 IconButton.propTypes = {
diff --git a/components/shared/styles/ButtonBase.module.css b/components/shared/styles/ButtonBase.module.css
index 38550f130..5dda97080 100644
--- a/components/shared/styles/ButtonBase.module.css
+++ b/components/shared/styles/ButtonBase.module.css
@@ -239,9 +239,9 @@
 
 /** Custom Shadows **/
 .shadow-2-neutral-500 {
-  --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-neutral-500-color: rgba(153, 153, 153, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-neutral-500-color: rgba(153, 153, 153, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-neutral-500-color: rgba(153, 153, 153, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: 0px 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),
     0px 2px 2px 0px var(--qtm-shadow-penumbra-neutral-500-color),
@@ -250,9 +250,9 @@
 
 .shadow-4-primary-700:focus,
 .shadow-4-primary-700:focus-within {
-  --qtm-shadow-umbra-primary-700-color: rgba(18,80,196, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-primary-700-color: rgba(18,80,196, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-primary-700-color: rgba(18,80,196, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-primary-700-color: rgba(18, 80, 196, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-primary-700-color: rgba(18, 80, 196, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-primary-700-color: rgba(18, 80, 196, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-primary-700-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-primary-700-color),
@@ -261,9 +261,9 @@
 
 .shadow-4-neutral-700:focus,
 .shadow-4-neutral-700:focus-within {
-  --qtm-shadow-umbra-neutral-700-color: rgba(66,66,66, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-neutral-700-color: rgba(66,66,66, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-neutral-700-color: rgba(66,66,66, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-neutral-700-color: rgba(66, 66, 66, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-neutral-700-color: rgba(66, 66, 66, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-neutral-700-color: rgba(66, 66, 66, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-neutral-700-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-neutral-700-color),
@@ -272,9 +272,9 @@
 
 .shadow-4-secondary-700:focus,
 .shadow-4-secondary-700:focus-within {
-  --qtm-shadow-umbra-secondary-700-color: rgba(222,0,89, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-secondary-700-color: rgba(222,0,89, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-secondary-700-color: rgba(222,0,89, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-secondary-700-color: rgba(222, 0, 89, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-secondary-700-color: rgba(222, 0, 89, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-secondary-700-color: rgba(222, 0, 89, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-secondary-700-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-secondary-700-color),
@@ -283,9 +283,9 @@
 
 .shadow-4-success-700:focus,
 .shadow-4-success-700:focus-within {
-  --qtm-shadow-umbra-success-700-color: rgba(59,97,15, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-success-700-color: rgba(59,97,15, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-success-700-color: rgba(59,97,15, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-success-700-color: rgba(59, 97, 15, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-success-700-color: rgba(59, 97, 15, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-success-700-color: rgba(59, 97, 15, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-success-700-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-success-700-color),
@@ -294,9 +294,9 @@
 
 .shadow-4-warning-700:focus,
 .shadow-4-warning-700:focus-within {
-  --qtm-shadow-umbra-warning-700-color: rgba(240,145,0, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-warning-700-color: rgba(240,145,0, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-warning-700-color: rgba(240,145,0, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-warning-700-color: rgba(240, 145, 0, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-warning-700-color: rgba(240, 145, 0, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-warning-700-color: rgba(240, 145, 0, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-warning-700-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-warning-700-color),
@@ -305,9 +305,9 @@
 
 .shadow-4-error-700:focus,
 .shadow-4-error-700:focus-within {
-  --qtm-shadow-umbra-error-700-color: rgba(233,27,12, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-error-700-color: rgba(233,27,12, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-error-700-color: rgba(233,27,12, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-error-700-color: rgba(233, 27, 12, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-error-700-color: rgba(233, 27, 12, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-error-700-color: rgba(233, 27, 12, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-error-700-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-error-700-color),
@@ -315,9 +315,9 @@
 }
 
 .shadow-4-primary-900:hover {
-  --qtm-shadow-umbra-primary-900-color: rgba(0,47,123, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-primary-900-color: rgba(0,47,123, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-primary-900-color: rgba(0,47,123, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-primary-900-color: rgba(0, 47, 123, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-primary-900-color: rgba(0, 47, 123, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-primary-900-color: rgba(0, 47, 123, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-primary-900-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-primary-900-color),
@@ -325,9 +325,9 @@
 }
 
 .shadow-4-secondary-900:hover {
-  --qtm-shadow-umbra-secondary-900-color: rgba(158,0,63, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-secondary-900-color: rgba(158,0,63, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-secondary-900-color: rgba(158,0,63, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-secondary-900-color: rgba(158, 0, 63, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-secondary-900-color: rgba(158, 0, 63, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-secondary-900-color: rgba(158, 0, 63, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-secondary-900-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-secondary-900-color),
@@ -335,9 +335,9 @@
 }
 
 .shadow-4-neutral-900:hover {
-  --qtm-shadow-umbra-neutral-900-color: rgba(25,25,25, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-neutral-900-color: rgba(25,25,25, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-neutral-900-color: rgba(25,25,25, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-neutral-900-color: rgba(25, 25, 25, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-neutral-900-color: rgba(25, 25, 25, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-neutral-900-color: rgba(25, 25, 25, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-neutral-900-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-neutral-900-color),
@@ -345,9 +345,9 @@
 }
 
 .shadow-4-success-900:hover {
-  --qtm-shadow-umbra-success-900-color: rgba(0,77,64, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-success-900-color: rgba(0,77,64, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-success-900-color: rgba(0,77,64, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-success-900-color: rgba(0, 77, 64, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-success-900-color: rgba(0, 77, 64, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-success-900-color: rgba(0, 77, 64, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-success-900-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-success-900-color),
@@ -355,9 +355,9 @@
 }
 
 .shadow-4-warning-900:hover {
-  --qtm-shadow-umbra-warning-900-color: rgba(209,73,0, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-warning-900-color: rgba(209,73,0, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-warning-900-color: rgba(209,73,0, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-warning-900-color: rgba(209, 73, 0, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-warning-900-color: rgba(209, 73, 0, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-warning-900-color: rgba(209, 73, 0, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-warning-900-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-warning-900-color),
@@ -365,9 +365,9 @@
 }
 
 .shadow-4-error-900:hover {
-  --qtm-shadow-umbra-error-900-color: rgba(172,0,26, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-error-900-color: rgba(172,0,26, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-error-900-color: rgba(172,0,26, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-error-900-color: rgba(172, 0, 26, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-error-900-color: rgba(172, 0, 26, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-error-900-color: rgba(172, 0, 26, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-4-umbra) var(--qtm-shadow-umbra-error-900-color),
     var(--qtm-box-shadow-4-penumbra) var(--qtm-shadow-penumbra-error-900-color),
@@ -375,9 +375,9 @@
 }
 
 .shadow-8-primary-900:active {
-  --qtm-shadow-umbra-primary-900-color: rgba(0,47,123, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-primary-900-color: rgba(0,47,123, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-primary-900-color: rgba(0,47,123, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-primary-900-color: rgba(0, 47, 123, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-primary-900-color: rgba(0, 47, 123, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-primary-900-color: rgba(0, 47, 123, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-8-umbra) var(--qtm-shadow-umbra-primary-900-color),
     var(--qtm-box-shadow-8-penumbra) var(--qtm-shadow-penumbra-primary-900-color),
@@ -385,9 +385,9 @@
 }
 
 .shadow-8-neutral-900:active {
-  --qtm-shadow-umbra-neutral-900-color: rgba(25,25,25, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-neutral-900-color: rgba(25,25,25, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-neutral-900-color: rgba(25,25,25, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-neutral-900-color: rgba(25, 25, 25, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-neutral-900-color: rgba(25, 25, 25, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-neutral-900-color: rgba(25, 25, 25, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-8-umbra) var(--qtm-shadow-umbra-neutral-900-color),
     var(--qtm-box-shadow-8-penumbra) var(--qtm-shadow-penumbra-neutral-900-color),
@@ -395,9 +395,9 @@
 }
 
 .shadow-8-secondary-900:active {
-  --qtm-shadow-umbra-secondary-900-color: rgba(158,0,63, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-secondary-900-color: rgba(158,0,63, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-secondary-900-color: rgba(158,0,63, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-secondary-900-color: rgba(158, 0, 63, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-secondary-900-color: rgba(158, 0, 63, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-secondary-900-color: rgba(158, 0, 63, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-8-umbra) var(--qtm-shadow-umbra-secondary-900-color),
     var(--qtm-box-shadow-8-penumbra) var(--qtm-shadow-penumbra-secondary-900-color),
@@ -405,9 +405,9 @@
 }
 
 .shadow-8-success-900:active {
-  --qtm-shadow-umbra-success-900-color: rgba(0,77,64, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-success-900-color: rgba(0,77,64, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-success-900-color: rgba(0,77,64, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-success-900-color: rgba(0, 77, 64, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-success-900-color: rgba(0, 77, 64, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-success-900-color: rgba(0, 77, 64, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-8-umbra) var(--qtm-shadow-umbra-success-900-color),
     var(--qtm-box-shadow-8-penumbra) var(--qtm-shadow-penumbra-success-900-color),
@@ -415,9 +415,9 @@
 }
 
 .shadow-8-warning-900:active {
-  --qtm-shadow-umbra-warning-900-color: rgba(209,73,0, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-warning-900-color: rgba(209,73,0, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-warning-900-color: rgba(209,73,0, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-warning-900-color: rgba(209, 73, 0, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-warning-900-color: rgba(209, 73, 0, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-warning-900-color: rgba(209, 73, 0, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-8-umbra) var(--qtm-shadow-umbra-warning-900-color),
     var(--qtm-box-shadow-8-penumbra) var(--qtm-shadow-penumbra-warning-900-color),
@@ -425,9 +425,9 @@
 }
 
 .shadow-8-error-900:active {
-  --qtm-shadow-umbra-error-900-color: rgba(172,0,26, var(--qtm-shadow-umbra-opacity));
-  --qtm-shadow-penumbra-error-900-color: rgba(172,0,26, var(--qtm-shadow-penumbra-opacity));
-  --qtm-shadow-ambient-error-900-color: rgba(172,0,26, var(--qtm-shadow-ambient-opacity));
+  --qtm-shadow-umbra-error-900-color: rgba(172, 0, 26, var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-error-900-color: rgba(172, 0, 26, var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-error-900-color: rgba(172, 0, 26, var(--qtm-shadow-ambient-opacity));
 
   box-shadow: var(--qtm-box-shadow-8-umbra) var(--qtm-shadow-umbra-error-900-color),
     var(--qtm-box-shadow-8-penumbra) var(--qtm-shadow-penumbra-error-900-color),
@@ -435,13 +435,158 @@
 }
 
 /** IconButton **/
+
 .icon-button {
   border-radius: 50%;
   border: none;
-  color:  rgba(153,153,153, 0.5);
-  width: 40px;
 
   background-color: transparent;
   box-shadow: none;
   outline: none;
 }
+
+.icon-button:hover,
+.icon-button:focus,
+.icon-button:active {
+  box-shadow: none;
+}
+
+.icon-button-xsmall {
+  width: var(--qtm-spacing-large);
+}
+
+.icon-button-small {
+  width: var(--qtm-spacing-xlarge);
+}
+
+.icon-button-medium {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.icon-button-large {
+  width: var(--qtm-spacing-xxxlarge);
+}
+
+.icon-button-xlarge {
+  width: calc(var(--qtm-spacing-xxxlarge) + var(--qtm-spacing-xsmall));
+}
+
+.icon-button-neutral {
+  --qtm-colors-neutral-500: rgba(153, 153, 153, 0.5);
+  color: var(--qtm-colors-neutral-500);
+}
+
+.icon-button-neutral:hover,
+.icon-button-neutral:focus {
+  --qtm-colors-neutral-300: rgba(224, 224, 224, 0.4);
+
+  background-color: var(--qtm-colors-neutral-300);
+  color: var(--qtm-colors-neutral-700);
+}
+
+.icon-button-neutral:active {
+  --qtm-colors-neutral-300: rgba(224, 224, 224, 0.5);
+
+  background-color: var(--qtm-colors-neutral-300);
+  color: var(--qtm-colors-neutral-700);
+}
+
+.icon-button-primary {
+  --qtm-colors-primary-500: rgba(137, 170, 231, 0.5);
+  color: var(--qtm-colors-primary-500);
+}
+
+.icon-button-primary:hover,
+.icon-button-primary:focus {
+  --qtm-colors-primary-300: rgba(137, 170, 231, 0.4);
+
+  background-color: var(--qtm-colors-primary-300);
+  color: var(--qtm-colors-primary-700);
+}
+
+.icon-button-primary:active {
+  --qtm-colors-primary-300: rgba(137, 170, 231, 0.5);
+
+  background-color: var(--qtm-colors-primary-300);
+  color: var(--qtm-colors-primary-700);
+}
+
+.icon-button-secondary {
+  --qtm-colors-secondary-500: rgba(242, 120, 161, 0.5);
+  color: var(--qtm-colors-secondary-500);
+}
+
+.icon-button-secondary:hover,
+.icon-button-secondary:focus {
+  --qtm-colors-secondary-300: rgba(242, 120, 161, 0.4);
+
+  background-color: var(--qtm-colors-secondary-300);
+  color: var(--qtm-colors-secondary-700);
+}
+
+.icon-button-secondary:active {
+  --qtm-colors-secondary-300: rgba(242, 120, 161, 0.5);
+
+  background-color: var(--qtm-colors-secondary-300);
+  color: var(--qtm-colors-secondary-700);
+}
+
+.icon-button-success {
+  --qtm-colors-success-500: rgba(201, 237, 162, 0.5);
+  color: var(--qtm-colors-success-500);
+}
+
+.icon-button-success:hover,
+.icon-button-success:focus {
+  --qtm-colors-success-300: rgba(201, 237, 162, 0.4);
+
+  background-color: var(--qtm-colors-success-300);
+  color: var(--qtm-colors-success-700);
+}
+
+.icon-button-success:active {
+  --qtm-colors-success-300: rgba(201, 237, 162, 0.5);
+
+  background-color: var(--qtm-colors-success-300);
+  color: var(--qtm-colors-success-700);
+}
+
+.icon-button-warning {
+  --qtm-colors-warning-500: rgba(255, 218, 106, 0.5);
+  color: var(--qtm-colors-warning-500);
+}
+
+.icon-button-warning:hover,
+.icon-button-warning:focus {
+  --qtm-colors-warning-300: rgba(255, 218, 106, 0.4);
+
+  background-color: var(--qtm-colors-warning-300);
+  color: var(--qtm-colors-warning-700);
+}
+
+.icon-button-warning:active {
+  --qtm-colors-warning-300: rgba(255, 218, 106, 0.5);
+
+  background-color: var(--qtm-colors-warning-300);
+  color: var(--qtm-colors-warning-700);
+}
+
+.icon-button-error {
+  --qtm-colors-error-500: rgba(248, 142, 134, 0.5);
+  color: var(--qtm-colors-error-500);
+}
+
+.icon-button-error:hover,
+.icon-button-error:focus {
+  --qtm-colors-error-300: rgba(248, 142, 134, 0.4);
+
+  background-color: var(--qtm-colors-error-300);
+  color: var(--qtm-colors-error-700);
+}
+
+.icon-button-error:active {
+  --qtm-colors-error-300: rgba(248, 142, 134, 0.5);
+
+  background-color: var(--qtm-colors-error-300);
+  color: var(--qtm-colors-error-700);
+}
\ No newline at end of file

From 00af0a37f149407fd8613172df7395820f07729f Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Thu, 1 Aug 2024 09:58:42 -0300
Subject: [PATCH 4/9] build(postcss.config.js): Creating style subfolders
 recursively during css build

---
 postcss.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/postcss.config.js b/postcss.config.js
index 1fb7cafc3..90a03af05 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -39,7 +39,7 @@ module.exports = {
               );
 
               if (!fs.existsSync(styleFilePathInTempFolder)) {
-                fs.mkdirSync(styleFilePathInTempFolder);
+                fs.mkdirSync(styleFilePathInTempFolder, { recursive: true });
               }
 
               const mappedStylesFilePath =

From 751f61bd8a1b0774d18e540281a2e5abdf14c731 Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Thu, 1 Aug 2024 10:00:13 -0300
Subject: [PATCH 5/9] chore: Removing unnecessary styles from the Alert
 component and prop theme from the SegmentedControl

---
 components/Alert/Alert.jsx             | 5 -----
 components/SegmentedControl/index.d.ts | 4 ----
 components/index.css                   | 1 +
 3 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/components/Alert/Alert.jsx b/components/Alert/Alert.jsx
index 354e8e5d6..769ea9a62 100644
--- a/components/Alert/Alert.jsx
+++ b/components/Alert/Alert.jsx
@@ -75,11 +75,6 @@ const Wrapper = styled.div`
       margin: 0 0 0 ${medium}px !important;
       min-height: 0;
       opacity: 1;
-
-      ${CloseButton} {
-        color: ${icon};
-        margin-left: 0;
-      }
     }
   `}
 `;
diff --git a/components/SegmentedControl/index.d.ts b/components/SegmentedControl/index.d.ts
index 7b25db8b0..fb23a0fe2 100644
--- a/components/SegmentedControl/index.d.ts
+++ b/components/SegmentedControl/index.d.ts
@@ -6,10 +6,6 @@ export interface SegmentedControlProps {
     name?: string;
     onChange?: MouseEventHandler<HTMLButtonElement>;
     darkMode?: boolean;
-    theme?: {
-      spacing?: {};
-      colors?: {};
-    };
     items: NonEmptyArray<{
       label: string;
       value: string;
diff --git a/components/index.css b/components/index.css
index 2d2e294e7..3487f6ab8 100644
--- a/components/index.css
+++ b/components/index.css
@@ -17,4 +17,5 @@
 @import "./Badge/index.css";
 @import "./Modal/index.css";
 @import "./Typography/index.css";
+@import "./shared/styles/ButtonBase.module.css";
 @import "./SegmentedControl/index.css";

From 8c9cb269ae3a9cf42f3e67d7e45b23bd67860bd0 Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Thu, 1 Aug 2024 11:38:50 -0300
Subject: [PATCH 6/9] test(SegmentedControl.unit.test.jsx): Using label
 elements instead of buttons in unit tests and upda

---
 .../__snapshots__/Alert.unit.test.jsx.snap    | 439 ++++++++---------
 .../__snapshots__/Badge.unit.test.jsx.snap    |  16 +-
 .../__snapshots__/Button.unit.test.jsx.snap   | 414 ++++++++--------
 .../__snapshots__/Form.unit.test.jsx.snap     |  16 +-
 .../__snapshots__/Modal.unit.test.jsx.snap    |  94 ++--
 .../__snapshots__/Popover.unit.test.jsx.snap  | 423 ++++++++++------
 .../SegmentedControl.unit.test.jsx            |  32 +-
 .../SegmentedControl.unit.test.jsx.snap       | 450 +++++++-----------
 .../SocialButton.unit.test.jsx.snap           |  30 +-
 9 files changed, 971 insertions(+), 943 deletions(-)

diff --git a/components/Alert/__snapshots__/Alert.unit.test.jsx.snap b/components/Alert/__snapshots__/Alert.unit.test.jsx.snap
index 9c8f628bf..62930700d 100644
--- a/components/Alert/__snapshots__/Alert.unit.test.jsx.snap
+++ b/components/Alert/__snapshots__/Alert.unit.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Alert component Should match a skin snapshot 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -12,51 +12,64 @@ exports[`Alert component Should match a skin snapshot 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c2 {
@@ -107,11 +120,6 @@ exports[`Alert component Should match a skin snapshot 1`] = `
   opacity: 1;
 }
 
-.c0 .c1 > .c3 .c3 {
-  color: #424242;
-  margin-left: 0;
-}
-
 .c5 .c1 > .c3 {
   color: #1250C4;
   margin: 0 0 0 16px !important;
@@ -119,11 +127,6 @@ exports[`Alert component Should match a skin snapshot 1`] = `
   opacity: 1;
 }
 
-.c5 .c1 > .c3 .c3 {
-  color: #1250C4;
-  margin-left: 0;
-}
-
 .c6 .c1 > .c3 {
   color: #004D40;
   margin: 0 0 0 16px !important;
@@ -131,11 +134,6 @@ exports[`Alert component Should match a skin snapshot 1`] = `
   opacity: 1;
 }
 
-.c6 .c1 > .c3 .c3 {
-  color: #004D40;
-  margin-left: 0;
-}
-
 .c7 .c1 > .c3 {
   color: #f09100;
   margin: 0 0 0 16px !important;
@@ -143,11 +141,6 @@ exports[`Alert component Should match a skin snapshot 1`] = `
   opacity: 1;
 }
 
-.c7 .c1 > .c3 .c3 {
-  color: #f09100;
-  margin-left: 0;
-}
-
 <div
   class="c0"
   role="alert"
@@ -159,12 +152,12 @@ exports[`Alert component Should match a skin snapshot 1`] = `
       neutral
     </span>
     <button
-      class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c3 c4"
+      class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -181,7 +174,7 @@ exports[`Alert component Should match a skin snapshot 1`] = `
 `;
 
 exports[`Alert component Should match a skin snapshot 2`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -192,51 +185,64 @@ exports[`Alert component Should match a skin snapshot 2`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c2 {
@@ -277,11 +283,6 @@ exports[`Alert component Should match a skin snapshot 2`] = `
   opacity: 1;
 }
 
-.c5 .c1 > .c3 .c3 {
-  color: #424242;
-  margin-left: 0;
-}
-
 .c0 {
   border-radius: 8px;
   box-sizing: border-box;
@@ -299,11 +300,6 @@ exports[`Alert component Should match a skin snapshot 2`] = `
   opacity: 1;
 }
 
-.c0 .c1 > .c3 .c3 {
-  color: #1250C4;
-  margin-left: 0;
-}
-
 .c6 .c1 > .c3 {
   color: #004D40;
   margin: 0 0 0 16px !important;
@@ -311,11 +307,6 @@ exports[`Alert component Should match a skin snapshot 2`] = `
   opacity: 1;
 }
 
-.c6 .c1 > .c3 .c3 {
-  color: #004D40;
-  margin-left: 0;
-}
-
 .c7 .c1 > .c3 {
   color: #f09100;
   margin: 0 0 0 16px !important;
@@ -323,11 +314,6 @@ exports[`Alert component Should match a skin snapshot 2`] = `
   opacity: 1;
 }
 
-.c7 .c1 > .c3 .c3 {
-  color: #f09100;
-  margin-left: 0;
-}
-
 <div
   class="c0"
   role="alert"
@@ -339,12 +325,12 @@ exports[`Alert component Should match a skin snapshot 2`] = `
       blue
     </span>
     <button
-      class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c3 c4"
+      class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -361,7 +347,7 @@ exports[`Alert component Should match a skin snapshot 2`] = `
 `;
 
 exports[`Alert component Should match a skin snapshot 3`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -372,51 +358,64 @@ exports[`Alert component Should match a skin snapshot 3`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c2 {
@@ -457,11 +456,6 @@ exports[`Alert component Should match a skin snapshot 3`] = `
   opacity: 1;
 }
 
-.c5 .c1 > .c3 .c3 {
-  color: #424242;
-  margin-left: 0;
-}
-
 .c6 .c1 > .c3 {
   color: #1250C4;
   margin: 0 0 0 16px !important;
@@ -469,11 +463,6 @@ exports[`Alert component Should match a skin snapshot 3`] = `
   opacity: 1;
 }
 
-.c6 .c1 > .c3 .c3 {
-  color: #1250C4;
-  margin-left: 0;
-}
-
 .c0 {
   border-radius: 8px;
   box-sizing: border-box;
@@ -491,11 +480,6 @@ exports[`Alert component Should match a skin snapshot 3`] = `
   opacity: 1;
 }
 
-.c0 .c1 > .c3 .c3 {
-  color: #004D40;
-  margin-left: 0;
-}
-
 .c7 .c1 > .c3 {
   color: #f09100;
   margin: 0 0 0 16px !important;
@@ -503,11 +487,6 @@ exports[`Alert component Should match a skin snapshot 3`] = `
   opacity: 1;
 }
 
-.c7 .c1 > .c3 .c3 {
-  color: #f09100;
-  margin-left: 0;
-}
-
 <div
   class="c0"
   role="alert"
@@ -519,12 +498,12 @@ exports[`Alert component Should match a skin snapshot 3`] = `
       success
     </span>
     <button
-      class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c3 c4"
+      class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -541,7 +520,7 @@ exports[`Alert component Should match a skin snapshot 3`] = `
 `;
 
 exports[`Alert component Should match a skin snapshot 4`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -552,51 +531,64 @@ exports[`Alert component Should match a skin snapshot 4`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c2 {
@@ -637,11 +629,6 @@ exports[`Alert component Should match a skin snapshot 4`] = `
   opacity: 1;
 }
 
-.c5 .c1 > .c3 .c3 {
-  color: #424242;
-  margin-left: 0;
-}
-
 .c6 .c1 > .c3 {
   color: #1250C4;
   margin: 0 0 0 16px !important;
@@ -649,11 +636,6 @@ exports[`Alert component Should match a skin snapshot 4`] = `
   opacity: 1;
 }
 
-.c6 .c1 > .c3 .c3 {
-  color: #1250C4;
-  margin-left: 0;
-}
-
 .c7 .c1 > .c3 {
   color: #004D40;
   margin: 0 0 0 16px !important;
@@ -661,11 +643,6 @@ exports[`Alert component Should match a skin snapshot 4`] = `
   opacity: 1;
 }
 
-.c7 .c1 > .c3 .c3 {
-  color: #004D40;
-  margin-left: 0;
-}
-
 .c0 {
   border-radius: 8px;
   box-sizing: border-box;
@@ -683,11 +660,6 @@ exports[`Alert component Should match a skin snapshot 4`] = `
   opacity: 1;
 }
 
-.c0 .c1 > .c3 .c3 {
-  color: #f09100;
-  margin-left: 0;
-}
-
 <div
   class="c0"
   role="alert"
@@ -699,12 +671,12 @@ exports[`Alert component Should match a skin snapshot 4`] = `
       warning
     </span>
     <button
-      class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c3 c4"
+      class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -721,7 +693,7 @@ exports[`Alert component Should match a skin snapshot 4`] = `
 `;
 
 exports[`Alert component Should match a skin snapshot 5`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -732,51 +704,64 @@ exports[`Alert component Should match a skin snapshot 5`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c2 {
@@ -827,11 +812,6 @@ exports[`Alert component Should match a skin snapshot 5`] = `
   opacity: 1;
 }
 
-.c0 .c1 > .c3 .c3 {
-  color: #424242;
-  margin-left: 0;
-}
-
 .c5 .c1 > .c3 {
   color: #1250C4;
   margin: 0 0 0 16px !important;
@@ -839,11 +819,6 @@ exports[`Alert component Should match a skin snapshot 5`] = `
   opacity: 1;
 }
 
-.c5 .c1 > .c3 .c3 {
-  color: #1250C4;
-  margin-left: 0;
-}
-
 .c6 .c1 > .c3 {
   color: #004D40;
   margin: 0 0 0 16px !important;
@@ -851,11 +826,6 @@ exports[`Alert component Should match a skin snapshot 5`] = `
   opacity: 1;
 }
 
-.c6 .c1 > .c3 .c3 {
-  color: #004D40;
-  margin-left: 0;
-}
-
 .c7 .c1 > .c3 {
   color: #f09100;
   margin: 0 0 0 16px !important;
@@ -863,11 +833,6 @@ exports[`Alert component Should match a skin snapshot 5`] = `
   opacity: 1;
 }
 
-.c7 .c1 > .c3 .c3 {
-  color: #f09100;
-  margin-left: 0;
-}
-
 <div
   class="c0"
   role="alert"
@@ -879,12 +844,12 @@ exports[`Alert component Should match a skin snapshot 5`] = `
       error
     </span>
     <button
-      class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c3 c4"
+      class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -901,7 +866,7 @@ exports[`Alert component Should match a skin snapshot 5`] = `
 `;
 
 exports[`Alert component Should match the snapshot of a simple alert 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -912,51 +877,64 @@ exports[`Alert component Should match the snapshot of a simple alert 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c2 {
@@ -1007,11 +985,6 @@ exports[`Alert component Should match the snapshot of a simple alert 1`] = `
   opacity: 1;
 }
 
-.c0 .c1 > .c3 .c3 {
-  color: #424242;
-  margin-left: 0;
-}
-
 <div
   class="c0"
   role="alert"
@@ -1023,12 +996,12 @@ exports[`Alert component Should match the snapshot of a simple alert 1`] = `
       Sample alert
     </span>
     <button
-      class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c3 c4"
+      class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c3 c4"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -1045,7 +1018,7 @@ exports[`Alert component Should match the snapshot of a simple alert 1`] = `
 `;
 
 exports[`Alert component Should match the snapshot with an icon 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -1056,51 +1029,64 @@ exports[`Alert component Should match the snapshot with an icon 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c2 {
@@ -1160,11 +1146,6 @@ exports[`Alert component Should match the snapshot with an icon 1`] = `
   opacity: 1;
 }
 
-.c0 .c1 > .c5 .c5 {
-  color: #424242;
-  margin-left: 0;
-}
-
 <div
   class="c0"
   role="alert"
@@ -1189,12 +1170,12 @@ exports[`Alert component Should match the snapshot with an icon 1`] = `
       Sample alert
     </span>
     <button
-      class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c5 c6"
+      class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c5 c6"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
diff --git a/components/Badge/__snapshots__/Badge.unit.test.jsx.snap b/components/Badge/__snapshots__/Badge.unit.test.jsx.snap
index c56da5ec0..04e42a5d3 100644
--- a/components/Badge/__snapshots__/Badge.unit.test.jsx.snap
+++ b/components/Badge/__snapshots__/Badge.unit.test.jsx.snap
@@ -121,7 +121,7 @@ exports[`<Badge /> Should match snapshot with children 1`] = `
   color: var(--qtm-colors-neutral-700);
 }
 
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -132,27 +132,27 @@ exports[`<Badge /> Should match snapshot with children 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -168,7 +168,7 @@ exports[`<Badge /> Should match snapshot with children 1`] = `
     10
   </span>
   <button
-    class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+    class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
     type="button"
   />
 </div>
diff --git a/components/Button/__snapshots__/Button.unit.test.jsx.snap b/components/Button/__snapshots__/Button.unit.test.jsx.snap
index 069525485..337f19f13 100644
--- a/components/Button/__snapshots__/Button.unit.test.jsx.snap
+++ b/components/Button/__snapshots__/Button.unit.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button component Should match the snapshot 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -12,27 +12,27 @@ exports[`Button component Should match the snapshot 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -40,7 +40,7 @@ exports[`Button component Should match the snapshot 1`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   Text
@@ -48,7 +48,7 @@ exports[`Button component Should match the snapshot 1`] = `
 `;
 
 exports[`Button component should render a button only icon state  1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -59,37 +59,37 @@ exports[`Button component should render a button only icon state  1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -97,12 +97,12 @@ exports[`Button component should render a button only icon state  1`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
     data-qtm-preloader="icon"
     data-testid="InfoIcon"
     focusable="false"
@@ -117,7 +117,7 @@ exports[`Button component should render a button only icon state  1`] = `
 `;
 
 exports[`Button component should render a button only icon state  2`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -128,37 +128,37 @@ exports[`Button component should render a button only icon state  2`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-xsmall___4UqNE {
+.ButtonBase-module__button-xsmall___EJee7 {
   line-height: var(--qtm-base-font-size);
   min-height: var(--qtm-spacing-large);
   padding: 0 var(--qtm-spacing-xsmall);
 }
 
-.Button-module__button-small___HWutw,
-.Button-module__button-xsmall___4UqNE {
+.ButtonBase-module__button-small___ffdO7,
+.ButtonBase-module__button-xsmall___EJee7 {
   font-size: var(--qtm-font-size-12);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -166,12 +166,12 @@ exports[`Button component should render a button only icon state  2`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-xsmall___4UqNE Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-xsmall___EJee7 ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-xsmall___prEKP css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-xsmall___Iilfe css-i4bv87-MuiSvgIcon-root"
     data-qtm-preloader="icon"
     data-testid="InfoIcon"
     focusable="false"
@@ -186,7 +186,7 @@ exports[`Button component should render a button only icon state  2`] = `
 `;
 
 exports[`Button component should render a button only icon state  3`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -197,41 +197,41 @@ exports[`Button component should render a button only icon state  3`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-small___HWutw,
-.Button-module__button-xsmall___4UqNE {
+.ButtonBase-module__button-small___ffdO7,
+.ButtonBase-module__button-xsmall___EJee7 {
   font-size: var(--qtm-font-size-12);
 }
 
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-small___ffdO7 {
   line-height: calc(var(--qtm-base-font-size)*.75*1.5);
   min-height: var(--qtm-spacing-xlarge);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -239,12 +239,12 @@ exports[`Button component should render a button only icon state  3`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-small___HWutw Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-small___ffdO7 ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-small___m8db9 css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-small___tdGMn css-i4bv87-MuiSvgIcon-root"
     data-qtm-preloader="icon"
     data-testid="InfoIcon"
     focusable="false"
@@ -259,7 +259,7 @@ exports[`Button component should render a button only icon state  3`] = `
 `;
 
 exports[`Button component should render a button only icon state  4`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -270,31 +270,31 @@ exports[`Button component should render a button only icon state  4`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-large___U5QhC {
+.ButtonBase-module__button-large___nufS0 {
   font-size: var(--qtm-font-size-20);
   line-height: calc(var(--qtm-base-font-size)*1.75);
   min-height: var(--qtm-spacing-xxxlarge);
 }
 
-.Button-module__button-large___U5QhC,
-.Button-module__button-xlarge___5YRMz {
+.ButtonBase-module__button-large___nufS0,
+.ButtonBase-module__button-xlarge___rfsxW {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -302,12 +302,12 @@ exports[`Button component should render a button only icon state  4`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-large___U5QhC Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-large___nufS0 ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 css-i4bv87-MuiSvgIcon-root"
     data-qtm-preloader="icon"
     data-testid="InfoIcon"
     focusable="false"
@@ -322,7 +322,7 @@ exports[`Button component should render a button only icon state  4`] = `
 `;
 
 exports[`Button component should render a button only icon state  5`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -333,31 +333,31 @@ exports[`Button component should render a button only icon state  5`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-large___U5QhC,
-.Button-module__button-xlarge___5YRMz {
+.ButtonBase-module__button-large___nufS0,
+.ButtonBase-module__button-xlarge___rfsxW {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-xlarge___5YRMz {
+.ButtonBase-module__button-xlarge___rfsxW {
   font-size: var(--qtm-font-size-24);
   line-height: calc(var(--qtm-base-font-size)*2);
   min-height: calc(var(--qtm-spacing-xxxlarge) + var(--qtm-spacing-xsmall));
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -365,12 +365,12 @@ exports[`Button component should render a button only icon state  5`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-xlarge___5YRMz Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-xlarge___rfsxW ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 css-i4bv87-MuiSvgIcon-root"
     data-qtm-preloader="icon"
     data-testid="InfoIcon"
     focusable="false"
@@ -385,7 +385,7 @@ exports[`Button component should render a button only icon state  5`] = `
 `;
 
 exports[`Button component when center prop is set 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -396,32 +396,32 @@ exports[`Button component when center prop is set 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__button-center___cQBiO {
+.ButtonBase-module__button-center___Ce06a {
   margin-left: auto;
   margin-right: auto;
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -429,7 +429,7 @@ exports[`Button component when center prop is set 1`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-center___cQBiO Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-center___Ce06a ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   Text
@@ -437,7 +437,7 @@ exports[`Button component when center prop is set 1`] = `
 `;
 
 exports[`Button component when full prop is set 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -448,31 +448,31 @@ exports[`Button component when full prop is set 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__button-full___cUDBp {
+.ButtonBase-module__button-full___tbwzg {
   width: 100%;
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -480,7 +480,7 @@ exports[`Button component when full prop is set 1`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__button-full___cUDBp Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__button-full___tbwzg ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   Text
@@ -488,7 +488,7 @@ exports[`Button component when full prop is set 1`] = `
 `;
 
 exports[`Button component when there is a skin set should match secondary snapshot 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -499,27 +499,27 @@ exports[`Button component when there is a skin set should match secondary snapsh
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-neutral___Tymxh {
+.ButtonBase-module__button-default-neutral___PafPL {
   background-color: var(--qtm-colors-neutral-700);
   border: 2px solid var(--qtm-colors-neutral-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -527,7 +527,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-neutral___Tymxh Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-neutral-900___RMGup Button-module__shadow-4-neutral-700___qtCCL Button-module__shadow-8-neutral-900___ocRS3"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-neutral___PafPL ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-neutral-900___385cv ButtonBase-module__shadow-4-neutral-700___0bwKP ButtonBase-module__shadow-8-neutral-900___-1Nrz"
   type="button"
 >
   neutral
@@ -535,7 +535,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 `;
 
 exports[`Button component when there is a skin set should match secondary snapshot 2`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -546,27 +546,27 @@ exports[`Button component when there is a skin set should match secondary snapsh
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -574,7 +574,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   primary
@@ -582,7 +582,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 `;
 
 exports[`Button component when there is a skin set should match secondary snapshot 3`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -593,27 +593,27 @@ exports[`Button component when there is a skin set should match secondary snapsh
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-success___vT9vw {
+.ButtonBase-module__button-default-success___behjr {
   background-color: var(--qtm-colors-success-700);
   border: 2px solid var(--qtm-colors-success-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -621,7 +621,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-success___vT9vw Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-success-900___cbr4C Button-module__shadow-4-success-700___T6Jye Button-module__shadow-8-success-900___3NjRb"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-success___behjr ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-success-900___kPjrj ButtonBase-module__shadow-4-success-700___6tbCe ButtonBase-module__shadow-8-success-900___KMKhJ"
   type="button"
 >
   success
@@ -629,7 +629,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 `;
 
 exports[`Button component when there is a skin set should match secondary snapshot 4`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -640,27 +640,27 @@ exports[`Button component when there is a skin set should match secondary snapsh
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-warning___yGKND {
+.ButtonBase-module__button-default-warning___onIx3 {
   background-color: var(--qtm-colors-warning-700);
   border: 2px solid var(--qtm-colors-warning-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -668,7 +668,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-warning___yGKND Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-warning-900___FHXer Button-module__shadow-4-warning-700___-Vppg Button-module__shadow-8-warning-900___UCpvI"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-warning___onIx3 ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-warning-900___ND8BN ButtonBase-module__shadow-4-warning-700___-oztY ButtonBase-module__shadow-8-warning-900___3Qt8Z"
   type="button"
 >
   warning
@@ -676,7 +676,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 `;
 
 exports[`Button component when there is a skin set should match secondary snapshot 5`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -687,27 +687,27 @@ exports[`Button component when there is a skin set should match secondary snapsh
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-error___XtXR- {
+.ButtonBase-module__button-default-error___xa2XO {
   background-color: var(--qtm-colors-error-700);
   border: 2px solid var(--qtm-colors-error-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -715,7 +715,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-error___XtXR- Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-error-900___aw0O- Button-module__shadow-4-error-700___0k-yJ Button-module__shadow-8-error-900___Kkp5M"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-error___xa2XO ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-error-900___X-yBO ButtonBase-module__shadow-4-error-700___HlpDM ButtonBase-module__shadow-8-error-900___tTKQD"
   type="button"
 >
   error
@@ -723,7 +723,7 @@ exports[`Button component when there is a skin set should match secondary snapsh
 `;
 
 exports[`Button component when there is a type set should match secondary snapshot 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -734,27 +734,27 @@ exports[`Button component when there is a type set should match secondary snapsh
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -762,7 +762,7 @@ exports[`Button component when there is a type set should match secondary snapsh
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   button
@@ -770,7 +770,7 @@ exports[`Button component when there is a type set should match secondary snapsh
 `;
 
 exports[`Button component when there is a type set should match secondary snapshot 2`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -781,27 +781,27 @@ exports[`Button component when there is a type set should match secondary snapsh
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -809,7 +809,7 @@ exports[`Button component when there is a type set should match secondary snapsh
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="reset"
 >
   reset
@@ -817,7 +817,7 @@ exports[`Button component when there is a type set should match secondary snapsh
 `;
 
 exports[`Button component when there is a type set should match secondary snapshot 3`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -828,27 +828,27 @@ exports[`Button component when there is a type set should match secondary snapsh
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -856,7 +856,7 @@ exports[`Button component when there is a type set should match secondary snapsh
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="submit"
 >
   submit
@@ -864,7 +864,7 @@ exports[`Button component when there is a type set should match secondary snapsh
 `;
 
 exports[`Button component with an icon should match secondary snapshot 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -875,41 +875,41 @@ exports[`Button component with an icon should match secondary snapshot 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-with-children___-Gopd {
+.ButtonBase-module__button-icon-with-children___qOB0A {
   margin-right: var(--qtm-spacing-xsmall);
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -917,12 +917,12 @@ exports[`Button component with an icon should match secondary snapshot 1`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-with-children___-Gopd Button-module__button-icon-medium___ppo2m css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-with-children___qOB0A ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
     data-qtm-preloader="icon"
     data-testid="SearchIcon"
     focusable="false"
@@ -938,7 +938,7 @@ exports[`Button component with an icon should match secondary snapshot 1`] = `
 `;
 
 exports[`Button component with an icon should match secondary snapshot 2`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -949,41 +949,41 @@ exports[`Button component with an icon should match secondary snapshot 2`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-with-children___-Gopd {
+.ButtonBase-module__button-icon-with-children___qOB0A {
   margin-right: var(--qtm-spacing-xsmall);
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -991,12 +991,12 @@ exports[`Button component with an icon should match secondary snapshot 2`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-with-children___-Gopd Button-module__button-icon-medium___ppo2m css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-with-children___qOB0A ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
     data-qtm-preloader="icon"
     data-testid="PaymentIcon"
     focusable="false"
@@ -1012,7 +1012,7 @@ exports[`Button component with an icon should match secondary snapshot 2`] = `
 `;
 
 exports[`Button component with an icon should match secondary snapshot 3`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -1023,41 +1023,41 @@ exports[`Button component with an icon should match secondary snapshot 3`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-with-children___-Gopd {
+.ButtonBase-module__button-icon-with-children___qOB0A {
   margin-right: var(--qtm-spacing-xsmall);
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -1065,12 +1065,12 @@ exports[`Button component with an icon should match secondary snapshot 3`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-with-children___-Gopd Button-module__button-icon-medium___ppo2m css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-with-children___qOB0A ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
     data-qtm-preloader="icon"
     data-testid="LockIcon"
     focusable="false"
@@ -1086,7 +1086,7 @@ exports[`Button component with an icon should match secondary snapshot 3`] = `
 `;
 
 exports[`Button component with an icon should match secondary snapshot 4`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -1097,41 +1097,41 @@ exports[`Button component with an icon should match secondary snapshot 4`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-with-children___-Gopd {
+.ButtonBase-module__button-icon-with-children___qOB0A {
   margin-right: var(--qtm-spacing-xsmall);
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -1139,12 +1139,12 @@ exports[`Button component with an icon should match secondary snapshot 4`] = `
 }
 
 <button
-  class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
   type="button"
 >
   <svg
     aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-with-children___-Gopd Button-module__button-icon-medium___ppo2m css-i4bv87-MuiSvgIcon-root"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-with-children___qOB0A ButtonBase-module__button-icon-medium___HY30Y css-i4bv87-MuiSvgIcon-root"
     data-qtm-preloader="icon"
     data-testid="StarIcon"
     focusable="false"
diff --git a/components/Form/__snapshots__/Form.unit.test.jsx.snap b/components/Form/__snapshots__/Form.unit.test.jsx.snap
index b2ce5d446..cfd0a3679 100644
--- a/components/Form/__snapshots__/Form.unit.test.jsx.snap
+++ b/components/Form/__snapshots__/Form.unit.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form component  should match the snapshot 1`] = `
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -12,27 +12,27 @@ exports[`Form component  should match the snapshot 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -393,7 +393,7 @@ exports[`Form component  should match the snapshot 1`] = `
     </div>
   </div>
   <button
-    class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH"
+    class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5"
     type="submit"
   >
      Enviar 
diff --git a/components/Modal/__snapshots__/Modal.unit.test.jsx.snap b/components/Modal/__snapshots__/Modal.unit.test.jsx.snap
index 04bca8de3..c17c7e667 100644
--- a/components/Modal/__snapshots__/Modal.unit.test.jsx.snap
+++ b/components/Modal/__snapshots__/Modal.unit.test.jsx.snap
@@ -74,7 +74,7 @@ exports[`<Modal /> Snapshots should match the snapshot 1`] = `
   line-height: 1.25;
 }
 
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -85,51 +85,64 @@ exports[`<Modal /> Snapshots should match the snapshot 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 @media (min-width:0px) {
@@ -189,12 +202,12 @@ exports[`<Modal /> Snapshots should match the snapshot 1`] = `
     </footer>
     <button
       aria-label="close dialog"
-      class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG Modal-module__close-icon___a0f6b"
+      class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn Modal-module__close-icon___a0f6b"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
         data-qtm-preloader="icon"
         data-testid="CloseIcon"
         focusable="false"
@@ -271,7 +284,7 @@ exports[`<Modal /> Snapshots should match the snapshot 2`] = `
   line-height: 1.25;
 }
 
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -282,51 +295,64 @@ exports[`<Modal /> Snapshots should match the snapshot 2`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 @media (min-width:0px) {
@@ -382,12 +408,12 @@ exports[`<Modal /> Snapshots should match the snapshot 2`] = `
   </footer>
   <button
     aria-label="close dialog"
-    class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG Modal-module__close-icon___a0f6b"
+    class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn Modal-module__close-icon___a0f6b"
     type="button"
   >
     <svg
       aria-hidden="true"
-      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
       data-qtm-preloader="icon"
       data-testid="CloseIcon"
       focusable="false"
diff --git a/components/Popover/__snapshots__/Popover.unit.test.jsx.snap b/components/Popover/__snapshots__/Popover.unit.test.jsx.snap
index 40229c5c3..92a43747a 100644
--- a/components/Popover/__snapshots__/Popover.unit.test.jsx.snap
+++ b/components/Popover/__snapshots__/Popover.unit.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Popover component should match snapshots 1`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -13,51 +13,64 @@ exports[`Popover component should match snapshots 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c1 {
@@ -143,12 +156,12 @@ exports[`Popover component should match snapshots 1`] = `
         This is a hint
       </div>
       <button
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c2"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c2"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
           data-qtm-preloader="icon"
           data-testid="CloseIcon"
           focusable="false"
@@ -176,7 +189,7 @@ exports[`Popover component should match snapshots 1`] = `
 
 exports[`Popover component should match snapshots 2`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -187,51 +200,64 @@ exports[`Popover component should match snapshots 2`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c1 {
@@ -317,12 +343,12 @@ exports[`Popover component should match snapshots 2`] = `
         This is a hint
       </div>
       <button
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c2"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c2"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
           data-qtm-preloader="icon"
           data-testid="CloseIcon"
           focusable="false"
@@ -350,7 +376,7 @@ exports[`Popover component should match snapshots 2`] = `
 
 exports[`Popover component should match snapshots 3`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -361,51 +387,64 @@ exports[`Popover component should match snapshots 3`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-success___iSgM8 {
+  --qtm-colors-success-500: hsla(89,68%,78%,.5);
+  color: var(--qtm-colors-success-500);
 }
 
 .c1 {
@@ -491,12 +530,12 @@ exports[`Popover component should match snapshots 3`] = `
         This is a hint
       </div>
       <button
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c2"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-success___iSgM8 c2"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
           data-qtm-preloader="icon"
           data-testid="CloseIcon"
           focusable="false"
@@ -524,7 +563,7 @@ exports[`Popover component should match snapshots 3`] = `
 
 exports[`Popover component should match snapshots 4`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -535,51 +574,64 @@ exports[`Popover component should match snapshots 4`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-warning___hXpt0 {
+  --qtm-colors-warning-500: rgba(255,218,106,.5);
+  color: var(--qtm-colors-warning-500);
 }
 
 .c1 {
@@ -665,12 +717,12 @@ exports[`Popover component should match snapshots 4`] = `
         This is a hint
       </div>
       <button
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c2"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-warning___hXpt0 c2"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
           data-qtm-preloader="icon"
           data-testid="CloseIcon"
           focusable="false"
@@ -698,7 +750,7 @@ exports[`Popover component should match snapshots 4`] = `
 
 exports[`Popover component should match snapshots 5`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -709,51 +761,64 @@ exports[`Popover component should match snapshots 5`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-error___Z1b-H {
+  --qtm-colors-error-500: hsla(4,89%,75%,.5);
+  color: var(--qtm-colors-error-500);
 }
 
 .c1 {
@@ -839,12 +904,12 @@ exports[`Popover component should match snapshots 5`] = `
         This is a hint
       </div>
       <button
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c2"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-error___Z1b-H c2"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
           data-qtm-preloader="icon"
           data-testid="CloseIcon"
           focusable="false"
@@ -872,7 +937,7 @@ exports[`Popover component should match snapshots 5`] = `
 
 exports[`Popover component should match snapshots 6`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -883,51 +948,64 @@ exports[`Popover component should match snapshots 6`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c1 {
@@ -1013,12 +1091,12 @@ exports[`Popover component should match snapshots 6`] = `
         This is a hint
       </div>
       <button
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c2"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c2"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
           data-qtm-preloader="icon"
           data-testid="CloseIcon"
           focusable="false"
@@ -1046,7 +1124,7 @@ exports[`Popover component should match snapshots 6`] = `
 
 exports[`Popover component should match snapshots 7`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -1057,51 +1135,64 @@ exports[`Popover component should match snapshots 7`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c1 {
@@ -1184,12 +1275,12 @@ exports[`Popover component should match snapshots 7`] = `
         This is a hint
       </div>
       <button
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c2"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c2"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
           data-qtm-preloader="icon"
           data-testid="CloseIcon"
           focusable="false"
@@ -1217,7 +1308,7 @@ exports[`Popover component should match snapshots 7`] = `
 
 exports[`Popover component should match snapshots 8`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -1228,51 +1319,64 @@ exports[`Popover component should match snapshots 8`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c1 {
@@ -1355,12 +1459,12 @@ exports[`Popover component should match snapshots 8`] = `
         This is a hint
       </div>
       <button
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c2"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c2"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
           data-qtm-preloader="icon"
           data-testid="CloseIcon"
           focusable="false"
@@ -1388,7 +1492,7 @@ exports[`Popover component should match snapshots 8`] = `
 
 exports[`Popover component should match snapshots 9`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -1399,51 +1503,64 @@ exports[`Popover component should match snapshots 9`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-icon___c2VCp {
+.ButtonBase-module__button-icon___s3a-2 {
   pointer-events: none;
 }
 
-.Button-module__button-icon-medium___ppo2m,
-.Button-module__button-icon-small___m8db9,
-.Button-module__button-icon-xsmall___prEKP {
+.ButtonBase-module__button-icon-medium___HY30Y,
+.ButtonBase-module__button-icon-small___tdGMn,
+.ButtonBase-module__button-icon-xsmall___Iilfe {
   width: calc(var(--qtm-base-font-size)*1.5);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
-.Button-module__icon-button___gjVoG {
+.ButtonBase-module__icon-button___nb2zK {
   background-color: transparent;
   border: none;
   border-radius: 50%;
-  box-shadow: none;
-  color: hsla(0,0%,60%,.5);
   outline: none;
-  width: 40px;
+}
+
+.ButtonBase-module__icon-button___nb2zK,
+.ButtonBase-module__icon-button___nb2zK:active,
+.ButtonBase-module__icon-button___nb2zK:focus,
+.ButtonBase-module__icon-button___nb2zK:hover {
+  box-shadow: none;
+}
+
+.ButtonBase-module__icon-button-medium___-pGge {
+  width: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__icon-button-neutral___CseSn {
+  --qtm-colors-neutral-500: hsla(0,0%,60%,.5);
+  color: var(--qtm-colors-neutral-500);
 }
 
 .c1 {
@@ -1529,12 +1646,12 @@ exports[`Popover component should match snapshots 9`] = `
         This is a hint
       </div>
       <button
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH Button-module__icon-button___gjVoG c2"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 ButtonBase-module__icon-button___nb2zK ButtonBase-module__icon-button-medium___-pGge ButtonBase-module__icon-button-neutral___CseSn c2"
         type="button"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Button-module__button-icon___c2VCp Button-module__button-icon-medium___ppo2m css-1696fkf-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium ButtonBase-module__button-icon___s3a-2 ButtonBase-module__button-icon-medium___HY30Y css-1696fkf-MuiSvgIcon-root"
           data-qtm-preloader="icon"
           data-testid="CloseIcon"
           focusable="false"
diff --git a/components/SegmentedControl/SegmentedControl.unit.test.jsx b/components/SegmentedControl/SegmentedControl.unit.test.jsx
index fb28d403e..c957c2e12 100644
--- a/components/SegmentedControl/SegmentedControl.unit.test.jsx
+++ b/components/SegmentedControl/SegmentedControl.unit.test.jsx
@@ -35,7 +35,7 @@ describe('<SegmentedControl />', () => {
       <SegmentedControl items={nContents} name="unit-test" />,
     );
 
-    container.querySelectorAll('button').forEach((label, index) => {
+    container.querySelectorAll('label').forEach((label, index) => {
       expect(label.getAttribute('aria-label')).toEqual(nContents[index].label);
     });
   });
@@ -45,8 +45,8 @@ describe('<SegmentedControl />', () => {
     const firstItemValue = defaultContent[0].value;
     const itemValueChecked = defaultContent[1].value;
 
-    const checkedInput = screen.getAllByRole('radio')[1];
-    const firstInput = screen.getAllByRole('radio')[0];
+    const checkedInput = screen.getByRole('radio', { name: /Operacional/i });
+    const firstInput = screen.getByRole('radio', { name: /Profissional/i });
 
     expect(checkedInput).toHaveAttribute('checked');
     expect(checkedInput.getAttribute('value')).toEqual(itemValueChecked);
@@ -55,7 +55,8 @@ describe('<SegmentedControl />', () => {
 
   it('should change the button when its clicked', () => {
     const onChangeMock = jest.fn();
-    const { container } = render(
+
+    render(
       <SegmentedControl
         items={defaultContent}
         name="unit-test"
@@ -63,18 +64,19 @@ describe('<SegmentedControl />', () => {
       />,
     );
 
-    const firstInput = screen.getAllByRole('radio')[0];
+    const firstInput = screen.getByRole('radio', { name: /Profissional/i });
+    const labelFirstInput = firstInput.parentElement;
 
     expect(onChangeMock).not.toHaveBeenCalled();
 
-    expect(firstInput).not.toHaveAttribute('checked');
+    expect(labelFirstInput).toHaveProperty('tabIndex', 0);
+    expect(firstInput).toHaveProperty('checked', false);
     fireEvent.click(firstInput);
 
-    expect(container.querySelectorAll('button')[0]).toHaveClass(
-      'input-checked',
-    );
-    expect(onChangeMock).toBeCalled();
-    expect(onChangeMock).toBeCalledTimes(1);
+    expect(firstInput).toHaveProperty('checked', true);
+    expect(labelFirstInput).toHaveProperty('tabIndex', -1);
+    expect(onChangeMock).toHaveBeenCalled();
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
   });
 
   it('should not have checked prop', () => {
@@ -86,12 +88,12 @@ describe('<SegmentedControl />', () => {
     });
   });
 
-  it('(a11y) should contains aria-label corresponding the button of items', () => {
+  it('(a11y) should contains aria-label corresponding the label of items', () => {
     const { container } = render(
       <SegmentedControl items={defaultContent} name="unit-test" />,
     );
 
-    const firstLabel = container.querySelectorAll('button')[0];
+    const firstLabel = container.querySelectorAll('label')[0];
     const firstItemLabel = defaultContent[0].label;
     expect(firstLabel.getAttribute('aria-label')).toMatch(firstItemLabel);
   });
@@ -101,8 +103,8 @@ describe('<SegmentedControl />', () => {
       <SegmentedControl items={defaultContent} name="unit-test" />,
     );
 
-    const firstLabel = container.querySelectorAll('button')[0];
-    const secondLabel = container.querySelectorAll('button')[1];
+    const firstLabel = container.querySelectorAll('label')[0];
+    const secondLabel = container.querySelectorAll('label')[1];
 
     expect(firstLabel.getAttribute('tabindex')).toEqual('0');
     expect(secondLabel.getAttribute('tabindex')).toEqual('-1');
diff --git a/components/SegmentedControl/__snapshots__/SegmentedControl.unit.test.jsx.snap b/components/SegmentedControl/__snapshots__/SegmentedControl.unit.test.jsx.snap
index 321fd7a84..e2eedcd48 100644
--- a/components/SegmentedControl/__snapshots__/SegmentedControl.unit.test.jsx.snap
+++ b/components/SegmentedControl/__snapshots__/SegmentedControl.unit.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`<SegmentedControl /> should match the snapshots 1`] = `
   word-break: break-word;
 }
 
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -23,39 +23,59 @@ exports[`<SegmentedControl /> should match the snapshots 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-stroked-primary___YY4WC {
+.ButtonBase-module__button-stroked-primary___uybCe {
   background-color: var(--qtm-colors-neutral-0);
   border: 2px solid var(--qtm-colors-primary-700);
   color: var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
+.SegmentedButton-module__label___sRquy {
+  border: 1px solid;
+  border-radius: 0;
+  border-right: 0;
+  border-color: var(--qtm-colors-primary-700);
+  font-weight: 400;
+  letter-spacing: .2px;
+  padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-xsmall);
+  width: 100%;
+}
+
+.SegmentedButton-module__label-checked___xgs6w {
+  font-weight: 700;
+}
+
+.SegmentedControl-module__wrapper___pHm7V {
+  display: flex;
+  justify-content: space-around;
+}
+
 @media (min-width:0px) {
   .Row-module__row___xiasO {
     margin-bottom: var(--qtm-gutter-xsmall);
@@ -104,7 +124,7 @@ exports[`<SegmentedControl /> should match the snapshots 1`] = `
   }
 }
 
-.c2 {
+.c0 {
   border: 0;
   height: 0;
   margin: 0;
@@ -115,47 +135,6 @@ exports[`<SegmentedControl /> should match the snapshots 1`] = `
   width: 0;
 }
 
-.c1 {
-  width: 100%;
-  border-radius: 0px;
-  font-weight: 400;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-}
-
-.c1.input-checked {
-  font-weight: 700;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-}
-
-.c0 button {
-  border: 1px solid;
-  border-right: 0px;
-  border-color: #1250C4;
-  padding: 4px 8px;
-}
-
-.c0 button:first-child {
-  border-radius: 4px 0px 0px 4px;
-}
-
-.c0 button:last-child {
-  border-radius: 0px 4px 4px 0px;
-  border: 1px solid #1250C4;
-}
-
 <div
   class="Row-module__row___xiasO"
 >
@@ -164,57 +143,54 @@ exports[`<SegmentedControl /> should match the snapshots 1`] = `
     style="--qtm-col-small-size: 6; --qtm-col-medium-size: 5;"
   >
     <div
-      class="c0"
+      class="SegmentedControl-module__wrapper___pHm7V"
     >
-      <button
+      <label
         aria-label="Profissional"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-0"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-0"
           name="segmented-control"
           type="radio"
           value="profissional"
         />
         Profissional
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Operacional"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1 input-checked"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy SegmentedButton-module__label-checked___xgs6w"
         for="segmented-button-1"
         tabindex="-1"
-        type="button"
       >
         <input
           checked=""
-          class="c2"
+          class="c0"
           id="segmented-button-1"
           name="segmented-control"
           type="radio"
           value="operacional"
         />
         Operacional
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Estagiário"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-2"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-2"
           name="segmented-control"
           type="radio"
           value="estagiário"
         />
         Estagiário
-      </button>
+      </label>
     </div>
   </div>
 </div>
@@ -232,7 +208,7 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
   word-break: break-word;
 }
 
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -243,39 +219,59 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-stroked-primary___YY4WC {
+.ButtonBase-module__button-stroked-primary___uybCe {
   background-color: var(--qtm-colors-neutral-0);
   border: 2px solid var(--qtm-colors-primary-700);
   color: var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
+.SegmentedButton-module__label___sRquy {
+  border: 1px solid;
+  border-radius: 0;
+  border-right: 0;
+  border-color: var(--qtm-colors-primary-700);
+  font-weight: 400;
+  letter-spacing: .2px;
+  padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-xsmall);
+  width: 100%;
+}
+
+.SegmentedButton-module__label-checked___xgs6w {
+  font-weight: 700;
+}
+
+.SegmentedControl-module__wrapper___pHm7V {
+  display: flex;
+  justify-content: space-around;
+}
+
 @media (min-width:0px) {
   .Row-module__row___xiasO {
     margin-bottom: var(--qtm-gutter-xsmall);
@@ -324,7 +320,7 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
   }
 }
 
-.c2 {
+.c0 {
   border: 0;
   height: 0;
   margin: 0;
@@ -335,47 +331,6 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
   width: 0;
 }
 
-.c1 {
-  width: 100%;
-  border-radius: 0px;
-  font-weight: 400;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-}
-
-.c1.input-checked {
-  font-weight: 700;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-}
-
-.c0 button {
-  border: 1px solid;
-  border-right: 0px;
-  border-color: #1250C4;
-  padding: 4px 8px;
-}
-
-.c0 button:first-child {
-  border-radius: 4px 0px 0px 4px;
-}
-
-.c0 button:last-child {
-  border-radius: 0px 4px 4px 0px;
-  border: 1px solid #1250C4;
-}
-
 <div
   class="Row-module__row___xiasO"
 >
@@ -384,17 +339,16 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
     style="--qtm-col-small-size: 6; --qtm-col-medium-size: 5;"
   >
     <div
-      class="c0"
+      class="SegmentedControl-module__wrapper___pHm7V"
     >
-      <button
+      <label
         aria-label="Profissional"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-3"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-3"
           name="segmented-control"
           type="radio"
@@ -414,17 +368,16 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
             d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
           />
         </svg>
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Operacional"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1 input-checked"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy SegmentedButton-module__label-checked___xgs6w"
         for="segmented-button-4"
         tabindex="-1"
-        type="button"
       >
         <input
           checked=""
-          class="c2"
+          class="c0"
           id="segmented-button-4"
           name="segmented-control"
           type="radio"
@@ -444,16 +397,15 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
             d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12m8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8"
           />
         </svg>
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Estagiário"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-5"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-5"
           name="segmented-control"
           type="radio"
@@ -473,16 +425,15 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
             d="M9 11H7v2h2zm4 0h-2v2h2zm4 0h-2v2h2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 16H5V9h14z"
           />
         </svg>
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Maquinário"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-6"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-6"
           name="segmented-control"
           type="radio"
@@ -502,16 +453,15 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
             d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"
           />
         </svg>
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Favorito"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-7"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-7"
           name="segmented-control"
           type="radio"
@@ -531,7 +481,7 @@ exports[`<SegmentedControl /> should match the snapshots 2`] = `
             d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"
           />
         </svg>
-      </button>
+      </label>
     </div>
   </div>
 </div>
@@ -549,7 +499,7 @@ exports[`<SegmentedControl /> should match the snapshots 3`] = `
   word-break: break-word;
 }
 
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -560,39 +510,59 @@ exports[`<SegmentedControl /> should match the snapshots 3`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-stroked-primary___YY4WC {
+.ButtonBase-module__button-stroked-primary___uybCe {
   background-color: var(--qtm-colors-neutral-0);
   border: 2px solid var(--qtm-colors-primary-700);
   color: var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
+.SegmentedButton-module__label___sRquy {
+  border: 1px solid;
+  border-radius: 0;
+  border-right: 0;
+  border-color: var(--qtm-colors-primary-700);
+  font-weight: 400;
+  letter-spacing: .2px;
+  padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-xsmall);
+  width: 100%;
+}
+
+.SegmentedButton-module__label-checked___xgs6w {
+  font-weight: 700;
+}
+
+.SegmentedControl-module__wrapper___pHm7V {
+  display: flex;
+  justify-content: space-around;
+}
+
 @media (min-width:0px) {
   .Row-module__row___xiasO {
     margin-bottom: var(--qtm-gutter-xsmall);
@@ -641,7 +611,7 @@ exports[`<SegmentedControl /> should match the snapshots 3`] = `
   }
 }
 
-.c2 {
+.c0 {
   border: 0;
   height: 0;
   margin: 0;
@@ -652,47 +622,6 @@ exports[`<SegmentedControl /> should match the snapshots 3`] = `
   width: 0;
 }
 
-.c1 {
-  width: 100%;
-  border-radius: 0px;
-  font-weight: 400;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-}
-
-.c1.input-checked {
-  font-weight: 700;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-}
-
-.c0 button {
-  border: 1px solid;
-  border-right: 0px;
-  border-color: #1250C4;
-  padding: 4px 8px;
-}
-
-.c0 button:first-child {
-  border-radius: 4px 0px 0px 4px;
-}
-
-.c0 button:last-child {
-  border-radius: 0px 4px 4px 0px;
-  border: 1px solid #1250C4;
-}
-
 <div
   class="Row-module__row___xiasO"
 >
@@ -701,17 +630,16 @@ exports[`<SegmentedControl /> should match the snapshots 3`] = `
     style="--qtm-col-small-size: 6; --qtm-col-medium-size: 5;"
   >
     <div
-      class="c0"
+      class="SegmentedControl-module__wrapper___pHm7V"
     >
-      <button
+      <label
         aria-label="Profissional"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-8"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-8"
           name="segmented-control"
           type="radio"
@@ -731,17 +659,16 @@ exports[`<SegmentedControl /> should match the snapshots 3`] = `
             d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
           />
         </svg>
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Operacional"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1 input-checked"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy SegmentedButton-module__label-checked___xgs6w"
         for="segmented-button-9"
         tabindex="-1"
-        type="button"
       >
         <input
           checked=""
-          class="c2"
+          class="c0"
           id="segmented-button-9"
           name="segmented-control"
           type="radio"
@@ -761,16 +688,15 @@ exports[`<SegmentedControl /> should match the snapshots 3`] = `
             d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12m8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8"
           />
         </svg>
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Estagiário"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-10"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-10"
           name="segmented-control"
           type="radio"
@@ -790,7 +716,7 @@ exports[`<SegmentedControl /> should match the snapshots 3`] = `
             d="M9 11H7v2h2zm4 0h-2v2h2zm4 0h-2v2h2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 16H5V9h14z"
           />
         </svg>
-      </button>
+      </label>
     </div>
   </div>
 </div>
@@ -808,7 +734,7 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
   word-break: break-word;
 }
 
-.Button-module__button___AbcpN {
+.ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -819,39 +745,59 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-stroked-primary___YY4WC {
+.ButtonBase-module__button-stroked-primary___uybCe {
   background-color: var(--qtm-colors-neutral-0);
   border: 2px solid var(--qtm-colors-primary-700);
   color: var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
   box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
 }
 
+.SegmentedButton-module__label___sRquy {
+  border: 1px solid;
+  border-radius: 0;
+  border-right: 0;
+  border-color: var(--qtm-colors-primary-700);
+  font-weight: 400;
+  letter-spacing: .2px;
+  padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-xsmall);
+  width: 100%;
+}
+
+.SegmentedButton-module__label-checked___xgs6w {
+  font-weight: 700;
+}
+
+.SegmentedControl-module__wrapper___pHm7V {
+  display: flex;
+  justify-content: space-around;
+}
+
 @media (min-width:0px) {
   .Row-module__row___xiasO {
     margin-bottom: var(--qtm-gutter-xsmall);
@@ -900,7 +846,7 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
   }
 }
 
-.c2 {
+.c0 {
   border: 0;
   height: 0;
   margin: 0;
@@ -911,47 +857,6 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
   width: 0;
 }
 
-.c1 {
-  width: 100%;
-  border-radius: 0px;
-  font-weight: 400;
-  -webkit-letter-spacing: 0.2px;
-  -moz-letter-spacing: 0.2px;
-  -ms-letter-spacing: 0.2px;
-  letter-spacing: 0.2px;
-}
-
-.c1.input-checked {
-  font-weight: 700;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: space-around;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: space-around;
-  justify-content: space-around;
-}
-
-.c0 button {
-  border: 1px solid;
-  border-right: 0px;
-  border-color: #1250C4;
-  padding: 4px 8px;
-}
-
-.c0 button:first-child {
-  border-radius: 4px 0px 0px 4px;
-}
-
-.c0 button:last-child {
-  border-radius: 0px 4px 4px 0px;
-  border: 1px solid #1250C4;
-}
-
 <div
   class="Row-module__row___xiasO"
 >
@@ -960,17 +865,16 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
     style="--qtm-col-small-size: 6; --qtm-col-medium-size: 5;"
   >
     <div
-      class="c0"
+      class="SegmentedControl-module__wrapper___pHm7V"
     >
-      <button
+      <label
         aria-label="Profissional"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-11"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-11"
           name="segmented-control"
           type="radio"
@@ -990,17 +894,16 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
             d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
           />
         </svg>
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Operacional"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1 input-checked"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy SegmentedButton-module__label-checked___xgs6w"
         for="segmented-button-12"
         tabindex="-1"
-        type="button"
       >
         <input
           checked=""
-          class="c2"
+          class="c0"
           id="segmented-button-12"
           name="segmented-control"
           type="radio"
@@ -1020,16 +923,15 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
             d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12m8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8"
           />
         </svg>
-      </button>
-      <button
+      </label>
+      <label
         aria-label="Estagiário"
-        class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-primary___YY4WC Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c1"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-13"
         tabindex="0"
-        type="button"
       >
         <input
-          class="c2"
+          class="c0"
           id="segmented-button-13"
           name="segmented-control"
           type="radio"
@@ -1049,7 +951,7 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
             d="M9 11H7v2h2zm4 0h-2v2h2zm4 0h-2v2h2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 16H5V9h14z"
           />
         </svg>
-      </button>
+      </label>
     </div>
   </div>
 </div>
diff --git a/components/SocialButton/__snapshots__/SocialButton.unit.test.jsx.snap b/components/SocialButton/__snapshots__/SocialButton.unit.test.jsx.snap
index 0ad078aec..15942768f 100644
--- a/components/SocialButton/__snapshots__/SocialButton.unit.test.jsx.snap
+++ b/components/SocialButton/__snapshots__/SocialButton.unit.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SocialButton component Should match the snapshot 1`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -13,24 +13,24 @@ exports[`SocialButton component Should match the snapshot 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-stroked-neutral___U5syT {
+.ButtonBase-module__button-stroked-neutral___S8irH {
   background-color: var(--qtm-colors-neutral-0);
   border: 2px solid var(--qtm-colors-neutral-700);
   color: var(--qtm-colors-neutral-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -55,7 +55,7 @@ exports[`SocialButton component Should match the snapshot 1`] = `
 }
 
 <button
-    class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-stroked-neutral___U5syT Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-neutral-900___RMGup Button-module__shadow-4-neutral-700___qtCCL Button-module__shadow-8-neutral-900___ocRS3 c0 c1"
+    class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-neutral___S8irH ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-neutral-900___385cv ButtonBase-module__shadow-4-neutral-700___0bwKP ButtonBase-module__shadow-8-neutral-900___-1Nrz c0 c1"
     type="button"
   >
     <svg
@@ -122,7 +122,7 @@ exports[`SocialButton component Should match the snapshot 1`] = `
 
 exports[`SocialButton component when provider prop is set to facebook 1`] = `
 <DocumentFragment>
-  .Button-module__button___AbcpN {
+  .ButtonBase-module__button___-CVUK {
   align-items: center;
   border-radius: 4px;
   box-sizing: border-box;
@@ -133,27 +133,27 @@ exports[`SocialButton component when provider prop is set to facebook 1`] = `
   transition: all .2s ease-in-out;
 }
 
-.Button-module__button-default___miWV3 {
+.ButtonBase-module__button-default___K4Nmm {
   color: var(--qtm-colors-neutral-0);
 }
 
-.Button-module__button-default-primary___bURr2 {
+.ButtonBase-module__button-default-primary___X9GaT {
   background-color: var(--qtm-colors-primary-700);
   border: 2px solid var(--qtm-colors-primary-700);
 }
 
-.Button-module__button-medium___qo6Ym,
-.Button-module__button-small___HWutw {
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
   padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
 }
 
-.Button-module__button-medium___qo6Ym {
+.ButtonBase-module__button-medium___BtByl {
   font-size: var(--qtm-base-font-size);
   line-height: calc(var(--qtm-base-font-size)*1.5);
   min-height: var(--qtm-spacing-xxlarge);
 }
 
-.Button-module__shadow-2-neutral-500___hxqSk {
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
   --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
   --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
   --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
@@ -180,7 +180,7 @@ exports[`SocialButton component when provider prop is set to facebook 1`] = `
 }
 
 <button
-    class="Button-module__button___AbcpN Button-module__button-medium___qo6Ym Button-module__button-default___miWV3 Button-module__button-default-primary___bURr2 Button-module__shadow-2-neutral-500___hxqSk Button-module__shadow-4-primary-900___HdA30 Button-module__shadow-4-primary-700___Gs4yK Button-module__shadow-8-primary-900___f0GvH c0 c1"
+    class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 c0 c1"
     type="button"
   >
     <svg

From 37f30177edb0b3281dd1605049f380898a2ed5b6 Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Fri, 2 Aug 2024 10:56:41 -0300
Subject: [PATCH 7/9] chore(theme.js): Removed component button styles and
 updated import in components

---
 components/Alert/Alert.jsx                    |  2 --
 components/Modal/Modal.jsx                    |  5 +---
 components/Popover/sub-components/Content.jsx |  1 -
 components/RadioGroup/RadioButton.jsx         |  3 --
 components/SnackBar/SnackBar.jsx              |  1 -
 components/shared/theme.js                    | 28 -------------------
 6 files changed, 1 insertion(+), 39 deletions(-)

diff --git a/components/Alert/Alert.jsx b/components/Alert/Alert.jsx
index 769ea9a62..8d3a28755 100644
--- a/components/Alert/Alert.jsx
+++ b/components/Alert/Alert.jsx
@@ -111,7 +111,6 @@ Alert.defaultProps = {
     breakpoints,
     components: {
       alert: components.alert,
-      button: components.button,
     },
   },
 };
@@ -131,7 +130,6 @@ Alert.propTypes = {
     spacing: PropTypes.object,
     components: PropTypes.shape({
       alert: PropTypes.object,
-      button: PropTypes.object,
     }),
   }),
 };
diff --git a/components/Modal/Modal.jsx b/components/Modal/Modal.jsx
index 113197f45..f35201d96 100644
--- a/components/Modal/Modal.jsx
+++ b/components/Modal/Modal.jsx
@@ -7,16 +7,13 @@ import Card from '../Card';
 import Button from '../Button';
 import { Content, Header, HeaderText, Title, Footer } from './sub-components';
 import regressionTestContainer from '../shared/regressionTestContainer';
-import { colors, spacing, components } from '../shared/theme';
+import { colors, spacing } from '../shared/theme';
 import isSSR from '../shared/isSSR';
 import styles from './Modal.module.css';
 
 const theme = {
   colors,
   spacing,
-  components: {
-    button: components.button,
-  },
 };
 
 class Modal extends Component {
diff --git a/components/Popover/sub-components/Content.jsx b/components/Popover/sub-components/Content.jsx
index 9d352cc21..060ce21cd 100644
--- a/components/Popover/sub-components/Content.jsx
+++ b/components/Popover/sub-components/Content.jsx
@@ -183,7 +183,6 @@ Content.defaultProps = {
     breakpoints,
     components: {
       popover: components.popover,
-      button: components.button,
     },
   },
 };
diff --git a/components/RadioGroup/RadioButton.jsx b/components/RadioGroup/RadioButton.jsx
index d08941c2a..abd061789 100644
--- a/components/RadioGroup/RadioButton.jsx
+++ b/components/RadioGroup/RadioButton.jsx
@@ -150,9 +150,6 @@ Radio.defaultProps = {
     baseFontSize: defaultBaseFontSize,
     spacing,
     colors,
-    components: {
-      button: components.button,
-    },
   },
 };
 
diff --git a/components/SnackBar/SnackBar.jsx b/components/SnackBar/SnackBar.jsx
index 4f5b2b1e2..827904879 100644
--- a/components/SnackBar/SnackBar.jsx
+++ b/components/SnackBar/SnackBar.jsx
@@ -368,7 +368,6 @@ SnackBar.defaultProps = {
     breakpoints,
     components: {
       snackbar: components.snackbar,
-      button: components.button,
     },
   },
 };
diff --git a/components/shared/theme.js b/components/shared/theme.js
index 81c4dae0f..f52d88adf 100644
--- a/components/shared/theme.js
+++ b/components/shared/theme.js
@@ -81,34 +81,6 @@ const spacing = {
 };
 
 const components = {
-  button: {
-    skins: {
-      neutral: {
-        mainColor: colors.neutral,
-        text: colors.neutral,
-      },
-      primary: {
-        mainColor: colors.primary,
-        text: colors.neutral,
-      },
-      secondary: {
-        mainColor: colors.secondary,
-        text: colors.neutral,
-      },
-      success: {
-        mainColor: colors.success,
-        text: colors.neutral,
-      },
-      warning: {
-        mainColor: colors.warning,
-        text: colors.neutral,
-      },
-      error: {
-        mainColor: colors.error,
-        text: colors.neutral,
-      },
-    },
-  },
   tag: {
     skins: {
       neutral: {

From 34e9f6dbc256cf19e006d5e023b905a5cf76600a Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Fri, 2 Aug 2024 10:57:41 -0300
Subject: [PATCH 8/9] chore(RadioButton.jsx): Removed unused imports

---
 components/RadioGroup/RadioButton.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/RadioGroup/RadioButton.jsx b/components/RadioGroup/RadioButton.jsx
index abd061789..12c549326 100644
--- a/components/RadioGroup/RadioButton.jsx
+++ b/components/RadioGroup/RadioButton.jsx
@@ -8,7 +8,6 @@ import { createUniqId } from '../shared/uniqId';
 import {
   colors,
   spacing,
-  components,
   baseFontSize as defaultBaseFontSize,
 } from '../shared/theme';
 

From 649bbbf91425e00b2e3489a9691a200c65fafad2 Mon Sep 17 00:00:00 2001
From: Marcos Conceicao <marcos.conceicao@catho.com>
Date: Fri, 2 Aug 2024 11:08:24 -0300
Subject: [PATCH 9/9] test(SegmentedContro.unit.test.jsx): Correction of the
 component property name to avoid warnings whe

---
 components/SegmentedControl/SegmentedControl.unit.test.jsx  | 2 +-
 .../__snapshots__/SegmentedControl.unit.test.jsx.snap       | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/SegmentedControl/SegmentedControl.unit.test.jsx b/components/SegmentedControl/SegmentedControl.unit.test.jsx
index c957c2e12..465292e7c 100644
--- a/components/SegmentedControl/SegmentedControl.unit.test.jsx
+++ b/components/SegmentedControl/SegmentedControl.unit.test.jsx
@@ -14,7 +14,7 @@ describe('<SegmentedControl />', () => {
       <SegmentedControl items={defaultContent} />,
       <SegmentedControl items={fiveContentsWithIcon} />,
       <SegmentedControl items={threeContentsWithIcon} />,
-      <SegmentedControl items={threeContentsWithIcon} darkmode />,
+      <SegmentedControl items={threeContentsWithIcon} darkMode />,
     ];
 
     SegmentedControls.forEach((segmentedControl) => {
diff --git a/components/SegmentedControl/__snapshots__/SegmentedControl.unit.test.jsx.snap b/components/SegmentedControl/__snapshots__/SegmentedControl.unit.test.jsx.snap
index e2eedcd48..35f77fdb4 100644
--- a/components/SegmentedControl/__snapshots__/SegmentedControl.unit.test.jsx.snap
+++ b/components/SegmentedControl/__snapshots__/SegmentedControl.unit.test.jsx.snap
@@ -869,7 +869,7 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
     >
       <label
         aria-label="Profissional"
-        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-11"
         tabindex="0"
       >
@@ -897,7 +897,7 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
       </label>
       <label
         aria-label="Operacional"
-        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy SegmentedButton-module__label-checked___xgs6w"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy SegmentedButton-module__label-checked___xgs6w"
         for="segmented-button-12"
         tabindex="-1"
       >
@@ -926,7 +926,7 @@ exports[`<SegmentedControl /> should match the snapshots 4`] = `
       </label>
       <label
         aria-label="Estagiário"
-        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-stroked-primary___uybCe ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
+        class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-default___K4Nmm ButtonBase-module__button-default-primary___X9GaT ButtonBase-module__shadow-2-neutral-500___mSG-z ButtonBase-module__shadow-4-primary-900___OVVjG ButtonBase-module__shadow-4-primary-700___OKpXZ ButtonBase-module__shadow-8-primary-900___cXlt5 SegmentedButton-module__label___sRquy"
         for="segmented-button-13"
         tabindex="0"
       >