diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
index 4ded1c54eb2b..b8f797ecd654 100644
--- a/ui/components/component-library/button-base/button-base.js
+++ b/ui/components/component-library/button-base/button-base.js
@@ -26,6 +26,7 @@ export const ButtonBase = ({
   iconPositionRight,
   loading,
   disabled,
+  iconProps,
   ...props
 }) => {
   return (
@@ -48,7 +49,7 @@ export const ButtonBase = ({
     >
       <Text
         as="span"
-        className="mm-button--content"
+        className="mm-button__content"
         alignItems={ALIGN_ITEMS.CENTER}
         justifyContent={JUSTIFY_CONTENT.CENTER}
         flexDirection={
@@ -62,13 +63,14 @@ export const ButtonBase = ({
           <Icon
             name={icon}
             size={size === BUTTON_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
+            {...iconProps}
           />
         )}
         {children}
       </Text>
       {loading && (
         <Icon
-          className="mm-icon--loading"
+          className="mm-button__icon-loading"
           name={ICON_NAMES.LOADING_FILLED}
           size={size === BUTTON_SIZES.AUTO ? SIZES.AUTO : SIZES.MD}
         />
diff --git a/ui/components/component-library/button-base/button-base.scss b/ui/components/component-library/button-base/button-base.scss
index 802b54ea74d0..4c35ddbfbed0 100644
--- a/ui/components/component-library/button-base/button-base.scss
+++ b/ui/components/component-library/button-base/button-base.scss
@@ -19,7 +19,7 @@
     width: 100%;
   }
 
-  &--content {
+  &__content {
     height: 100%;
   }
 
@@ -61,19 +61,18 @@
     opacity: 0.3;
     cursor: not-allowed;
   }
-}
-
-
 
-.mm-icon--loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: spinner 1.2s linear infinite;
+  &__icon-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: spinner 1.2s linear infinite;
+  }
 }
 
 
+
 @keyframes spinner {
   to { transform: translate(-50%, -50%) rotate(360deg); }
 }
diff --git a/ui/components/component-library/button-base/button-base.test.js b/ui/components/component-library/button-base/button-base.test.js
index f0a556853f41..782e12b0efce 100644
--- a/ui/components/component-library/button-base/button-base.test.js
+++ b/ui/components/component-library/button-base/button-base.test.js
@@ -6,10 +6,10 @@ import { ButtonBase } from './button-base';
 
 describe('ButtonBase', () => {
   it('should render button element correctly', () => {
-    const { getByTestId, container } = render(
-      <ButtonBase data-testid="button-base" />,
+    const { getByTestId, getByText, container } = render(
+      <ButtonBase data-testid="button-base">Button base</ButtonBase>,
     );
-    expect(getByTestId('button-base')).toBeDefined();
+    expect(getByText('Button base')).toBeDefined();
     expect(container.querySelector('button')).toBeDefined();
     expect(getByTestId('button-base')).toHaveClass('mm-button');
   });
@@ -19,7 +19,7 @@ describe('ButtonBase', () => {
       <ButtonBase as="a" data-testid="button-base" />,
     );
     expect(getByTestId('button-base')).toBeDefined();
-    expect(container.querySelector('button')).toBeDefined();
+    expect(container.querySelector('a')).toBeDefined();
     expect(getByTestId('button-base')).toHaveClass('mm-button');
   });
 
@@ -62,11 +62,14 @@ describe('ButtonBase', () => {
     expect(getByTestId('disabled')).toHaveClass(`mm-button--disabled`);
   });
   it('should render with icon', () => {
-    const { container } = render(
-      <ButtonBase data-testid="icon" icon="add-square-filled" />,
+    const { getByTestId } = render(
+      <ButtonBase
+        data-testid="icon"
+        icon="add-square-filled"
+        iconProps={{ 'data-testid': 'base-button-icon' }}
+      />,
     );
 
-    const icons = container.getElementsByClassName('icon').length;
-    expect(icons).toBe(1);
+    expect(getByTestId('base-button-icon')).toBeDefined();
   });
 });
diff --git a/ui/components/component-library/text/README.mdx b/ui/components/component-library/text/README.mdx
index 197cebb2ba24..f98b529e8252 100644
--- a/ui/components/component-library/text/README.mdx
+++ b/ui/components/component-library/text/README.mdx
@@ -35,6 +35,7 @@ import { TEXT } from '../../../helpers/constants/design-system';
 <Text variant={TEXT.BODY_MD}>body-md</Text>
 <Text variant={TEXT.BODY_SM}>body-sm</Text>
 <Text variant={TEXT.BODY_XS}>body-xs</Text>
+<Text variant={TEXT.INHERIT}>inherit</Text>
 ```
 
 ### Color