diff --git a/ui/components/component-library/banner-base/README.mdx b/ui/components/component-library/banner-base/README.mdx
index 5fbb23f49..7681b2273 100644
--- a/ui/components/component-library/banner-base/README.mdx
+++ b/ui/components/component-library/banner-base/README.mdx
@@ -68,7 +68,7 @@ import { BannerBase, ICON_NAMES } from '../../component-library';
   title="Action prop demo"
   actionButtonLabel="Action"
   actionButtonProps={{
-    icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
+    iconName: ICON_NAMES.ARROW_2_RIGHT,
     iconPositionRight: true,
   }}
   actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
diff --git a/ui/components/component-library/banner-base/banner-base.js b/ui/components/component-library/banner-base/banner-base.js
index 14a9e76b3..be4c01f95 100644
--- a/ui/components/component-library/banner-base/banner-base.js
+++ b/ui/components/component-library/banner-base/banner-base.js
@@ -57,8 +57,7 @@ export const BannerBase = ({
         )}
         {actionButtonLabel && (
           <ButtonLink
-            // noPadding TODO: Use noPadding option when released
-            size={SIZES.AUTO} // TODO: Remove when noPadding is added
+            size={SIZES.AUTO}
             onClick={actionButtonOnClick}
             {...actionButtonProps}
           >
diff --git a/ui/components/component-library/banner-base/banner-base.stories.js b/ui/components/component-library/banner-base/banner-base.stories.js
index 5efe86798..0ff626855 100644
--- a/ui/components/component-library/banner-base/banner-base.stories.js
+++ b/ui/components/component-library/banner-base/banner-base.stories.js
@@ -126,7 +126,7 @@ ActionButton.args = {
   actionButtonLabel: 'Action',
   actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
   actionButtonProps: {
-    icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
+    iconName: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
     iconPositionRight: true,
   },
   children:
diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx
index 2cc551e53..25ba299cf 100644
--- a/ui/components/component-library/button-base/README.mdx
+++ b/ui/components/component-library/button-base/README.mdx
@@ -26,7 +26,6 @@ Optional: `BUTTON_BASE_SIZES` from `./button-base` object can be used instead of
 
 Possible sizes include:
 
-- `SIZES.AUTO` inherits the font-size of the parent element.
 - `SIZES.SM` 32px
 - `SIZES.MD` 40px
 - `SIZES.LG` 48px
@@ -39,7 +38,6 @@ Possible sizes include:
 import { SIZES } from '../../../helpers/constants/design-system';
 import { ButtonBase } from '../../component-library';
 
-<ButtonBase size={SIZES.AUTO} />
 <ButtonBase size={SIZES.SM} />
 <ButtonBase size={SIZES.MD} />
 <ButtonBase size={SIZES.LG} />
diff --git a/ui/components/component-library/button-base/button-base.constants.js b/ui/components/component-library/button-base/button-base.constants.js
index a5c102366..9b70479c6 100644
--- a/ui/components/component-library/button-base/button-base.constants.js
+++ b/ui/components/component-library/button-base/button-base.constants.js
@@ -4,5 +4,4 @@ export const BUTTON_BASE_SIZES = {
   SM: SIZES.SM,
   MD: SIZES.MD,
   LG: SIZES.LG,
-  AUTO: SIZES.AUTO,
 };
diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
index 0c554a991..acaf35777 100644
--- a/ui/components/component-library/button-base/button-base.js
+++ b/ui/components/component-library/button-base/button-base.js
@@ -31,7 +31,8 @@ export const ButtonBase = ({
   loading,
   disabled,
   iconProps,
-  buttonTextProps,
+  iconLoadingProps,
+  textProps,
   ...props
 }) => {
   const Tag = href ? 'a' : as;
@@ -41,13 +42,13 @@ export const ButtonBase = ({
       backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
       color={COLORS.TEXT_DEFAULT}
       href={href}
-      paddingLeft={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
-      paddingRight={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
-      borderRadius={BORDER_RADIUS.PILL}
+      paddingLeft={4}
+      paddingRight={4}
       className={classnames(
         'mm-button-base',
-        `mm-button-base--size-${size}`,
         {
+          [`mm-button-base--size-${size}`]:
+            Object.values(BUTTON_BASE_SIZES).includes(size),
           'mm-button-base--loading': loading,
           'mm-button-base--disabled': disabled,
           'mm-button-base--block': block,
@@ -58,6 +59,7 @@ export const ButtonBase = ({
       display={DISPLAY.INLINE_FLEX}
       justifyContent={JUSTIFY_CONTENT.CENTER}
       alignItems={ALIGN_ITEMS.CENTER}
+      borderRadius={BORDER_RADIUS.PILL}
       {...props}
     >
       <Text
@@ -69,24 +71,19 @@ export const ButtonBase = ({
           iconPositionRight ? FLEX_DIRECTION.ROW_REVERSE : FLEX_DIRECTION.ROW
         }
         gap={2}
-        variant={size === BUTTON_BASE_SIZES.AUTO ? TEXT.INHERIT : TEXT.BODY_MD}
+        variant={TEXT.BODY_MD}
         color={TEXT_COLORS.INHERIT}
-        {...buttonTextProps}
+        {...textProps}
       >
-        {iconName && (
-          <Icon
-            name={iconName}
-            size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
-            {...iconProps}
-          />
-        )}
+        {iconName && <Icon name={iconName} size={SIZES.SM} {...iconProps} />}
         {children}
       </Text>
       {loading && (
         <Icon
-          className="mm-button__icon-loading"
+          className="mm-button-base__icon-loading"
           name={ICON_NAMES.LOADING}
-          size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.MD}
+          size={SIZES.MD}
+          {...iconLoadingProps}
         />
       )}
     </Box>
@@ -135,16 +132,27 @@ ButtonBase.propTypes = {
   /**
    * iconProps accepts all the props from Icon
    */
-  iconProps: PropTypes.object,
+  iconProps: PropTypes.shape(Icon.PropTypes),
+  /**
+   * iconLoadingProps accepts all the props from Icon
+   */
+  iconLoadingProps: PropTypes.shape(Icon.PropTypes),
   /**
    * Boolean to show loading spinner in button
    */
   loading: PropTypes.bool,
   /**
    * The size of the ButtonBase.
-   * Possible values could be 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
+   * Possible values could be 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
    */
-  size: PropTypes.oneOf(Object.values(BUTTON_BASE_SIZES)),
+  size: PropTypes.oneOfType([
+    PropTypes.shape(BUTTON_BASE_SIZES),
+    PropTypes.string,
+  ]),
+  /**
+   * textProps accepts all the props from Icon
+   */
+  textProps: PropTypes.shape(Text.PropTypes),
   /**
    * ButtonBase accepts all the props from Box
    */
diff --git a/ui/components/component-library/button-base/button-base.scss b/ui/components/component-library/button-base/button-base.scss
index e7798075e..42e6d24a9 100644
--- a/ui/components/component-library/button-base/button-base.scss
+++ b/ui/components/component-library/button-base/button-base.scss
@@ -32,18 +32,6 @@
     height: 48px;
   }
 
-  &--size-auto {
-    height: auto;
-    background-color: transparent;
-    border-radius: 0;
-    vertical-align: top;
-    font-family: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-  }
-
   &--loading {
     cursor: not-allowed;
   }
diff --git a/ui/components/component-library/button-base/button-base.stories.js b/ui/components/component-library/button-base/button-base.stories.js
index 38b7c3c6f..7f61e99fc 100644
--- a/ui/components/component-library/button-base/button-base.stories.js
+++ b/ui/components/component-library/button-base/button-base.stories.js
@@ -4,11 +4,9 @@ import {
   DISPLAY,
   FLEX_DIRECTION,
   SIZES,
-  TEXT,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
 import { ICON_NAMES } from '../icon';
-import { Text } from '../text';
 import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 import README from './README.mdx';
@@ -57,7 +55,7 @@ export default {
     disabled: {
       control: 'boolean',
     },
-    icon: {
+    iconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
     },
@@ -116,12 +114,6 @@ export const Size = (args) => (
         Button LG
       </ButtonBase>
     </Box>
-    <Text variant={TEXT.BODY_SM}>
-      <ButtonBase {...args} size={SIZES.AUTO}>
-        Button Auto
-      </ButtonBase>{' '}
-      inherits the font-size of the parent element.
-    </Text>
   </>
 );
 
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 99ca354f9..965e07ec7 100644
--- a/ui/components/component-library/button-base/button-base.test.js
+++ b/ui/components/component-library/button-base/button-base.test.js
@@ -47,10 +47,6 @@ describe('ButtonBase', () => {
   it('should render with different size classes', () => {
     const { getByTestId } = render(
       <>
-        <ButtonBase
-          size={BUTTON_BASE_SIZES.AUTO}
-          data-testid={BUTTON_BASE_SIZES.AUTO}
-        />
         <ButtonBase
           size={BUTTON_BASE_SIZES.SM}
           data-testid={BUTTON_BASE_SIZES.SM}
@@ -65,9 +61,6 @@ describe('ButtonBase', () => {
         />
       </>,
     );
-    expect(getByTestId(BUTTON_BASE_SIZES.AUTO)).toHaveClass(
-      `mm-button-base--size-${BUTTON_BASE_SIZES.AUTO}`,
-    );
     expect(getByTestId(BUTTON_BASE_SIZES.SM)).toHaveClass(
       `mm-button-base--size-${BUTTON_BASE_SIZES.SM}`,
     );
diff --git a/ui/components/component-library/button-link/README.mdx b/ui/components/component-library/button-link/README.mdx
index 75086eff9..da44afaca 100644
--- a/ui/components/component-library/button-link/README.mdx
+++ b/ui/components/component-library/button-link/README.mdx
@@ -1,10 +1,11 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import { ButtonLink } from './button-link';
+import { ButtonBase } from '../button-base';
 
 # ButtonLink
 
-The `ButtonLink` is an extension of `ButtonBase` to support link styles.
+The `ButtonLink` is an extension of `ButtonBase` to support link styles
 
 <Canvas>
   <Story id="components-componentlibrary-buttonlink--default-story" />
@@ -16,18 +17,23 @@ The `ButtonLink` accepts all props below as well as all [Box](/docs/components-u
 
 <ArgsTable of={ButtonLink} />
 
+The `ButtonLink` accepts all [ButtonBase](/docs/components-componentlibrary-buttonbase--default-story#props) component props
+
+<ArgsTable of={ButtonBase} />
+
 ### Size
 
-Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `SIZES.MD`
+Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `ButtonLink`. Defaults to `SIZES.AUTO`.
 
-Optional: `BUTTON_SIZES` from `./button-base` object can be used instead of `SIZES`.
+Optional: `BUTTON_LINK_SIZES` from `../../component-library` object can be used instead of `SIZES`
 
 Possible sizes include:
 
-- `SIZES.AUTO` inherits the font-size of the parent element.
+- `SIZES.AUTO` sets the height to auto but retains `ButtonLink` font-size
 - `SIZES.SM` 32px
 - `SIZES.MD` 40px
 - `SIZES.LG` 48px
+- `SIZES.INHERIT` inherits the font-size of the parent element. Used for inline links in paragraphs.
 
 <Canvas>
   <Story id="components-componentlibrary-buttonlink--size" />
@@ -35,12 +41,33 @@ Possible sizes include:
 
 ```jsx
 import { SIZES } from '../../../helpers/constants/design-system';
-import { ButtonLink } from '../../component-library';
+import { ButtonLink, Text, TEXT } from '../../component-library';
 
-<ButtonLink size={SIZES.AUTO} />
-<ButtonLink size={SIZES.SM} />
-<ButtonLink size={SIZES.MD} />
-<ButtonLink size={SIZES.LG} />
+<ButtonLink size={SIZES.AUTO}>
+  Auto (default)
+</ButtonLink>
+<ButtonLink size={SIZES.SM}>
+  Small
+</ButtonLink>
+<ButtonLink size={SIZES.MD}>
+  Medium
+</ButtonLink>
+<ButtonLink size={SIZES.LG}>
+  Large
+</ButtonLink>
+
+<Text variant={TEXT.BODY_LG_MEDIUM}>
+  Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
+</Text>
+<Text variant={TEXT.BODY_MD}>
+  Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
+</Text>
+<Text variant={TEXT.BODY_SM}>
+  Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
+</Text>
+<Text variant={TEXT.BODY_XS}>
+  Inherits the font-size of the parent element. <ButtonLink size={SIZES.INHERIT}>Learn more</ButtonLink>
+</Text>
 ```
 
 ### Danger
@@ -69,5 +96,33 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
 ```jsx
 import { ButtonLink } from '../../component-library';
 
-<ButtonLink href="/">Anchor Element</ButtonLink>;
+<ButtonLink href="/">Href example</ButtonLink>;
+```
+
+### Hit area
+
+The default hit area for `ButtonLink` is the width of the text and height based on the `size` prop which is set to `SIZES.AUTO` by default. There may be times when you want to increase the hit area of the `ButtonLink`. To do this you can use the `Box` props `paddingLeft` and `paddingRight`. Or alternatively you can use the `block` prop which sets the width to 100%.
+
+<Canvas>
+  <Story id="components-componentlibrary-buttonlink--hit-area" />
+</Canvas>
+
+```jsx
+import { ButtonLink } from '../../component-library';
+
+<ButtonLink paddingLeft={4} paddingRight={4}>
+  Auto (default)
+</ButtonLink>
+<ButtonLink size={SIZES.SM} paddingLeft={4} paddingRight={4}>
+  Small
+</ButtonLink>
+<ButtonLink size={SIZES.MD} paddingLeft={4} paddingRight={4}>
+  Medium
+</ButtonLink>
+<ButtonLink size={SIZES.LG} paddingLeft={4} paddingRight={4}>
+  Large
+</ButtonLink>
+<ButtonLink size={SIZES.LG} block>
+  Large block
+</ButtonLink>
 ```
diff --git a/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap b/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
index 0ff4b9a74..f62717f6c 100644
--- a/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
+++ b/ui/components/component-library/button-link/__snapshots__/button-link.test.js.snap
@@ -3,7 +3,7 @@
 exports[`ButtonLink should render button element correctly 1`] = `
 <div>
   <button
-    class="box mm-button-base mm-button-base--size-md mm-button-link box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill"
+    class="box mm-button-base mm-button-link mm-button-link--size-auto box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
     data-testid="button-link"
   >
     <span
diff --git a/ui/components/component-library/button-link/button-link.constants.js b/ui/components/component-library/button-link/button-link.constants.js
index 8133abf50..996686a73 100644
--- a/ui/components/component-library/button-link/button-link.constants.js
+++ b/ui/components/component-library/button-link/button-link.constants.js
@@ -5,4 +5,5 @@ export const BUTTON_LINK_SIZES = {
   MD: SIZES.MD,
   LG: SIZES.LG,
   AUTO: SIZES.AUTO,
+  INHERIT: SIZES.INHERIT,
 };
diff --git a/ui/components/component-library/button-link/button-link.js b/ui/components/component-library/button-link/button-link.js
index cde511ba0..5fc99ec71 100644
--- a/ui/components/component-library/button-link/button-link.js
+++ b/ui/components/component-library/button-link/button-link.js
@@ -3,26 +3,39 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import { ButtonBase } from '../button-base';
-import { COLORS } from '../../../helpers/constants/design-system';
+import { COLORS, TEXT, SIZES } from '../../../helpers/constants/design-system';
 import { BUTTON_LINK_SIZES } from './button-link.constants';
 
 export const ButtonLink = ({
   className,
   danger,
-  disabled,
-  size = BUTTON_LINK_SIZES.MD,
+  size = SIZES.AUTO,
   ...props
 }) => {
   return (
     <ButtonBase
       className={classnames(className, 'mm-button-link', {
         'mm-button-link--type-danger': danger,
-        'mm-button-link--disabled': disabled,
+        'mm-button-link--size-inherit': size === BUTTON_LINK_SIZES.INHERIT,
+        'mm-button-link--size-auto': size === BUTTON_LINK_SIZES.AUTO,
       })}
-      size={size}
-      color={danger ? COLORS.ERROR_DEFAULT : COLORS.PRIMARY_DEFAULT}
+      paddingLeft={0}
+      paddingRight={0}
+      size={size === BUTTON_LINK_SIZES.INHERIT ? null : size}
       backgroundColor={COLORS.TRANSPARENT}
-      {...{ disabled, ...props }}
+      color={danger ? COLORS.ERROR_DEFAULT : COLORS.PRIMARY_DEFAULT}
+      borderRadius={null}
+      {...props}
+      textProps={{
+        variant:
+          size === BUTTON_LINK_SIZES.INHERIT ? TEXT.INHERIT : TEXT.BODY_MD,
+      }}
+      iconProps={{
+        size: size === BUTTON_LINK_SIZES.INHERIT ? SIZES.INHERIT : SIZES.SM,
+      }}
+      iconLoadingProps={{
+        size: size === BUTTON_LINK_SIZES.INHERIT ? SIZES.INHERIT : SIZES.MD,
+      }}
     />
   );
 };
@@ -37,12 +50,8 @@ ButtonLink.propTypes = {
    */
   danger: PropTypes.bool,
   /**
-   * Boolean to disable button
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Possible size values: 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px).
-   * Default value is 'SIZES.MD'.
+   * Possible size values: 'SIZES.AUTO'(auto), 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px), 'SIZES.INHERIT'(inherits parents font-size)
+   * Default value is 'SIZES.AUTO'.
    */
   size: PropTypes.oneOf(Object.values(BUTTON_LINK_SIZES)),
   /**
diff --git a/ui/components/component-library/button-link/button-link.scss b/ui/components/component-library/button-link/button-link.scss
index 505218d29..5c8a4c10b 100644
--- a/ui/components/component-library/button-link/button-link.scss
+++ b/ui/components/component-library/button-link/button-link.scss
@@ -35,4 +35,19 @@
   &--type-danger#{&}--disabled:hover {
     opacity: 0.3;
   }
+
+  &--size-auto {
+    height: auto;
+  }
+
+  &--size-inherit {
+    height: auto;
+    background-color: transparent;
+    vertical-align: top;
+    font-family: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+  }
 }
diff --git a/ui/components/component-library/button-link/button-link.stories.js b/ui/components/component-library/button-link/button-link.stories.js
index 92becc6ad..03d951395 100644
--- a/ui/components/component-library/button-link/button-link.stories.js
+++ b/ui/components/component-library/button-link/button-link.stories.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import {
   ALIGN_ITEMS,
+  BORDER_STYLE,
+  COLORS,
   DISPLAY,
   SIZES,
   TEXT,
@@ -65,7 +67,7 @@ export default {
     href: {
       control: 'text',
     },
-    icon: {
+    iconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
       table: { category: 'button base props' },
@@ -118,28 +120,49 @@ DefaultStory.storyName = 'Default';
 
 export const Size = (args) => (
   <>
-    <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
+    <Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.FLEX_START} gap={4}>
+      <ButtonLink {...args} size={SIZES.AUTO}>
+        Auto (default)
+      </ButtonLink>
       <ButtonLink {...args} size={SIZES.SM}>
-        Small Button
+        Small
       </ButtonLink>
       <ButtonLink {...args} size={SIZES.MD}>
-        Medium (Default) Button
+        Medium
       </ButtonLink>
       <ButtonLink {...args} size={SIZES.LG}>
-        Large Button
+        Large
       </ButtonLink>
     </Box>
+    <Text variant={TEXT.BODY_LG_MEDIUM}>
+      Inherits the font-size of the parent element.{' '}
+      <ButtonLink {...args} size={SIZES.INHERIT}>
+        Learn more
+      </ButtonLink>
+    </Text>
     <Text variant={TEXT.BODY_MD}>
-      <ButtonLink {...args} size={SIZES.AUTO}>
-        Button Auto
-      </ButtonLink>{' '}
-      inherits the font-size of the parent element.
+      Inherits the font-size of the parent element.{' '}
+      <ButtonLink {...args} size={SIZES.INHERIT}>
+        Learn more
+      </ButtonLink>
+    </Text>
+    <Text variant={TEXT.BODY_SM}>
+      Inherits the font-size of the parent element.{' '}
+      <ButtonLink {...args} size={SIZES.INHERIT}>
+        Learn more
+      </ButtonLink>
+    </Text>
+    <Text variant={TEXT.BODY_XS}>
+      Inherits the font-size of the parent element.{' '}
+      <ButtonLink {...args} size={SIZES.INHERIT}>
+        Learn more
+      </ButtonLink>
     </Text>
   </>
 );
 
 export const Danger = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  <Box display={DISPLAY.FLEX} gap={4}>
     <ButtonLink {...args}>Normal</ButtonLink>
     {/* Test Anchor tag to match exactly as button */}
     <ButtonLink as="a" {...args} href="#" danger>
@@ -148,8 +171,62 @@ export const Danger = (args) => (
   </Box>
 );
 
-export const Href = (args) => <ButtonLink {...args}>Anchor Element</ButtonLink>;
+export const Href = (args) => <ButtonLink {...args}>Href example</ButtonLink>;
 
 Href.args = {
   href: '/metamask',
 };
+
+export const HitArea = (args) => (
+  <>
+    <Text marginBottom={4}>Default</Text>
+    <Box
+      display={DISPLAY.FLEX}
+      alignItems={ALIGN_ITEMS.FLEX_START}
+      gap={4}
+      marginBottom={4}
+    >
+      <ButtonLink {...args} size={SIZES.AUTO}>
+        Auto (default)
+      </ButtonLink>
+      <ButtonLink {...args} size={SIZES.SM}>
+        Small
+      </ButtonLink>
+      <ButtonLink {...args} size={SIZES.MD}>
+        Medium
+      </ButtonLink>
+      <ButtonLink {...args} size={SIZES.LG}>
+        Large
+      </ButtonLink>
+    </Box>
+    <Text marginBottom={4}>Add paddingLeft and paddingRight props</Text>
+    <Box
+      display={DISPLAY.FLEX}
+      alignItems={ALIGN_ITEMS.FLEX_START}
+      gap={4}
+      marginBottom={4}
+    >
+      <ButtonLink {...args} paddingLeft={4} paddingRight={4} size={SIZES.AUTO}>
+        Auto (default)
+      </ButtonLink>
+      <ButtonLink {...args} paddingLeft={4} paddingRight={4} size={SIZES.SM}>
+        Small
+      </ButtonLink>
+      <ButtonLink {...args} paddingLeft={4} paddingRight={4} size={SIZES.MD}>
+        Medium
+      </ButtonLink>
+      <ButtonLink {...args} paddingLeft={4} paddingRight={4} size={SIZES.LG}>
+        Large
+      </ButtonLink>
+    </Box>
+    <Text marginBottom={4}>Add block prop</Text>
+    <ButtonLink {...args} size={SIZES.LG} block>
+      Large block
+    </ButtonLink>
+  </>
+);
+
+HitArea.args = {
+  borderColor: COLORS.ERROR_DEFAULT,
+  borderStyle: BORDER_STYLE.DASHED,
+};
diff --git a/ui/components/component-library/button-link/button-link.test.js b/ui/components/component-library/button-link/button-link.test.js
index 2c1b31c5d..fd395e7c9 100644
--- a/ui/components/component-library/button-link/button-link.test.js
+++ b/ui/components/component-library/button-link/button-link.test.js
@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import { SIZES } from '../../../helpers/constants/design-system';
 import { ButtonLink } from './button-link';
+import { BUTTON_LINK_SIZES } from './button-link.constants';
 
 describe('ButtonLink', () => {
   it('should render button element correctly', () => {
@@ -42,7 +43,6 @@ describe('ButtonLink', () => {
         <ButtonLink size={SIZES.SM} data-testid={SIZES.SM} />
         <ButtonLink size={SIZES.MD} data-testid={SIZES.MD} />
         <ButtonLink size={SIZES.LG} data-testid={SIZES.LG} />
-        <ButtonLink size={SIZES.AUTO} data-testid={SIZES.AUTO} />
       </>,
     );
 
@@ -55,9 +55,14 @@ describe('ButtonLink', () => {
     expect(getByTestId(SIZES.LG)).toHaveClass(
       `mm-button-base--size-${SIZES.LG}`,
     );
-    expect(getByTestId(SIZES.AUTO)).toHaveClass(
-      `mm-button-base--size-${SIZES.AUTO}`,
+  });
+
+  it('should render ButtonLink inherit size', () => {
+    const { getByTestId } = render(
+      <ButtonLink size={BUTTON_LINK_SIZES.INHERIT} data-testid="inherit" />,
     );
+    // Different size classname compared to SIZES.SM, SIZES.MD, SIZES.LG
+    expect(getByTestId('inherit')).toHaveClass(`mm-button-link--size-inherit`);
   });
 
   it('should render as danger', () => {
diff --git a/ui/components/component-library/button-primary/button-primary.stories.js b/ui/components/component-library/button-primary/button-primary.stories.js
index 64050b61a..7b4d651d3 100644
--- a/ui/components/component-library/button-primary/button-primary.stories.js
+++ b/ui/components/component-library/button-primary/button-primary.stories.js
@@ -60,7 +60,7 @@ export default {
       control: 'boolean',
       table: { category: 'button base props' },
     },
-    icon: {
+    iconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
       table: { category: 'button base props' },
diff --git a/ui/components/component-library/button-secondary/button-secondary.stories.js b/ui/components/component-library/button-secondary/button-secondary.stories.js
index 8fccb5573..35e9624be 100644
--- a/ui/components/component-library/button-secondary/button-secondary.stories.js
+++ b/ui/components/component-library/button-secondary/button-secondary.stories.js
@@ -60,7 +60,7 @@ export default {
       control: 'boolean',
       table: { category: 'button base props' },
     },
-    icon: {
+    iconName: {
       control: 'select',
       options: Object.values(ICON_NAMES),
       table: { category: 'button base props' },
diff --git a/ui/components/component-library/button/README.mdx b/ui/components/component-library/button/README.mdx
index b27f545ff..d648fc811 100644
--- a/ui/components/component-library/button/README.mdx
+++ b/ui/components/component-library/button/README.mdx
@@ -55,7 +55,8 @@ Optional: `BUTTON_SIZES` from `./button` object can be used instead of `SIZES`.
 
 Possible sizes include:
 
-- `SIZES.AUTO` inherits the font-size of the parent element. (Only used for `ButtonLink`)
+- `SIZES.INHERIT` inherits the font-size of the parent element. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
+- `SIZES.AUTO` inherits auto height, but keeps the same button font-size. For [ButtonLink](/docs/components-componentlibrary-buttonlink--default-story) uses only
 - `SIZES.SM` 32px
 - `SIZES.MD` 40px
 - `SIZES.LG` 48px
@@ -68,7 +69,7 @@ Possible sizes include:
 import { SIZES } from '../../../helpers/constants/design-system';
 import { Button } from '../ui/component-library';
 
-<Button size={SIZES.AUTO} />
+<Button size={SIZES.INHERIT} />
 <Button size={SIZES.SM} />
 <Button size={SIZES.MD} />
 <Button size={SIZES.LG} />
diff --git a/ui/components/component-library/button/__snapshots__/button.test.js.snap b/ui/components/component-library/button/__snapshots__/button.test.js.snap
index c147799f7..a0685c51a 100644
--- a/ui/components/component-library/button/__snapshots__/button.test.js.snap
+++ b/ui/components/component-library/button/__snapshots__/button.test.js.snap
@@ -38,7 +38,7 @@ exports[`Button should render with different button types 1`] = `
     </span>
   </button>
   <button
-    class="box mm-button-base mm-button-base--size-md mm-button-link box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill"
+    class="box mm-button-base mm-button-link mm-button-link--size-auto box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
     data-testid="link"
   >
     <span
diff --git a/ui/components/component-library/button/button.constants.js b/ui/components/component-library/button/button.constants.js
index 803673f31..d589835e4 100644
--- a/ui/components/component-library/button/button.constants.js
+++ b/ui/components/component-library/button/button.constants.js
@@ -4,6 +4,7 @@ export const BUTTON_SIZES = {
   SM: SIZES.SM,
   MD: SIZES.MD,
   LG: SIZES.LG,
+  INHERIT: SIZES.INHERIT,
   AUTO: SIZES.AUTO,
 };
 
diff --git a/ui/components/component-library/button/button.stories.js b/ui/components/component-library/button/button.stories.js
index b385c603a..1a46440a9 100644
--- a/ui/components/component-library/button/button.stories.js
+++ b/ui/components/component-library/button/button.stories.js
@@ -146,12 +146,15 @@ export const Size = (args) => (
       <Button {...args} size={SIZES.LG}>
         Large Button
       </Button>
+      <Button {...args} type={BUTTON_TYPES.LINK}>
+        Auto ButtonLink
+      </Button>
     </Box>
     <Text variant={TEXT.BODY_SM}>
-      <Button {...args} type={BUTTON_TYPES.LINK} size={SIZES.AUTO}>
-        Button Auto
+      <Button {...args} type={BUTTON_TYPES.LINK} size={SIZES.INHERIT}>
+        Button Inherit
       </Button>{' '}
-      inherits the font-size of the parent element. Auto size only used for
+      inherits the font-size of the parent element. Inherit size only used for
       ButtonLink.
     </Text>
   </>
diff --git a/ui/components/component-library/button/button.test.js b/ui/components/component-library/button/button.test.js
index 9cf7460d6..7241fecd8 100644
--- a/ui/components/component-library/button/button.test.js
+++ b/ui/components/component-library/button/button.test.js
@@ -75,11 +75,11 @@ describe('Button', () => {
     const { getByTestId } = render(
       <>
         <Button
-          size={BUTTON_SIZES.AUTO}
+          size={BUTTON_SIZES.INHERIT}
           type={BUTTON_TYPES.LINK}
-          data-testid={BUTTON_SIZES.AUTO}
+          data-testid={BUTTON_SIZES.INHERIT}
         >
-          Button {BUTTON_SIZES.AUTO}
+          Button {BUTTON_SIZES.INHERIT}
         </Button>
         <Button size={BUTTON_SIZES.SM} data-testid={BUTTON_SIZES.SM}>
           Button {BUTTON_SIZES.SM}
@@ -92,8 +92,8 @@ describe('Button', () => {
         </Button>
       </>,
     );
-    expect(getByTestId(BUTTON_SIZES.AUTO)).toHaveClass(
-      `mm-button-base--size-${BUTTON_SIZES.AUTO}`,
+    expect(getByTestId(BUTTON_SIZES.INHERIT)).toHaveClass(
+      `mm-button-link--size-${BUTTON_SIZES.INHERIT}`,
     );
     expect(getByTestId(BUTTON_SIZES.SM)).toHaveClass(
       `mm-button-base--size-${BUTTON_SIZES.SM}`,
diff --git a/ui/components/component-library/form-text-field/README.mdx b/ui/components/component-library/form-text-field/README.mdx
index 6a01a0279..ea2b16a10 100644
--- a/ui/components/component-library/form-text-field/README.mdx
+++ b/ui/components/component-library/form-text-field/README.mdx
@@ -296,12 +296,12 @@ import {
       color={COLORS.ICON_ALTERNATIVE}
     />
   </Box>
-  <ButtonLink size={SIZES.AUTO}>Use default</ButtonLink>
+  <ButtonLink>Use default</ButtonLink>
 </Box>
 <FormTextField
   id="custom-spending-cap"
   placeholder="Enter a number"
-  rightAccessory={<ButtonLink size={SIZES.AUTO}>Max</ButtonLink>}
+  rightAccessory={<ButtonLink>Max</ButtonLink>}
   marginBottom={4}
   type={TEXT_FIELD_TYPES.NUMBER}
 />
@@ -314,6 +314,7 @@ import {
   display={DISPLAY.FLEX}
   alignItems={ALIGN_ITEMS.FLEX_START}
   justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
+  marginTop={1}
 >
   {/**
     * If you need a custom help text
@@ -321,11 +322,11 @@ import {
     * import the HelpText component separately and handle the error
     * logic yourself
     */}
-  <HelpText htmlFor="chainId" required paddingRight={2} marginTop={1}>
+  <HelpText htmlFor="chainId" required marginRight={2}>
     Only enter a number that you're comfortable with the contract accessing
     now or in the future. You can always increase the token limit later.
   </HelpText>
-  <ButtonLink size={SIZES.AUTO} marginLeft="auto" marginTop={1}>
+  <ButtonLink marginLeft="auto">
     Max
   </ButtonLink>
 </Box>
diff --git a/ui/components/component-library/form-text-field/form-text-field.stories.js b/ui/components/component-library/form-text-field/form-text-field.stories.js
index a41bb1fb0..7c16b6b5e 100644
--- a/ui/components/component-library/form-text-field/form-text-field.stories.js
+++ b/ui/components/component-library/form-text-field/form-text-field.stories.js
@@ -441,12 +441,12 @@ export const CustomLabelOrHelpText = () => (
           color={COLORS.ICON_ALTERNATIVE}
         />
       </Box>
-      <ButtonLink size={SIZES.AUTO}>Use default</ButtonLink>
+      <ButtonLink>Use default</ButtonLink>
     </Box>
     <FormTextField
       id="custom-spending-cap"
       placeholder="Enter a number"
-      rightAccessory={<ButtonLink size={SIZES.AUTO}>Max</ButtonLink>}
+      rightAccessory={<ButtonLink>Max</ButtonLink>}
       marginBottom={4}
       type={TEXT_FIELD_TYPES.NUMBER}
     />
@@ -469,7 +469,7 @@ export const CustomLabelOrHelpText = () => (
         accessing now or in the future. You can always increase the token limit
         later.
       </HelpText>
-      <ButtonLink size={SIZES.AUTO} marginLeft="auto" marginTop={1}>
+      <ButtonLink marginLeft="auto" marginTop={1}>
         Max
       </ButtonLink>
     </Box>
diff --git a/ui/components/component-library/help-text/README.mdx b/ui/components/component-library/help-text/README.mdx
index 663d16f30..27d330c36 100644
--- a/ui/components/component-library/help-text/README.mdx
+++ b/ui/components/component-library/help-text/README.mdx
@@ -41,7 +41,7 @@ import { HelpText, Icon, ICON_NAMES } from '../../component-library';
     marginLeft={1}
     color={COLORS.INHERIT}
     name={ICON_NAMES.WARNING}
-    size={SIZES.AUTO}
+    size={SIZES.INHERIT}
   />
 </HelpText>
 ```
diff --git a/ui/components/component-library/help-text/help-text.stories.js b/ui/components/component-library/help-text/help-text.stories.js
index 54f1f62e2..95ec9ebb7 100644
--- a/ui/components/component-library/help-text/help-text.stories.js
+++ b/ui/components/component-library/help-text/help-text.stories.js
@@ -58,7 +58,7 @@ export const Children = (args) => (
         marginLeft={1}
         color={COLORS.INHERIT}
         name={ICON_NAMES.WARNING}
-        size={SIZES.AUTO}
+        size={SIZES.INHERIT}
       />
     </HelpText>
   </Box>
diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx
index c26bc15ad..5b77046de 100644
--- a/ui/components/component-library/icon/README.mdx
+++ b/ui/components/component-library/icon/README.mdx
@@ -47,7 +47,7 @@ Possible sizes include:
 - `SIZES.MD` 20px
 - `SIZES.LG` 24px
 - `SIZES.XL` 32px
-- `SIZES.AUTO` inherits the font-size from parent element. This is useful for inline icons in text.
+- `SIZES.INHERIT` inherits the font-size from parent element. This is useful for inline icons in text.
 
 <Canvas>
   <Story id="components-componentlibrary-icon--size" />
@@ -63,7 +63,7 @@ import { Icon, ICON_NAMES } from '../../components/component-library';
 <Icon name={ICON_NAMES.ADD_SQUARE} size={SIZES.LG} />
 <Icon name={ICON_NAMES.ADD_SQUARE} size={SIZES.XL} />
 <Text as="p" variant={TEXT.BODY_SM}>
-    <Icon size={SIZES.AUTO} /> Auto also exists and inherits the
+    <Icon size={SIZES.INHERIT} />  inherits the
     font-size of the parent element.
 </Text>
 ```
diff --git a/ui/components/component-library/icon/icon.constants.js b/ui/components/component-library/icon/icon.constants.js
index 8bf5139f3..bfa7174d8 100644
--- a/ui/components/component-library/icon/icon.constants.js
+++ b/ui/components/component-library/icon/icon.constants.js
@@ -20,5 +20,5 @@ export const ICON_SIZES = {
   MD: SIZES.MD,
   LG: SIZES.LG,
   XL: SIZES.XL,
-  AUTO: SIZES.AUTO,
+  AUTO: SIZES.INHERIT,
 };
diff --git a/ui/components/component-library/icon/icon.scss b/ui/components/component-library/icon/icon.scss
index 3c2c86b8e..a9f7db629 100644
--- a/ui/components/component-library/icon/icon.scss
+++ b/ui/components/component-library/icon/icon.scss
@@ -37,7 +37,7 @@
     --size: 32px;
   }
 
-  &--size-auto {
+  &--size-inherit {
     --size: 1em; // Inherits parent font-size
 
     position: relative; // Fixes vertical alignment
diff --git a/ui/components/component-library/icon/icon.stories.js b/ui/components/component-library/icon/icon.stories.js
index 3ddce7976..33b460226 100644
--- a/ui/components/component-library/icon/icon.stories.js
+++ b/ui/components/component-library/icon/icon.stories.js
@@ -203,7 +203,7 @@ export const DefaultStory = (args) => {
         <Text>
           No matches. Please try again or ask in the{' '}
           <ButtonLink
-            size={SIZES.AUTO}
+            size={SIZES.INHERIT}
             color={COLORS.PRIMARY_DEFAULT}
             href="https://consensys.slack.com/archives/C0354T27M5M"
             target="_blank"
@@ -258,8 +258,8 @@ export const Size = (args) => (
       <Icon {...args} size={SIZES.XL} />
     </Box>
     <Text as="p" variant={TEXT.BODY_SM}>
-      <Icon {...args} size={SIZES.AUTO} /> Auto also exists and inherits the
-      font-size of the parent element.
+      <Icon {...args} size={SIZES.INHERIT} /> inherits the font-size of the
+      parent element.
     </Text>
   </>
 );
diff --git a/ui/components/component-library/icon/icon.test.js b/ui/components/component-library/icon/icon.test.js
index 341c630fb..1964d1ca8 100644
--- a/ui/components/component-library/icon/icon.test.js
+++ b/ui/components/component-library/icon/icon.test.js
@@ -96,7 +96,7 @@ describe('Icon', () => {
         />
         <Icon
           name={ICON_NAMES.ADD_SQUARE}
-          size={SIZES.AUTO}
+          size={SIZES.INHERIT}
           data-testid="icon-auto"
         />
       </>,
@@ -106,7 +106,7 @@ describe('Icon', () => {
     expect(getByTestId('icon-md')).toHaveClass('mm-icon--size-md');
     expect(getByTestId('icon-lg')).toHaveClass('mm-icon--size-lg');
     expect(getByTestId('icon-xl')).toHaveClass('mm-icon--size-xl');
-    expect(getByTestId('icon-auto')).toHaveClass('mm-icon--size-auto');
+    expect(getByTestId('icon-auto')).toHaveClass('mm-icon--size-inherit');
   });
   it('should render with icon colors', () => {
     const { getByTestId } = render(
diff --git a/ui/components/component-library/label/README.mdx b/ui/components/component-library/label/README.mdx
index 2f89a8259..57fe13621 100644
--- a/ui/components/component-library/label/README.mdx
+++ b/ui/components/component-library/label/README.mdx
@@ -40,7 +40,7 @@ import { Label, TextField, Icon, ICON_NAMES } from '../../component-library';
   <Icon
     color={COLORS.ICON_ALTERNATIVE}
     name={ICON_NAMES.INFO}
-    size={SIZES.AUTO}
+    size={SIZES.INHERIT}
   />
 </Label>
 <Label
diff --git a/ui/components/component-library/label/label.stories.js b/ui/components/component-library/label/label.stories.js
index 533f73db2..c244de807 100644
--- a/ui/components/component-library/label/label.stories.js
+++ b/ui/components/component-library/label/label.stories.js
@@ -63,7 +63,7 @@ export const Children = (args) => (
       <Icon
         color={COLORS.ICON_ALTERNATIVE}
         name={ICON_NAMES.INFO}
-        size={SIZES.AUTO}
+        size={SIZES.INHERIT}
       />
     </Label>
     <Label
diff --git a/ui/helpers/constants/design-system.js b/ui/helpers/constants/design-system.js
index 13055cee1..1822d6ba6 100644
--- a/ui/helpers/constants/design-system.js
+++ b/ui/helpers/constants/design-system.js
@@ -186,7 +186,8 @@ export const SIZES = {
   MD: 'md',
   LG: 'lg',
   XL: 'xl',
-  AUTO: 'auto', // Used for Text, Icon, and Button components to inherit the parent elements font-size
+  INHERIT: 'inherit', // Used for Text, Icon, and Button components to inherit the parent elements font-size
+  AUTO: 'auto',
   NONE,
 };