From 8b3d782e20146413b623159ad280aaeb3360aed4 Mon Sep 17 00:00:00 2001
From: Dylan <99700808+dkilgore-eightfold@users.noreply.github.com>
Date: Mon, 1 May 2023 13:01:40 -0700
Subject: [PATCH] feat: linkbutton: add link button component (#607)

* feat: linkbutton: add link button component

* chore: linkbutton: address pr feedback consolidating button and linkbutton by variant

* chore: linkbutton: push prettier changes

* chore: linkbutton: removes redundant enum

* chore: linkbutton: removes missing type

* chore: linkbutton: update stories
---
 src/components/Button/Button.stories.tsx      |   99 +-
 src/components/Button/Button.test.tsx         |   79 +-
 .../Button/{BaseButton.tsx => Button.tsx}     |   59 +-
 src/components/Button/Button.types.ts         |   36 +-
 .../Button/DefaultButton/DefaultButton.tsx    |   27 +-
 .../Button/NeutralButton/NeutralButton.tsx    |   24 +-
 src/components/Button/Nudge/Hooks/useNudge.ts |   17 +-
 .../Button/PrimaryButton/PrimaryButton.tsx    |   25 +-
 .../SecondaryButton/SecondaryButton.tsx       |   27 +-
 .../Button/SplitButton/SplitButton.tsx        |   49 +-
 .../Button/SystemUIButton/SystemUIButton.tsx  |   25 +-
 .../TwoStateButton/TwoStateButton.stories.tsx |    4 +-
 .../Button/TwoStateButton/TwoStateButton.tsx  |    3 +-
 src/components/Button/index.ts                |    2 +-
 .../LinkButton/LinkButton.stories.tsx         |  235 ++++
 src/components/LinkButton/LinkButton.test.tsx |  333 +++++
 src/components/LinkButton/LinkButton.tsx      |  335 +++++
 src/components/LinkButton/LinkButton.types.ts |  158 +++
 .../__snapshots__/LinkButton.test.tsx.snap    |  195 +++
 src/components/LinkButton/index.ts            |    2 +
 .../LinkButton/linkbutton.module.scss         | 1128 +++++++++++++++++
 src/components/OcBase/Base.types.ts           |    5 +
 .../__snapshots__/Pagination.test.tsx.snap    |    8 +-
 .../PersistentBar/PersistentBar.stories.tsx   |  110 +-
 .../PersistentBar/PersistentBar.tsx           |   11 +-
 .../PersistentBar/PersistentBar.types.ts      |    4 +-
 .../Select/__snapshots__/Select.test.tsx.snap |   18 +-
 src/octuple.ts                                |   27 +-
 28 files changed, 2733 insertions(+), 312 deletions(-)
 rename src/components/Button/{BaseButton.tsx => Button.tsx} (86%)
 create mode 100644 src/components/LinkButton/LinkButton.stories.tsx
 create mode 100644 src/components/LinkButton/LinkButton.test.tsx
 create mode 100644 src/components/LinkButton/LinkButton.tsx
 create mode 100644 src/components/LinkButton/LinkButton.types.ts
 create mode 100644 src/components/LinkButton/__snapshots__/LinkButton.test.tsx.snap
 create mode 100644 src/components/LinkButton/index.ts
 create mode 100644 src/components/LinkButton/linkbutton.module.scss

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index a4c678bc1..39d2dc6f4 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -2,17 +2,13 @@ import React from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import {
-  BaseButton,
+  Button,
   ButtonIconAlign,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
+  ButtonVariant,
   ButtonWidth,
-  DefaultButton,
-  NeutralButton,
-  PrimaryButton,
-  SecondaryButton,
-  SystemUIButton,
 } from './';
 import { IconName } from '../Icon';
 import { NudgeAnimation } from './Nudge';
@@ -154,63 +150,34 @@ export default {
       ],
       control: { type: 'radio' },
     },
-    theme: {
-      options: ['light', 'dark'],
-      control: { type: 'inline-radio' },
+    variant: {
+      options: [
+        ButtonVariant.Default,
+        ButtonVariant.Neutral,
+        ButtonVariant.Primary,
+        ButtonVariant.Secondary,
+        ButtonVariant.SystemUI,
+      ],
+      control: { type: 'radio' },
     },
   },
-} as ComponentMeta<typeof BaseButton>;
-
-const Primary_Button_Story: ComponentStory<typeof PrimaryButton> = (args) => (
-  <PrimaryButton {...args} />
-);
-
-export const Primary = Primary_Button_Story.bind({});
-export const Counter = Primary_Button_Story.bind({});
+} as ComponentMeta<typeof Button>;
 
-const Secondary_Button_Story: ComponentStory<typeof SecondaryButton> = (
-  args
-) => <SecondaryButton {...args} />;
-
-export const Secondary = Secondary_Button_Story.bind({});
-
-const Default_Button_Story: ComponentStory<typeof DefaultButton> = (args) => (
-  <DefaultButton {...args} />
+const Button_Story: ComponentStory<typeof Button> = (args) => (
+  <Button {...args} />
 );
 
-export const Default = Default_Button_Story.bind({});
-
-const Neutral_Button_Story: ComponentStory<typeof NeutralButton> = (args) => (
-  <NeutralButton {...args} />
-);
-
-export const Neutral = Neutral_Button_Story.bind({});
-
-const System_UI_Button_Story: ComponentStory<typeof SystemUIButton> = (
-  args
-) => <SystemUIButton {...args} />;
-
-export const System_UI = System_UI_Button_Story.bind({});
-
-const Toggle_Button_Story: ComponentStory<typeof PrimaryButton> = (args) => (
-  <PrimaryButton {...args} />
-);
-
-export const Toggle = Toggle_Button_Story.bind({});
-export const Toggle_With_Counter = Toggle_Button_Story.bind({});
-
-const Split_Button_Story: ComponentStory<typeof PrimaryButton> = (args) => (
-  <PrimaryButton {...args} />
-);
-
-export const Split = Split_Button_Story.bind({});
-export const Split_With_Counter = Split_Button_Story.bind({});
-
-const Floating_Button_Story: ComponentStory<typeof PrimaryButton> = (args) => (
-  <PrimaryButton {...args} />
-);
-
-export const Floating_Button = Floating_Button_Story.bind({});
+export const Primary = Button_Story.bind({});
+export const Counter = Button_Story.bind({});
+export const Secondary = Button_Story.bind({});
+export const Default = Button_Story.bind({});
+export const Neutral = Button_Story.bind({});
+export const System_UI = Button_Story.bind({});
+export const Toggle = Button_Story.bind({});
+export const Toggle_With_Counter = Button_Story.bind({});
+export const Split = Button_Story.bind({});
+export const Split_With_Counter = Button_Story.bind({});
+export const Floating_Button = Button_Story.bind({});
 
 const buttonArgs: Object = {
   alignIcon: ButtonIconAlign.Left,
@@ -221,6 +188,7 @@ const buttonArgs: Object = {
   checked: false,
   classNames: 'my-btn-class',
   'data-test-id': 'my-btn-test-id',
+  counter: 0,
   disabled: false,
   disruptive: false,
   dropShadow: false,
@@ -241,6 +209,7 @@ const buttonArgs: Object = {
     'data-test-id': 'myButtonIconTestId',
   },
   id: 'myButton',
+  loading: false,
   shape: ButtonShape.Pill,
   size: ButtonSize.Medium,
   split: false,
@@ -248,14 +217,14 @@ const buttonArgs: Object = {
   style: {},
   text: 'Button',
   toggle: false,
-  counter: 0,
-  loading: false,
+  variant: ButtonVariant.Default,
 };
 
 Primary.args = {
   ...buttonArgs,
   ariaLabel: 'Primary Button',
   text: 'Primary Button',
+  variant: ButtonVariant.Primary,
 };
 
 Counter.args = {
@@ -263,12 +232,14 @@ Counter.args = {
   ariaLabel: 'Primary Button',
   counter: '8',
   text: 'Primary Button',
+  variant: ButtonVariant.Primary,
 };
 
 Secondary.args = {
   ...buttonArgs,
   ariaLabel: 'Secondary Button',
   text: 'Secondary Button',
+  variant: ButtonVariant.Secondary,
 };
 
 System_UI.args = {
@@ -276,18 +247,21 @@ System_UI.args = {
   ariaLabel: 'System UI Button',
   text: 'System UI Button',
   transparent: false,
+  variant: ButtonVariant.SystemUI,
 };
 
 Default.args = {
   ...buttonArgs,
   ariaLabel: 'Default Button',
   text: 'Default Button',
+  variant: ButtonVariant.Default,
 };
 
 Neutral.args = {
   ...buttonArgs,
   ariaLabel: 'Neutral Button',
   text: 'Neutral Button',
+  variant: ButtonVariant.Neutral,
 };
 
 Toggle.args = {
@@ -308,6 +282,7 @@ Toggle.args = {
   },
   text: 'Toggle Button',
   toggle: true,
+  variant: ButtonVariant.Primary,
 };
 
 Toggle_With_Counter.args = {
@@ -329,6 +304,7 @@ Toggle_With_Counter.args = {
   },
   text: 'Toggle Button',
   toggle: true,
+  variant: ButtonVariant.Primary,
 };
 
 Split.args = {
@@ -343,6 +319,7 @@ Split.args = {
       path: IconName.mdiClockOutline,
     },
   },
+  variant: ButtonVariant.Primary,
 };
 
 Split_With_Counter.args = {
@@ -353,6 +330,7 @@ Split_With_Counter.args = {
   split: true,
   splitButtonChecked: false,
   text: 'Split Button',
+  variant: ButtonVariant.Primary,
 };
 
 Floating_Button.args = {
@@ -368,4 +346,5 @@ Floating_Button.args = {
   },
   shape: ButtonShape.Round,
   text: null,
+  variant: ButtonVariant.Primary,
 };
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index 25d4c18c3..be80e9650 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -2,14 +2,8 @@ import React, { useState } from 'react';
 import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MatchMediaMock from 'jest-matchmedia-mock';
-import { ButtonSize } from './Button.types';
-import {
-  DefaultButton,
-  NeutralButton,
-  PrimaryButton,
-  SecondaryButton,
-  SystemUIButton,
-} from './';
+import { ButtonSize, ButtonVariant } from './Button.types';
+import { Button } from './';
 import { NudgeAnimation } from './Nudge';
 import {
   fireEvent,
@@ -36,12 +30,13 @@ describe('Button', () => {
       const [total, setTotal] = useState<number>(0);
       return (
         <>
-          <PrimaryButton
+          <Button
             data-testid="button-1"
             onClick={() => {
               setTotal(12);
             }}
             text={`The value is ${total}`}
+            variant={ButtonVariant.Primary}
           />
         </>
       );
@@ -57,11 +52,12 @@ describe('Button', () => {
     let testCounter = 0;
     const disabled = false;
     const { container } = render(
-      <PrimaryButton
+      <Button
         data-testid="button-2"
         disabled={disabled}
         onClick={() => (testCounter += 1)}
         text="test Button"
+        variant={ButtonVariant.Primary}
       />
     );
     const buttonTestElement: HTMLElement = getByTestId(container, 'button-2');
@@ -74,11 +70,12 @@ describe('Button', () => {
     let testCounter = 0;
     const disabled = true;
     const { container } = render(
-      <PrimaryButton
+      <Button
         data-testid="button-3"
         disabled={disabled}
         onClick={() => (testCounter += 1)}
         text="test Button"
+        variant={ButtonVariant.Primary}
       />
     );
     const buttonTestElement: HTMLElement = getByTestId(container, 'button-3');
@@ -89,25 +86,33 @@ describe('Button', () => {
   });
 
   test('Button is default', () => {
-    const { container } = render(<DefaultButton text="test default" />);
+    const { container } = render(
+      <Button text="test default" variant={ButtonVariant.Default} />
+    );
     expect(container.getElementsByClassName('button-default')).toHaveLength(1);
     expect(container).toMatchSnapshot();
   });
 
   test('Button is neutral', () => {
-    const { container } = render(<NeutralButton text="test neutral" />);
+    const { container } = render(
+      <Button text="test neutral" variant={ButtonVariant.Neutral} />
+    );
     expect(container.getElementsByClassName('button-neutral')).toHaveLength(1);
     expect(container).toMatchSnapshot();
   });
 
   test('Button is primary', () => {
-    const { container } = render(<PrimaryButton text="test" />);
+    const { container } = render(
+      <Button text="test" variant={ButtonVariant.Primary} />
+    );
     expect(container.getElementsByClassName('button-primary')).toHaveLength(1);
     expect(container).toMatchSnapshot();
   });
 
   test('Button is secondary', () => {
-    const { container } = render(<SecondaryButton text="test secondary" />);
+    const { container } = render(
+      <Button text="test secondary" variant={ButtonVariant.Secondary} />
+    );
     expect(container.getElementsByClassName('button-secondary')).toHaveLength(
       1
     );
@@ -115,7 +120,9 @@ describe('Button', () => {
   });
 
   test('Button is system ui', () => {
-    const { container } = render(<SystemUIButton text="test system ui" />);
+    const { container } = render(
+      <Button text="test system ui" variant={ButtonVariant.SystemUI} />
+    );
     expect(container.getElementsByClassName('button-system-ui')).toHaveLength(
       1
     );
@@ -124,7 +131,11 @@ describe('Button', () => {
 
   test('Button is large', () => {
     const { container } = render(
-      <PrimaryButton size={ButtonSize.Large} text="test" />
+      <Button
+        size={ButtonSize.Large}
+        text="test"
+        variant={ButtonVariant.Primary}
+      />
     );
     expect(container.getElementsByClassName('button-large')).toHaveLength(1);
     expect(container).toMatchSnapshot();
@@ -132,7 +143,11 @@ describe('Button', () => {
 
   test('Button is medium', () => {
     const { container } = render(
-      <PrimaryButton size={ButtonSize.Medium} text="test" />
+      <Button
+        size={ButtonSize.Medium}
+        text="test"
+        variant={ButtonVariant.Primary}
+      />
     );
     expect(container.getElementsByClassName('button-medium')).toHaveLength(1);
     expect(container).toMatchSnapshot();
@@ -140,7 +155,11 @@ describe('Button', () => {
 
   test('Button is small', () => {
     const { container } = render(
-      <PrimaryButton size={ButtonSize.Small} text="test" />
+      <Button
+        size={ButtonSize.Small}
+        text="test"
+        variant={ButtonVariant.Primary}
+      />
     );
     expect(container.getElementsByClassName('button-small')).toHaveLength(1);
     expect(container).toMatchSnapshot();
@@ -148,7 +167,7 @@ describe('Button', () => {
 
   test('Button nudge is background', async () => {
     const { container } = render(
-      <PrimaryButton
+      <Button
         nudgeProps={{
           animation: NudgeAnimation.Background,
           delay: 0,
@@ -157,6 +176,7 @@ describe('Button', () => {
         }}
         size={ButtonSize.Small}
         text="test"
+        variant={ButtonVariant.Primary}
       />
     );
     await waitFor(() =>
@@ -167,7 +187,7 @@ describe('Button', () => {
 
   test('Button nudge is bounce', async () => {
     const { container } = render(
-      <PrimaryButton
+      <Button
         nudgeProps={{
           animation: NudgeAnimation.Bounce,
           delay: 0,
@@ -176,6 +196,7 @@ describe('Button', () => {
         }}
         size={ButtonSize.Small}
         text="test"
+        variant={ButtonVariant.Primary}
       />
     );
     await waitFor(() =>
@@ -186,7 +207,7 @@ describe('Button', () => {
 
   test('Button nudge is conic', async () => {
     const { container } = render(
-      <PrimaryButton
+      <Button
         nudgeProps={{
           animation: NudgeAnimation.Conic,
           delay: 0,
@@ -195,6 +216,7 @@ describe('Button', () => {
         }}
         size={ButtonSize.Small}
         text="test"
+        variant={ButtonVariant.Primary}
       />
     );
     await waitFor(() =>
@@ -205,7 +227,7 @@ describe('Button', () => {
 
   test('Button nudge is ring', async () => {
     const { container } = render(
-      <PrimaryButton
+      <Button
         nudgeProps={{
           animation: NudgeAnimation.Ring,
           delay: 0,
@@ -214,6 +236,7 @@ describe('Button', () => {
         }}
         size={ButtonSize.Small}
         text="test"
+        variant={ButtonVariant.Primary}
       />
     );
     await waitFor(() =>
@@ -224,7 +247,7 @@ describe('Button', () => {
 
   test('Button nudge is size', async () => {
     const { container, rerender } = render(
-      <PrimaryButton
+      <Button
         nudgeProps={{
           animation: NudgeAnimation.Size,
           delay: 0,
@@ -233,6 +256,7 @@ describe('Button', () => {
         }}
         size={ButtonSize.Small}
         text="test"
+        variant={ButtonVariant.Primary}
       />
     );
     await waitFor(() =>
@@ -243,7 +267,12 @@ describe('Button', () => {
 
   test('Button is loading', () => {
     const { container } = render(
-      <PrimaryButton loading size={ButtonSize.Medium} text="test" />
+      <Button
+        loading
+        size={ButtonSize.Medium}
+        text="test"
+        variant={ButtonVariant.Primary}
+      />
     );
     expect(container.getElementsByClassName('loader')).toHaveLength(1);
     expect(container).toMatchSnapshot();
diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/Button.tsx
similarity index 86%
rename from src/components/Button/BaseButton.tsx
rename to src/components/Button/Button.tsx
index 6dfef75fc..b2b74a267 100644
--- a/src/components/Button/BaseButton.tsx
+++ b/src/components/Button/Button.tsx
@@ -3,13 +3,14 @@ import DisabledContext, { Disabled } from '../ConfigProvider/DisabledContext';
 import { SizeContext, Size } from '../ConfigProvider';
 import {
   ButtonIconAlign,
+  ButtonProps,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
+  ButtonVariant,
   ButtonWidth,
-  InternalButtonProps,
   SplitButton,
-} from './';
+} from '.';
 import { Icon, IconSize } from '../Icon';
 import { Badge } from '../Badge';
 import { InnerNudge, NudgeAnimation, NudgeProps } from './Nudge';
@@ -22,8 +23,8 @@ import { useNudge } from './Nudge/Hooks/useNudge';
 
 import styles from './button.module.scss';
 
-export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
-  (props: InternalButtonProps, ref: Ref<HTMLButtonElement>) => {
+export const Button: FC<ButtonProps> = React.forwardRef(
+  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {
     const {
       alignIcon = ButtonIconAlign.Left,
       alignText = ButtonTextAlign.Center,
@@ -44,10 +45,11 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
       nudgeProps: defaultNudgeProps,
       htmlType,
       iconProps,
-      prefixIconProps,
       id,
+      loading = false,
       onClick,
       onContextMenu,
+      prefixIconProps,
       shape = ButtonShape.Pill,
       size = ButtonSize.Medium,
       split,
@@ -56,8 +58,9 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
       style,
       text,
       toggle,
-      type,
-      loading = false,
+      transparent = false,
+      type, // TODO: Remove in Octuple v3.0.0 and use `variant` only.
+      variant = ButtonVariant.Default,
       ...rest
     } = props;
     const largeScreenActive: boolean = useMatchMedia(Breakpoints.Large);
@@ -104,10 +107,36 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
       );
     }, [nudgeProps?.enabled]);
 
-    useNudge(disruptive, nudgeProps, [internalRef, innerNudgeRef]);
+    useNudge(disruptive, nudgeProps, [internalRef, innerNudgeRef], styles);
 
-    const buttonBaseSharedClassNames: string = mergeClasses([
+    // TODO: Remove in Octuple v3.0.0 and use `variant` only.
+    // For now, if `type` has a value use it, else use `variant`.
+    const mergedVariant: ButtonVariant = !!type ? type : variant;
+
+    const buttonSharedClassNames: string = mergeClasses([
       classNames,
+      styles.button,
+      { [styles.buttonDefault]: mergedVariant === ButtonVariant.Default },
+      { [styles.buttonNeutral]: mergedVariant === ButtonVariant.Neutral },
+      { [styles.buttonPrimary]: mergedVariant === ButtonVariant.Primary },
+      { [styles.buttonSecondary]: mergedVariant === ButtonVariant.Secondary },
+      { [styles.buttonSystemUi]: mergedVariant === ButtonVariant.SystemUI },
+      {
+        [styles.buttonDisruptive]:
+          disruptive && mergedVariant === ButtonVariant.Default,
+      },
+      {
+        [styles.buttonPrimaryDisruptive]:
+          disruptive && mergedVariant === ButtonVariant.Primary,
+      },
+      {
+        [styles.buttonSecondaryDisruptive]:
+          disruptive && mergedVariant === ButtonVariant.Secondary,
+      },
+      {
+        [styles.transparent]:
+          transparent && mergedVariant === ButtonVariant.SystemUI,
+      },
       {
         [styles.buttonSmall]:
           mergedSize === ButtonSize.Flex && largeScreenActive,
@@ -133,6 +162,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
           shape === ButtonShape.Round && !split && !textExists,
       },
       { [styles.dropShadow]: dropShadow },
+      { [styles.disabled]: allowDisabledFocus || mergedDisabled },
       { [styles.floating]: floatingButtonProps?.enabled },
       { [styles.buttonRtl]: htmlDir === 'rtl' },
       {
@@ -143,8 +173,8 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
       },
     ]);
 
-    const buttonBaseClassNames: string = mergeClasses([
-      buttonBaseSharedClassNames,
+    const buttonClassNames: string = mergeClasses([
+      buttonSharedClassNames,
       { [styles.buttonStretch]: buttonWidth === ButtonWidth.fill },
       { [styles.splitLeft]: split },
       { [styles.left]: alignText === ButtonTextAlign.Left },
@@ -155,7 +185,6 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
       {
         [styles.iconRight]: iconExists && alignIcon === ButtonIconAlign.Right,
       },
-      { [styles.disabled]: allowDisabledFocus || mergedDisabled },
       { [styles.loading]: loading },
     ]);
 
@@ -272,7 +301,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
           aria-pressed={toggle ? !!checked : undefined}
           defaultChecked={checked}
           disabled={(!allowDisabledFocus && mergedDisabled) || loading}
-          className={buttonBaseClassNames}
+          className={buttonClassNames}
           id={id}
           onClick={!allowDisabledFocus ? onClick : null}
           style={style}
@@ -315,7 +344,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
           <SplitButton
             {...splitButtonProps}
             classNames={
-              buttonBaseSharedClassNames + ' ' + splitButtonProps?.classNames
+              buttonSharedClassNames + ' ' + splitButtonProps?.classNames
             }
             checked={splitButtonChecked}
             disruptive={disruptive}
@@ -327,7 +356,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             shape={shape}
             size={mergedSize}
             split={split}
-            type={type}
+            variant={mergedVariant}
           />
         )}
       </>
diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
index 74dc50e0e..a20944842 100644
--- a/src/components/Button/Button.types.ts
+++ b/src/components/Button/Button.types.ts
@@ -33,7 +33,7 @@ export enum ButtonShape {
   Round = 'round',
 }
 
-export enum ButtonType {
+export enum ButtonVariant {
   Default = 'default',
   Neutral = 'neutral',
   Primary = 'primary',
@@ -41,17 +41,6 @@ export enum ButtonType {
   SystemUI = 'systemui',
 }
 
-export interface InternalButtonProps extends ButtonProps {
-  /**
-   * Determines the button type.
-   */
-  type?: ButtonType;
-  /**
-   * Ref of the button
-   */
-  ref?: Ref<HTMLButtonElement>;
-}
-
 export interface FloatingButtonProps {
   /**
    * Determines if the button is floating.
@@ -64,13 +53,13 @@ export type NativeButtonProps = Omit<OcBaseProps<HTMLButtonElement>, 'type'>;
 
 export interface SplitButtonProps
   extends Omit<
-    InternalButtonProps,
+    ButtonProps,
     'text' | 'htmlType' | 'onContextMenu' | 'splitButtonProps' | 'toggle'
   > {}
 
 export interface TwoStateButtonProps
   extends Omit<
-    InternalButtonProps,
+    ButtonProps,
     | 'alignIcon'
     | 'htmlType'
     | 'iconProps'
@@ -169,6 +158,10 @@ export interface ButtonProps extends NativeButtonProps {
    * The button id.
    */
   id?: string;
+  /**
+   * If the button is in loading state
+   */
+  loading?: boolean;
   /**
    * The button onClick event handler.
    */
@@ -177,6 +170,10 @@ export interface ButtonProps extends NativeButtonProps {
    * The split button click event handler.
    */
   onContextMenu?: React.MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Ref of the button
+   */
+  ref?: Ref<HTMLButtonElement>;
   /**
    * Shape of the button.
    * @default ButtonShape.Pill
@@ -218,7 +215,14 @@ export interface ButtonProps extends NativeButtonProps {
    */
   transparent?: boolean;
   /**
-   * If the button is in loading state
+   * Determines the button type.
+   * @deprecated Use `variant` instead.
+   * @default ButtonVariant.Default
    */
-  loading?: boolean;
+  type?: ButtonVariant;
+  /**
+   * Determines the button variant.
+   * @default ButtonVariant.Default
+   */
+  variant?: ButtonVariant;
 }
diff --git a/src/components/Button/DefaultButton/DefaultButton.tsx b/src/components/Button/DefaultButton/DefaultButton.tsx
index bab267b04..f6e91ef35 100644
--- a/src/components/Button/DefaultButton/DefaultButton.tsx
+++ b/src/components/Button/DefaultButton/DefaultButton.tsx
@@ -1,17 +1,15 @@
 import React, { FC, Ref } from 'react';
 import {
-  BaseButton,
+  Button,
   ButtonIconAlign,
   ButtonProps,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
-  ButtonType,
+  ButtonVariant,
 } from '../';
-import { mergeClasses } from '../../../shared/utilities';
-
-import styles from '../button.module.scss';
 
+// TODO: Remove in Octuple v3.0.0, use `<Button variant={ButtonVariant.Default} />` instead.
 export const DefaultButton: FC<ButtonProps> = React.forwardRef(
   (
     {
@@ -19,10 +17,12 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
       alignText = ButtonTextAlign.Center,
       allowDisabledFocus = false,
       ariaLabel,
+      buttonWidth,
       checked = false,
       classNames,
       counter,
       disabled = false,
+      disruptive = false,
       dropShadow = false,
       floatingButtonProps,
       htmlType,
@@ -37,29 +37,21 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
       splitButtonProps,
       style,
       toggle,
-      buttonWidth,
-      disruptive = false,
       ...rest
     },
     ref: Ref<HTMLButtonElement>
   ) => {
-    const buttonClassNames: string = mergeClasses([
-      classNames,
-      styles.button,
-      styles.buttonDefault,
-      { [styles.buttonDisruptive]: disruptive },
-    ]);
-
     return (
-      <BaseButton
+      <Button
         {...rest}
         ref={ref}
         alignIcon={alignIcon}
         alignText={alignText}
         allowDisabledFocus={allowDisabledFocus}
         ariaLabel={ariaLabel}
+        buttonWidth={buttonWidth}
         checked={checked}
-        classNames={buttonClassNames}
+        classNames={classNames}
         counter={counter}
         disabled={disabled}
         dropShadow={dropShadow}
@@ -76,8 +68,7 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
         style={style}
         text={text}
         toggle={toggle}
-        type={ButtonType.Default}
-        buttonWidth={buttonWidth}
+        variant={ButtonVariant.Default}
       />
     );
   }
diff --git a/src/components/Button/NeutralButton/NeutralButton.tsx b/src/components/Button/NeutralButton/NeutralButton.tsx
index 8d180ab84..0579f5cb0 100644
--- a/src/components/Button/NeutralButton/NeutralButton.tsx
+++ b/src/components/Button/NeutralButton/NeutralButton.tsx
@@ -1,17 +1,15 @@
 import React, { FC, Ref } from 'react';
 import {
-  BaseButton,
+  Button,
   ButtonIconAlign,
   ButtonProps,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
-  ButtonType,
+  ButtonVariant,
 } from '../';
-import { mergeClasses } from '../../../shared/utilities';
-
-import styles from '../button.module.scss';
 
+// TODO: Remove in Octuple v3.0.0, use `<Button variant={ButtonVariant.Neutral} />` instead.
 export const NeutralButton: FC<ButtonProps> = React.forwardRef(
   (
     {
@@ -19,6 +17,7 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
       alignText = ButtonTextAlign.Center,
       allowDisabledFocus = false,
       ariaLabel,
+      buttonWidth,
       checked = false,
       classNames,
       counter,
@@ -37,27 +36,21 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
       splitButtonChecked = false,
       style,
       toggle,
-      buttonWidth,
       ...rest
     },
     ref: Ref<HTMLButtonElement>
   ) => {
-    const buttonClassNames: string = mergeClasses([
-      classNames,
-      styles.button,
-      styles.buttonNeutral,
-    ]);
-
     return (
-      <BaseButton
+      <Button
         {...rest}
         ref={ref}
         alignIcon={alignIcon}
         alignText={alignText}
         allowDisabledFocus={allowDisabledFocus}
         ariaLabel={ariaLabel}
+        buttonWidth={buttonWidth}
         checked={checked}
-        classNames={buttonClassNames}
+        classNames={classNames}
         counter={counter}
         disabled={disabled}
         dropShadow={dropShadow}
@@ -74,8 +67,7 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
         style={style}
         text={text}
         toggle={toggle}
-        type={ButtonType.Neutral}
-        buttonWidth={buttonWidth}
+        variant={ButtonVariant.Neutral}
       />
     );
   }
diff --git a/src/components/Button/Nudge/Hooks/useNudge.ts b/src/components/Button/Nudge/Hooks/useNudge.ts
index c9a1221f3..e74562254 100644
--- a/src/components/Button/Nudge/Hooks/useNudge.ts
+++ b/src/components/Button/Nudge/Hooks/useNudge.ts
@@ -2,12 +2,11 @@ import { useState } from 'react';
 import { useInterval } from '../../../../hooks/useInterval';
 import { NudgeAnimation, NudgeProps } from '../';
 
-import styles from '../../button.module.scss';
-
 export const useNudge = (
   disruptive: boolean,
   nudgeProps: NudgeProps,
-  refs: React.MutableRefObject<any>[]
+  refs: React.MutableRefObject<any>[],
+  styles: any
 ): void => {
   const [nudgeIterations, setNudgeIterations] = useState<number>(0);
 
@@ -37,19 +36,15 @@ export const useNudge = (
     setNudgeIterations(nudgeIterations + 1);
     if (Math.abs(nudgeIterations % 2) === 1) {
       if (nudgeProps?.animation === NudgeAnimation.Bounce) {
-        refs[0]?.current.classList.add((styles as any)[nudgeProps.animation]);
+        refs[0]?.current.classList.add(styles[nudgeProps.animation]);
       } else {
-        refs[1]?.current.classList.add((styles as any)[nudgeProps?.animation]);
+        refs[1]?.current.classList.add(styles[nudgeProps?.animation]);
       }
     } else {
       if (nudgeProps?.animation === NudgeAnimation.Bounce) {
-        refs[0]?.current.classList.remove(
-          (styles as any)[nudgeProps.animation]
-        );
+        refs[0]?.current.classList.remove(styles[nudgeProps.animation]);
       } else {
-        refs[1]?.current.classList.remove(
-          (styles as any)[nudgeProps?.animation]
-        );
+        refs[1]?.current.classList.remove(styles[nudgeProps?.animation]);
       }
     }
   }, delay());
diff --git a/src/components/Button/PrimaryButton/PrimaryButton.tsx b/src/components/Button/PrimaryButton/PrimaryButton.tsx
index 9e3025117..3a4a041e4 100644
--- a/src/components/Button/PrimaryButton/PrimaryButton.tsx
+++ b/src/components/Button/PrimaryButton/PrimaryButton.tsx
@@ -1,17 +1,15 @@
 import React, { FC, Ref } from 'react';
 import {
-  BaseButton,
+  Button,
   ButtonIconAlign,
   ButtonProps,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
-  ButtonType,
+  ButtonVariant,
 } from '../';
-import { mergeClasses } from '../../../shared/utilities';
-
-import styles from '../button.module.scss';
 
+// TODO: Remove in Octuple v3.0.0, use `<Button variant={ButtonVariant.Primary} />` instead.
 export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
   (
     {
@@ -19,6 +17,7 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
       alignText = ButtonTextAlign.Center,
       allowDisabledFocus = false,
       ariaLabel,
+      buttonWidth,
       checked = false,
       classNames,
       counter,
@@ -39,28 +38,21 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
       style,
       text,
       toggle,
-      buttonWidth,
       ...rest
     },
     ref: Ref<HTMLButtonElement>
   ) => {
-    const buttonClassNames: string = mergeClasses([
-      classNames,
-      styles.button,
-      styles.buttonPrimary,
-      { [styles.buttonPrimaryDisruptive]: disruptive },
-    ]);
-
     return (
-      <BaseButton
+      <Button
         {...rest}
         ref={ref}
         alignIcon={alignIcon}
         alignText={alignText}
         allowDisabledFocus={allowDisabledFocus}
         ariaLabel={ariaLabel}
+        buttonWidth={buttonWidth}
         checked={checked}
-        classNames={buttonClassNames}
+        classNames={classNames}
         counter={counter}
         disabled={disabled}
         disruptive={disruptive}
@@ -79,8 +71,7 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
         style={style}
         text={text}
         toggle={toggle}
-        type={ButtonType.Primary}
-        buttonWidth={buttonWidth}
+        variant={ButtonVariant.Primary}
       />
     );
   }
diff --git a/src/components/Button/SecondaryButton/SecondaryButton.tsx b/src/components/Button/SecondaryButton/SecondaryButton.tsx
index 9f89d58eb..74f859c83 100644
--- a/src/components/Button/SecondaryButton/SecondaryButton.tsx
+++ b/src/components/Button/SecondaryButton/SecondaryButton.tsx
@@ -1,17 +1,15 @@
 import React, { FC, Ref } from 'react';
-import { mergeClasses } from '../../../shared/utilities';
 import {
-  BaseButton,
+  Button,
   ButtonIconAlign,
   ButtonProps,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
-  ButtonType,
+  ButtonVariant,
 } from '../';
 
-import styles from '../button.module.scss';
-
+// TODO: Remove in Octuple v3.0.0, use `<Button variant={ButtonVariant.Secondary} />` instead.
 export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
   (
     {
@@ -19,6 +17,7 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
       alignText = ButtonTextAlign.Center,
       allowDisabledFocus = false,
       ariaLabel,
+      buttonWidth,
       checked = false,
       classNames,
       counter,
@@ -30,36 +29,29 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
       iconProps,
       nudgeProps,
       onClick,
-      text,
       shape = ButtonShape.Pill,
       size = ButtonSize.Medium,
       split,
       splitButtonChecked = false,
       splitButtonProps,
       style,
+      text,
       toggle,
-      buttonWidth,
       ...rest
     },
     ref: Ref<HTMLButtonElement>
   ) => {
-    const buttonClassNames: string = mergeClasses([
-      classNames,
-      styles.button,
-      styles.buttonSecondary,
-      { [styles.buttonSecondaryDisruptive]: disruptive },
-    ]);
-
     return (
-      <BaseButton
+      <Button
         {...rest}
         ref={ref}
         alignIcon={alignIcon}
         alignText={alignText}
         allowDisabledFocus={allowDisabledFocus}
         ariaLabel={ariaLabel}
+        buttonWidth={buttonWidth}
         checked={checked}
-        classNames={buttonClassNames}
+        classNames={classNames}
         counter={counter}
         disabled={disabled}
         disruptive={disruptive}
@@ -77,8 +69,7 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
         style={style}
         text={text}
         toggle={toggle}
-        type={ButtonType.Secondary}
-        buttonWidth={buttonWidth}
+        variant={ButtonVariant.Secondary}
       />
     );
   }
diff --git a/src/components/Button/SplitButton/SplitButton.tsx b/src/components/Button/SplitButton/SplitButton.tsx
index e51f30168..1076b6215 100644
--- a/src/components/Button/SplitButton/SplitButton.tsx
+++ b/src/components/Button/SplitButton/SplitButton.tsx
@@ -7,7 +7,7 @@ import {
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
-  ButtonType,
+  ButtonVariant,
   SplitButtonProps,
 } from '../';
 import { Icon, IconName, IconSize } from '../../Icon';
@@ -43,7 +43,7 @@ export const SplitButton: FC<SplitButtonProps> = React.forwardRef(
       size = ButtonSize.Medium,
       split,
       style,
-      type,
+      variant,
       ...rest
     } = props;
     const largeScreenActive: boolean = useMatchMedia(Breakpoints.Large);
@@ -71,42 +71,15 @@ export const SplitButton: FC<SplitButtonProps> = React.forwardRef(
     const innerNudgeRef: React.MutableRefObject<HTMLSpanElement> =
       useRef<HTMLSpanElement>(null);
 
-    useNudge(disruptive, nudgeProps, [internalRef, innerNudgeRef]);
+    useNudge(disruptive, nudgeProps, [internalRef, innerNudgeRef], styles);
 
     const splitButtonClassNames: string = mergeClasses([
       classNames,
       styles.splitButton,
-      {
-        [styles.buttonSmall]:
-          mergedSize === ButtonSize.Flex && largeScreenActive,
-      },
-      {
-        [styles.buttonMedium]:
-          mergedSize === ButtonSize.Flex && mediumScreenActive,
-      },
-      {
-        [styles.buttonMedium]:
-          mergedSize === ButtonSize.Flex && smallScreenActive,
-      },
-      {
-        [styles.buttonLarge]:
-          mergedSize === ButtonSize.Flex && xSmallScreenActive,
-      },
-      { [styles.buttonLarge]: mergedSize === ButtonSize.Large },
-      { [styles.buttonMedium]: mergedSize === ButtonSize.Medium },
-      { [styles.buttonSmall]: mergedSize === ButtonSize.Small },
-      { [styles.pillShape]: shape === ButtonShape.Pill },
-      { [styles.dropShadow]: dropShadow },
       { [styles.splitRight]: split },
       {
         [styles.disabled]: allowDisabledFocus || mergedDisabled,
       },
-      {
-        [styles.buttonConic]:
-          !disruptive &&
-          nudgeProps?.enabled &&
-          nudgeProps?.animation === NudgeAnimation.Conic,
-      },
     ]);
 
     const splitDividerClassNames: string = mergeClasses([
@@ -130,22 +103,22 @@ export const SplitButton: FC<SplitButtonProps> = React.forwardRef(
       { [styles.splitDividerLarge]: mergedSize === ButtonSize.Large },
       { [styles.splitDividerMedium]: mergedSize === ButtonSize.Medium },
       { [styles.splitDividerSmall]: mergedSize === ButtonSize.Small },
-      { [styles.splitDividerPrimary]: type === ButtonType.Primary },
+      { [styles.splitDividerPrimary]: variant === ButtonVariant.Primary },
       {
         [styles.splitDividerPrimaryDisruptive]:
-          type === ButtonType.Primary && disruptive,
+          variant === ButtonVariant.Primary && disruptive,
       },
-      { [styles.splitDividerSecondary]: type === ButtonType.Secondary },
+      { [styles.splitDividerSecondary]: variant === ButtonVariant.Secondary },
       {
         [styles.splitDividerSecondaryDisruptive]:
-          type === ButtonType.Secondary && disruptive,
+          variant === ButtonVariant.Secondary && disruptive,
       },
-      { [styles.splitDividerDefault]: type === ButtonType.Default },
-      { [styles.splitDividerNeutral]: type === ButtonType.Neutral },
-      { [styles.splitDividerSystemUi]: type === ButtonType.SystemUI },
+      { [styles.splitDividerDefault]: variant === ButtonVariant.Default },
+      { [styles.splitDividerNeutral]: variant === ButtonVariant.Neutral },
+      { [styles.splitDividerSystemUi]: variant === ButtonVariant.SystemUI },
       {
         [styles.splitDividerDisruptive]:
-          type === ButtonType.Default && disruptive,
+          variant === ButtonVariant.Default && disruptive,
       },
     ]);
 
diff --git a/src/components/Button/SystemUIButton/SystemUIButton.tsx b/src/components/Button/SystemUIButton/SystemUIButton.tsx
index 4b6dcea22..db7018049 100644
--- a/src/components/Button/SystemUIButton/SystemUIButton.tsx
+++ b/src/components/Button/SystemUIButton/SystemUIButton.tsx
@@ -1,17 +1,15 @@
 import React, { FC, Ref } from 'react';
 import {
-  BaseButton,
+  Button,
   ButtonIconAlign,
   ButtonProps,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
-  ButtonType,
+  ButtonVariant,
 } from '..';
-import { mergeClasses } from '../../../shared/utilities';
-
-import styles from '../button.module.scss';
 
+// TODO: Remove in Octuple v3.0.0, use `<Button variant={ButtonVariant.SystemUI} />` instead.
 export const SystemUIButton: FC<ButtonProps> = React.forwardRef(
   (
     {
@@ -19,6 +17,7 @@ export const SystemUIButton: FC<ButtonProps> = React.forwardRef(
       alignText = ButtonTextAlign.Center,
       allowDisabledFocus = false,
       ariaLabel,
+      buttonWidth,
       checked = false,
       classNames,
       counter,
@@ -37,29 +36,22 @@ export const SystemUIButton: FC<ButtonProps> = React.forwardRef(
       splitButtonChecked = false,
       style,
       toggle,
-      buttonWidth,
       transparent = false,
       ...rest
     },
     ref: Ref<HTMLButtonElement>
   ) => {
-    const buttonClassNames: string = mergeClasses([
-      classNames,
-      styles.button,
-      styles.buttonSystemUi,
-      { [styles.transparent]: transparent },
-    ]);
-
     return (
-      <BaseButton
+      <Button
         {...rest}
         ref={ref}
         alignIcon={alignIcon}
         alignText={alignText}
         allowDisabledFocus={allowDisabledFocus}
         ariaLabel={ariaLabel}
+        buttonWidth={buttonWidth}
         checked={checked}
-        classNames={buttonClassNames}
+        classNames={classNames}
         counter={counter}
         disabled={disabled}
         dropShadow={dropShadow}
@@ -76,8 +68,7 @@ export const SystemUIButton: FC<ButtonProps> = React.forwardRef(
         style={style}
         text={text}
         toggle={toggle}
-        type={ButtonType.SystemUI}
-        buttonWidth={buttonWidth}
+        variant={ButtonVariant.SystemUI}
       />
     );
   }
diff --git a/src/components/Button/TwoStateButton/TwoStateButton.stories.tsx b/src/components/Button/TwoStateButton/TwoStateButton.stories.tsx
index f5e582d17..b881ad71f 100644
--- a/src/components/Button/TwoStateButton/TwoStateButton.stories.tsx
+++ b/src/components/Button/TwoStateButton/TwoStateButton.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import {
-  BaseButton,
+  Button,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
@@ -60,7 +60,7 @@ export default {
       control: { type: 'inline-radio' },
     },
   },
-} as ComponentMeta<typeof BaseButton>;
+} as ComponentMeta<typeof Button>;
 
 const Two_State_Button_Story: ComponentStory<typeof TwoStateButton> = (
   args
diff --git a/src/components/Button/TwoStateButton/TwoStateButton.tsx b/src/components/Button/TwoStateButton/TwoStateButton.tsx
index 1b8dc179a..0b275ff4b 100644
--- a/src/components/Button/TwoStateButton/TwoStateButton.tsx
+++ b/src/components/Button/TwoStateButton/TwoStateButton.tsx
@@ -48,7 +48,6 @@ export const TwoStateButton: FC<TwoStateButtonProps> = React.forwardRef(
       style,
       text,
       toggle,
-      type,
       ...rest
     } = props;
     const largeScreenActive: boolean = useMatchMedia(Breakpoints.Large);
@@ -95,7 +94,7 @@ export const TwoStateButton: FC<TwoStateButtonProps> = React.forwardRef(
       );
     }, [nudgeProps?.enabled]);
 
-    useNudge(disruptive, nudgeProps, [internalRef, innerNudgeRef]);
+    useNudge(disruptive, nudgeProps, [internalRef, innerNudgeRef], styles);
 
     const twoStateButtonClassNames: string = mergeClasses([
       classNames,
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index aa78f644c..702234bf1 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,5 +1,5 @@
 export * from './Button.types';
-export * from './BaseButton';
+export * from './Button';
 export * from './DefaultButton/DefaultButton';
 export * from './NeutralButton/NeutralButton';
 export * from './PrimaryButton/PrimaryButton';
diff --git a/src/components/LinkButton/LinkButton.stories.tsx b/src/components/LinkButton/LinkButton.stories.tsx
new file mode 100644
index 000000000..c58ed80bd
--- /dev/null
+++ b/src/components/LinkButton/LinkButton.stories.tsx
@@ -0,0 +1,235 @@
+import React from 'react';
+import { Stories } from '@storybook/addon-docs';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import {
+  LinkButton,
+  LinkButtonIconAlign,
+  LinkButtonShape,
+  LinkButtonSize,
+  LinkButtonTextAlign,
+  LinkButtonVariant,
+  LinkButtonWidth,
+} from '.';
+import { IconName } from '../Icon';
+import { NudgeAnimation } from '../Button/Nudge';
+
+export default {
+  title: 'Link Button',
+  parameters: {
+    docs: {
+      page: (): JSX.Element => (
+        <main>
+          <article>
+            <section>
+              <h1>Link Buttons</h1>
+              <p>
+                Link Buttons give people a way to trigger a route or url.
+                They're typically found in navigation.
+              </p>
+              <h2>Best practices</h2>
+              <h3>Layout</h3>
+              <ul>
+                <li>
+                  There are four button sizes that may be specified via the{' '}
+                  <b>size</b> prop and the <b>size</b>:{' '}
+                  <b>LinkButtonSize.Flex</b>, <b>LinkButtonSize.Large</b>,{' '}
+                  <b>LinkButtonSize.Medium</b>, <b>LinkButtonSize.Small</b>.{' '}
+                  <b>medium</b> is the default and flex resizes the button
+                  automatically with the viewport. To prevent this responsive
+                  behavior, give the button a size other than flex.
+                </li>
+                <li>
+                  Show only one primary link button that inherits theme color at
+                  rest state. If there are more than two link buttons with equal
+                  priority, all buttons should have neutral backgrounds.
+                </li>
+                <li>
+                  Don't place the default focus on a link button that destroys
+                  data. Instead, place the default focus on the button that
+                  performs the "safe act" and retains the content (such as
+                  "Save") or cancels the action (such as "Cancel").
+                </li>
+              </ul>
+              <h3>Content</h3>
+              <ul>
+                <li>
+                  Use sentence-style capitalization—only capitalize the first
+                  word.
+                </li>
+                <li>
+                  Make sure it's clear what will happen when people interact
+                  with the link button. Be concise; usually a single verb is
+                  best. Include a noun if there is any room for interpretation
+                  about what the verb means. For example, "Delete folder" or
+                  "Create account".
+                </li>
+              </ul>
+            </section>
+            <section>
+              <Stories includePrimary title="" />
+            </section>
+          </article>
+        </main>
+      ),
+    },
+  },
+  argTypes: {
+    alignIcon: {
+      options: [LinkButtonIconAlign.Left, LinkButtonIconAlign.Right],
+      control: { type: 'inline-radio' },
+    },
+    alignText: {
+      options: [
+        LinkButtonTextAlign.Center,
+        LinkButtonTextAlign.Left,
+        LinkButtonTextAlign.Right,
+      ],
+      control: { type: 'radio' },
+    },
+    linkButtonWidth: {
+      options: [LinkButtonWidth.fitContent, LinkButtonWidth.fill],
+      control: { type: 'inline-radio' },
+    },
+    onClick: {
+      action: 'click',
+    },
+    shape: {
+      options: [
+        LinkButtonShape.Rectangle,
+        LinkButtonShape.Pill,
+        LinkButtonShape.Round,
+      ],
+      control: { type: 'inline-radio' },
+    },
+    size: {
+      options: [
+        LinkButtonSize.Flex,
+        LinkButtonSize.Large,
+        LinkButtonSize.Medium,
+        LinkButtonSize.Small,
+      ],
+      control: { type: 'radio' },
+    },
+    variant: {
+      options: [
+        LinkButtonVariant.Default,
+        LinkButtonVariant.Neutral,
+        LinkButtonVariant.Primary,
+        LinkButtonVariant.Secondary,
+        LinkButtonVariant.SystemUI,
+      ],
+      control: { type: 'radio' },
+    },
+  },
+} as ComponentMeta<typeof LinkButton>;
+
+const Link_Button_Story: ComponentStory<typeof LinkButton> = (args) => (
+  <LinkButton {...args} />
+);
+
+export const Primary = Link_Button_Story.bind({});
+export const Counter = Link_Button_Story.bind({});
+export const Secondary = Link_Button_Story.bind({});
+export const Default = Link_Button_Story.bind({});
+export const Neutral = Link_Button_Story.bind({});
+export const System_UI = Link_Button_Story.bind({});
+export const Floating = Link_Button_Story.bind({});
+
+const linkButtonArgs: Object = {
+  alignIcon: LinkButtonIconAlign.Left,
+  alignText: LinkButtonTextAlign.Center,
+  allowDisabledFocus: false,
+  ariaLabel: 'Link button',
+  classNames: 'my-link-btn-class',
+  'data-testid': 'my-link-btn-test-id',
+  counter: 0,
+  disabled: false,
+  disruptive: false,
+  dropShadow: false,
+  floatingLinkButtonProps: {
+    enabled: false,
+  },
+  href: 'https://eightfold.ai',
+  iconProps: {
+    path: IconName.mdiCardsHeart,
+    ariaHidden: true,
+    classNames: 'my-link-btn-icon',
+    id: 'myLinkButtonIcon',
+    role: 'presentation',
+    rotate: 0,
+    spin: false,
+    vertical: false,
+    'data-test-id': 'myLinkButtonIconTestId',
+  },
+  id: 'myLinkButton',
+  linkButtonWidth: LinkButtonWidth.fitContent,
+  loading: false,
+  nudgeProps: null,
+  role: 'link',
+  shape: LinkButtonShape.Pill,
+  size: LinkButtonSize.Medium,
+  style: {},
+  target: '_blank',
+  text: 'Link button',
+  variant: LinkButtonVariant.Default,
+};
+
+Primary.args = {
+  ...linkButtonArgs,
+  ariaLabel: 'Primary LinkButton',
+  text: 'Primary LinkButton',
+  variant: LinkButtonVariant.Primary,
+};
+
+Counter.args = {
+  ...linkButtonArgs,
+  ariaLabel: 'Primary LinkButton',
+  counter: '8',
+  text: 'Primary LinkButton',
+  variant: LinkButtonVariant.Primary,
+};
+
+Secondary.args = {
+  ...linkButtonArgs,
+  ariaLabel: 'Secondary LinkButton',
+  text: 'Secondary LinkButton',
+  variant: LinkButtonVariant.Secondary,
+};
+
+System_UI.args = {
+  ...linkButtonArgs,
+  ariaLabel: 'System UI LinkButton',
+  text: 'System UI LinkButton',
+  transparent: false,
+  variant: LinkButtonVariant.SystemUI,
+};
+
+Default.args = {
+  ...linkButtonArgs,
+  ariaLabel: 'Default LinkButton',
+  text: 'Default LinkButton',
+  variant: LinkButtonVariant.Default,
+};
+
+Neutral.args = {
+  ...linkButtonArgs,
+  ariaLabel: 'Neutral LinkButton',
+  text: 'Neutral LinkButton',
+  variant: LinkButtonVariant.Neutral,
+};
+
+Floating.args = {
+  ...linkButtonArgs,
+  floatingLinkButtonProps: {
+    enabled: true,
+  },
+  nudgeProps: {
+    animation: NudgeAnimation.Background,
+    delay: 5000,
+    enabled: true,
+    iterations: 5,
+  },
+  shape: LinkButtonShape.Round,
+  text: null,
+  variant: LinkButtonVariant.Primary,
+};
diff --git a/src/components/LinkButton/LinkButton.test.tsx b/src/components/LinkButton/LinkButton.test.tsx
new file mode 100644
index 000000000..1fca2478f
--- /dev/null
+++ b/src/components/LinkButton/LinkButton.test.tsx
@@ -0,0 +1,333 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { LinkButtonSize } from './LinkButton.types';
+import { LinkButton, LinkButtonVariant } from '.';
+import { NudgeAnimation } from '../Button/Nudge';
+import {
+  fireEvent,
+  getByTestId,
+  render,
+  waitFor,
+} from '@testing-library/react';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+let matchMedia: any;
+
+describe('Link button', () => {
+  beforeAll(() => {
+    matchMedia = new MatchMediaMock();
+  });
+
+  afterEach(() => {
+    matchMedia.clear();
+  });
+
+  test('simulate click on link button', () => {
+    const LinkButtonToClick = (): JSX.Element => {
+      return (
+        <>
+          <LinkButton
+            data-testid="link-button-1"
+            href="https://eightfold.ai"
+            text="test LinkButton"
+            variant={LinkButtonVariant.Primary}
+          />
+        </>
+      );
+    };
+    const { container } = render(<LinkButtonToClick />);
+    const linkButtonTestElement: HTMLElement = getByTestId(
+      container,
+      'link-button-1'
+    );
+    fireEvent.click(linkButtonTestElement);
+    expect(linkButtonTestElement.getAttribute('href')).toBe(
+      'https://eightfold.ai'
+    );
+  });
+
+  test('simulate click on enabled link button', () => {
+    let testCounter = 0;
+    const disabled = false;
+    const { container } = render(
+      <LinkButton
+        data-testid="link-button-2"
+        disabled={disabled}
+        href="https://eightfold.ai"
+        onClick={() => (testCounter += 1)}
+        text="test LinkButton"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    const linkButtonTestElement: HTMLElement = getByTestId(
+      container,
+      'link-button-2'
+    );
+    fireEvent.click(linkButtonTestElement);
+    fireEvent.click(linkButtonTestElement);
+    expect(testCounter).toEqual(2);
+    expect(linkButtonTestElement.getAttribute('href')).toBe(
+      'https://eightfold.ai'
+    );
+  });
+
+  test('simulate click on disabled link button', () => {
+    let testCounter = 0;
+    const disabled = true;
+    const { container } = render(
+      <LinkButton
+        data-testid="link-button-3"
+        disabled={disabled}
+        href="https://eightfold.ai"
+        onClick={() => (testCounter += 1)}
+        text="test LinkButton"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    const linkButtonTestElement: HTMLElement = getByTestId(
+      container,
+      'link-button-3'
+    );
+    fireEvent.click(linkButtonTestElement);
+    fireEvent.click(linkButtonTestElement);
+    expect(testCounter).toEqual(0);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Link button is default', () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        text="test default"
+        variant={LinkButtonVariant.Default}
+      />
+    );
+    expect(
+      container.getElementsByClassName('link-button-default')
+    ).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Link button is neutral', () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        text="test neutral"
+        variant={LinkButtonVariant.Neutral}
+      />
+    );
+    expect(
+      container.getElementsByClassName('link-button-neutral')
+    ).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Link button is primary', () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        text="test primary"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    expect(
+      container.getElementsByClassName('link-button-primary')
+    ).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Link button is secondary', () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        text="test secondary"
+        variant={LinkButtonVariant.Secondary}
+      />
+    );
+    expect(
+      container.getElementsByClassName('link-button-secondary')
+    ).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Link button is system ui', () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        text="test system ui"
+        variant={LinkButtonVariant.SystemUI}
+      />
+    );
+    expect(
+      container.getElementsByClassName('link-button-system-ui')
+    ).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Link button is large', () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        size={LinkButtonSize.Large}
+        text="test"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    expect(container.getElementsByClassName('link-button-large')).toHaveLength(
+      1
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Link button is medium', () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        size={LinkButtonSize.Medium}
+        text="test"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    expect(container.getElementsByClassName('link-button-medium')).toHaveLength(
+      1
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Link button is small', () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        size={LinkButtonSize.Small}
+        text="test"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    expect(container.getElementsByClassName('link-button-small')).toHaveLength(
+      1
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Link button nudge is background', async () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        nudgeProps={{
+          animation: NudgeAnimation.Background,
+          delay: 0,
+          enabled: true,
+          iterations: 1,
+        }}
+        size={LinkButtonSize.Small}
+        text="test"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    await waitFor(() =>
+      expect(container.getElementsByClassName('background')).toHaveLength(1)
+    );
+    expect(container.getElementsByClassName('background')).toHaveLength(1);
+  });
+
+  test('Link button nudge is bounce', async () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        nudgeProps={{
+          animation: NudgeAnimation.Bounce,
+          delay: 0,
+          enabled: true,
+          iterations: 1,
+        }}
+        size={LinkButtonSize.Small}
+        text="test"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    await waitFor(() =>
+      expect(container.getElementsByClassName('bounce')).toHaveLength(1)
+    );
+    expect(container.getElementsByClassName('bounce')).toHaveLength(1);
+  });
+
+  test('Link button nudge is conic', async () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        nudgeProps={{
+          animation: NudgeAnimation.Conic,
+          delay: 0,
+          enabled: true,
+          iterations: 1,
+        }}
+        size={LinkButtonSize.Small}
+        text="test"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    await waitFor(() =>
+      expect(container.getElementsByClassName('conic')).toHaveLength(1)
+    );
+    expect(container.getElementsByClassName('conic')).toHaveLength(1);
+  });
+
+  test('Link button nudge is ring', async () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        nudgeProps={{
+          animation: NudgeAnimation.Ring,
+          delay: 0,
+          enabled: true,
+          iterations: 1,
+        }}
+        size={LinkButtonSize.Small}
+        text="test"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    await waitFor(() =>
+      expect(container.getElementsByClassName('ring')).toHaveLength(1)
+    );
+    expect(container.getElementsByClassName('ring')).toHaveLength(1);
+  });
+
+  test('Link button nudge is size', async () => {
+    const { container, rerender } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        nudgeProps={{
+          animation: NudgeAnimation.Size,
+          delay: 0,
+          enabled: true,
+          iterations: 1,
+        }}
+        size={LinkButtonSize.Small}
+        text="test"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    await waitFor(() =>
+      expect(container.getElementsByClassName('size')).toHaveLength(1)
+    );
+    expect(container.getElementsByClassName('size')).toHaveLength(1);
+  });
+
+  test('Link button is loading', () => {
+    const { container } = render(
+      <LinkButton
+        href="https://eightfold.ai"
+        loading
+        size={LinkButtonSize.Medium}
+        text="test"
+        variant={LinkButtonVariant.Primary}
+      />
+    );
+    expect(container.getElementsByClassName('loader')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/LinkButton/LinkButton.tsx b/src/components/LinkButton/LinkButton.tsx
new file mode 100644
index 000000000..f30d072ca
--- /dev/null
+++ b/src/components/LinkButton/LinkButton.tsx
@@ -0,0 +1,335 @@
+import React, { FC, Ref, useContext, useEffect, useRef, useState } from 'react';
+import DisabledContext, { Disabled } from '../ConfigProvider/DisabledContext';
+import { SizeContext, Size } from '../ConfigProvider';
+import {
+  LinkButtonIconAlign,
+  LinkButtonProps,
+  LinkButtonShape,
+  LinkButtonSize,
+  LinkButtonTextAlign,
+  LinkButtonVariant,
+  LinkButtonWidth,
+} from '.';
+import { Icon, IconSize } from '../Icon';
+import { Badge } from '../Badge';
+import { InnerNudge, NudgeAnimation, NudgeProps } from '../Button/Nudge';
+import { Breakpoints, useMatchMedia } from '../../hooks/useMatchMedia';
+import { mergeClasses } from '../../shared/utilities';
+import { Loader, LoaderSize } from '../Loader';
+import { useCanvasDirection } from '../../hooks/useCanvasDirection';
+import { useMergedRefs } from '../../hooks/useMergedRefs';
+import { useNudge } from '../Button/Nudge/Hooks/useNudge';
+
+import styles from './linkbutton.module.scss';
+
+export const LinkButton: FC<LinkButtonProps> = React.forwardRef(
+  (props: LinkButtonProps, ref: Ref<HTMLAnchorElement>) => {
+    const {
+      alignIcon = LinkButtonIconAlign.Left,
+      alignText = LinkButtonTextAlign.Center,
+      allowDisabledFocus = false,
+      ariaLabel,
+      classNames,
+      configContextProps = {
+        noDisabledContext: false,
+        noSizeContext: false,
+      },
+      counter,
+      disabled = false,
+      disruptive = false,
+      dropShadow = false,
+      floatingLinkButtonProps,
+      nudgeProps: defaultNudgeProps,
+      iconProps,
+      linkButtonWidth = LinkButtonWidth.fitContent,
+      loading = false,
+      prefixIconProps,
+      id,
+      onClick,
+      role = 'link',
+      shape = LinkButtonShape.Pill,
+      size = LinkButtonSize.Medium,
+      style,
+      target = '_self',
+      text,
+      transparent = false,
+      variant = LinkButtonVariant.Default,
+      ...rest
+    } = props;
+    const largeScreenActive: boolean = useMatchMedia(Breakpoints.Large);
+    const mediumScreenActive: boolean = useMatchMedia(Breakpoints.Medium);
+    const smallScreenActive: boolean = useMatchMedia(Breakpoints.Small);
+    const xSmallScreenActive: boolean = useMatchMedia(Breakpoints.XSmall);
+
+    const internalRef: React.MutableRefObject<HTMLAnchorElement> =
+      useRef<HTMLAnchorElement>(null);
+
+    const mergedRef = useMergedRefs(internalRef, ref);
+
+    const htmlDir: string = useCanvasDirection();
+
+    const contextuallyDisabled: Disabled = useContext(DisabledContext);
+    const mergedDisabled: boolean = configContextProps.noDisabledContext
+      ? disabled
+      : contextuallyDisabled || disabled;
+
+    const contextuallySized: Size = useContext(SizeContext);
+    const mergedSize = configContextProps.noSizeContext
+      ? size
+      : contextuallySized || size;
+
+    const counterExists: boolean = !!counter;
+    const iconExists: boolean = !!iconProps;
+    const prefixIconExists: boolean = !!prefixIconProps;
+    const textExists: boolean = !!text;
+
+    const [nudgeProps, setNudgeProps] = useState<NudgeProps>(defaultNudgeProps);
+    const innerNudgeRef: React.MutableRefObject<HTMLSpanElement> =
+      useRef<HTMLSpanElement>(null);
+
+    useEffect(() => {
+      setNudgeProps(
+        props.nudgeProps
+          ? props.nudgeProps
+          : {
+              animation: NudgeAnimation.Background,
+              delay: 2000,
+              iterations: 1,
+              enabled: false,
+            }
+      );
+    }, [nudgeProps?.enabled]);
+
+    useNudge(disruptive, nudgeProps, [internalRef, innerNudgeRef], styles);
+
+    const linkButtonClassNames: string = mergeClasses([
+      classNames,
+      styles.linkButton,
+      { [styles.linkButtonDefault]: variant === LinkButtonVariant.Default },
+      { [styles.linkButtonNeutral]: variant === LinkButtonVariant.Neutral },
+      { [styles.linkButtonPrimary]: variant === LinkButtonVariant.Primary },
+      { [styles.linkButtonSecondary]: variant === LinkButtonVariant.Secondary },
+      { [styles.linkButtonSystemUi]: variant === LinkButtonVariant.SystemUI },
+      {
+        [styles.linkButtonDisruptive]:
+          disruptive && variant === LinkButtonVariant.Default,
+      },
+      {
+        [styles.linkButtonPrimaryDisruptive]:
+          disruptive && variant === LinkButtonVariant.Primary,
+      },
+      {
+        [styles.linkButtonSecondaryDisruptive]:
+          disruptive && variant === LinkButtonVariant.Secondary,
+      },
+      {
+        [styles.transparent]:
+          transparent && variant === LinkButtonVariant.SystemUI,
+      },
+      {
+        [styles.linkButtonSmall]:
+          mergedSize === LinkButtonSize.Flex && largeScreenActive,
+      },
+      {
+        [styles.linkButtonMedium]:
+          mergedSize === LinkButtonSize.Flex && mediumScreenActive,
+      },
+      {
+        [styles.linkButtonMedium]:
+          mergedSize === LinkButtonSize.Flex && smallScreenActive,
+      },
+      {
+        [styles.linkButtonLarge]:
+          mergedSize === LinkButtonSize.Flex && xSmallScreenActive,
+      },
+      { [styles.linkButtonLarge]: mergedSize === LinkButtonSize.Large },
+      { [styles.linkButtonMedium]: mergedSize === LinkButtonSize.Medium },
+      { [styles.linkButtonSmall]: mergedSize === LinkButtonSize.Small },
+      { [styles.pillShape]: shape === LinkButtonShape.Pill },
+      {
+        [styles.roundShape]: shape === LinkButtonShape.Round && !textExists,
+      },
+      { [styles.dropShadow]: dropShadow },
+      { [styles.floating]: floatingLinkButtonProps?.enabled },
+      { [styles.linkButtonRtl]: htmlDir === 'rtl' },
+      {
+        [styles.linkButtonConic]:
+          !disruptive &&
+          nudgeProps?.enabled &&
+          nudgeProps?.animation === NudgeAnimation.Conic,
+      },
+      { [styles.linkButtonStretch]: linkButtonWidth === LinkButtonWidth.fill },
+      { [styles.left]: alignText === LinkButtonTextAlign.Left },
+      { [styles.right]: alignText === LinkButtonTextAlign.Right },
+      {
+        [styles.iconLeft]: iconExists && alignIcon === LinkButtonIconAlign.Left,
+      },
+      {
+        [styles.iconRight]:
+          iconExists && alignIcon === LinkButtonIconAlign.Right,
+      },
+      { [styles.disabled]: allowDisabledFocus || mergedDisabled },
+      { [styles.loading]: loading },
+    ]);
+
+    const linkButtonTextClassNames: string = mergeClasses([
+      {
+        [styles.linkButtonTextSmall]:
+          mergedSize === LinkButtonSize.Flex && largeScreenActive,
+      },
+      {
+        [styles.linkButtonTextMedium]:
+          mergedSize === LinkButtonSize.Flex && mediumScreenActive,
+      },
+      {
+        [styles.linkButtonTextMedium]:
+          mergedSize === LinkButtonSize.Flex && smallScreenActive,
+      },
+      {
+        [styles.linkButtonTextLarge]:
+          mergedSize === LinkButtonSize.Flex && xSmallScreenActive,
+      },
+      { [styles.linkButtonTextLarge]: mergedSize === LinkButtonSize.Large },
+      { [styles.linkButtonTextMedium]: mergedSize === LinkButtonSize.Medium },
+      { [styles.linkButtonTextSmall]: mergedSize === LinkButtonSize.Small },
+    ]);
+
+    const badgeClassNames: string = mergeClasses([
+      styles.counter,
+      linkButtonTextClassNames,
+    ]);
+
+    const handleOnClick = (
+      event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+    ): void => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      onClick?.(event);
+    };
+
+    const getLinkButtonIconSize = (): IconSize => {
+      let iconSize: IconSize;
+      if (mergedSize === LinkButtonSize.Flex && largeScreenActive) {
+        iconSize = IconSize.Small;
+      } else if (
+        mergedSize === LinkButtonSize.Flex &&
+        (mediumScreenActive || smallScreenActive)
+      ) {
+        iconSize = IconSize.Medium;
+      } else if (mergedSize === LinkButtonSize.Flex && xSmallScreenActive) {
+        iconSize = IconSize.Large;
+      } else if (mergedSize === LinkButtonSize.Large) {
+        iconSize = IconSize.Large;
+      } else if (mergedSize === LinkButtonSize.Medium) {
+        iconSize = IconSize.Medium;
+      } else if (mergedSize === LinkButtonSize.Small) {
+        iconSize = IconSize.Small;
+      }
+      return iconSize;
+    };
+
+    const getLoaderSize = (): LoaderSize => {
+      let loaderSize: LoaderSize;
+      if (size === LinkButtonSize.Flex && largeScreenActive) {
+        loaderSize = LoaderSize.Small;
+      } else if (
+        size === LinkButtonSize.Flex &&
+        (mediumScreenActive || smallScreenActive)
+      ) {
+        loaderSize = LoaderSize.Medium;
+      } else if (size === LinkButtonSize.Flex && xSmallScreenActive) {
+        loaderSize = LoaderSize.Large;
+      } else if (size === LinkButtonSize.Large) {
+        loaderSize = LoaderSize.Large;
+      } else if (size === LinkButtonSize.Medium) {
+        loaderSize = LoaderSize.Medium;
+      } else if (size === LinkButtonSize.Small) {
+        loaderSize = LoaderSize.Small;
+      }
+      return loaderSize;
+    };
+
+    const getLinkButtonLoader = (): JSX.Element =>
+      loading && <Loader classNames={styles.loader} size={getLoaderSize()} />;
+
+    const getLinkButtonIcon = (): JSX.Element => (
+      <Icon
+        {...iconProps}
+        classNames={mergeClasses([styles.icon, iconProps.classNames])}
+        size={getLinkButtonIconSize()}
+      />
+    );
+
+    const getPrefixIcon = (): JSX.Element => (
+      <Icon
+        {...prefixIconProps}
+        classNames={mergeClasses([
+          styles.icon,
+          styles.prefixIcon,
+          prefixIconProps.classNames,
+        ])}
+        size={getLinkButtonIconSize()}
+      />
+    );
+
+    const getLinkButtonContent = (
+      buttonTextClassNames: string,
+      text: string
+    ): JSX.Element => (
+      <span className={buttonTextClassNames}>
+        {text ? text : 'Link button'}
+        {counterExists && <Badge classNames={badgeClassNames}>{counter}</Badge>}
+      </span>
+    );
+
+    return (
+      <a
+        {...rest}
+        ref={mergedRef}
+        aria-label={ariaLabel}
+        aria-disabled={(!allowDisabledFocus && mergedDisabled) || loading}
+        className={linkButtonClassNames}
+        id={id}
+        onClick={!allowDisabledFocus ? handleOnClick : null}
+        role={role}
+        style={style}
+        target={target}
+      >
+        <InnerNudge
+          classNames={mergeClasses([
+            styles.innerNudge,
+            {
+              [styles.conic]: nudgeProps?.animation === NudgeAnimation.Conic,
+            },
+          ])}
+          disruptive={disruptive}
+          id={id ? `${id}-nudge` : 'link-button-nudge'}
+          nudgeProps={nudgeProps}
+          ref={innerNudgeRef}
+          style={style}
+        />
+        {iconExists && prefixIconExists && !textExists && (
+          <span>
+            {getLinkButtonIcon()}
+            {getPrefixIcon()}
+          </span>
+        )}
+        {iconExists && !textExists && !prefixIconExists && getLinkButtonIcon()}
+        {counterExists && !textExists && !loading && (
+          <Badge classNames={badgeClassNames}>{counter}</Badge>
+        )}
+        {iconExists && textExists && (
+          <span>
+            {getLinkButtonIcon()}
+            {getLinkButtonContent(linkButtonTextClassNames, text)}
+            {prefixIconExists && getPrefixIcon()}
+          </span>
+        )}
+        {!iconExists && getLinkButtonContent(linkButtonTextClassNames, text)}
+        {getLinkButtonLoader()}
+      </a>
+    );
+  }
+);
diff --git a/src/components/LinkButton/LinkButton.types.ts b/src/components/LinkButton/LinkButton.types.ts
new file mode 100644
index 000000000..b0d22a612
--- /dev/null
+++ b/src/components/LinkButton/LinkButton.types.ts
@@ -0,0 +1,158 @@
+import React, { AnchorHTMLAttributes, Ref } from 'react';
+import { IconProps } from '../Icon';
+import { OcBaseProps } from '../OcBase';
+import { ConfigContextProps, Shape, Size } from '../ConfigProvider';
+import { NudgeProps } from '../Button/Nudge/Nudge.types';
+import {
+  ButtonIconAlign as LinkButtonIconAlign,
+  ButtonTextAlign as LinkButtonTextAlign,
+  ButtonSize as LinkButtonSize,
+  ButtonWidth as LinkButtonWidth,
+  ButtonShape as LinkButtonShape,
+  ButtonVariant as LinkButtonVariant,
+} from '../Button';
+
+export {
+  LinkButtonIconAlign,
+  LinkButtonTextAlign,
+  LinkButtonSize,
+  LinkButtonWidth,
+  LinkButtonShape,
+  LinkButtonVariant,
+};
+
+export interface FloatingLinkButtonProps {
+  /**
+   * Determines if the link button is floating.
+   * @default false
+   */
+  enabled?: boolean;
+}
+
+export type NativeLinkButtonProps = OcBaseProps<HTMLAnchorElement> &
+  AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export interface LinkButtonProps extends NativeLinkButtonProps {
+  /**
+   * Allows focus on the link button when it's disabled.
+   */
+  allowDisabledFocus?: boolean;
+  /**
+   * The link button icon alignment.
+   * @default LinkButtonIconAlign.Left
+   */
+  alignIcon?: LinkButtonIconAlign;
+  /**
+   * The link button text alignment.
+   * @default ButtonTextAlign.Center
+   */
+  alignText?: LinkButtonTextAlign;
+  /**
+   * The link button aria-label text.
+   */
+  ariaLabel?: string;
+  /**
+   * The link button class names.
+   */
+  classNames?: string;
+  /**
+   * Configure how contextual props are consumed
+   */
+  configContextProps?: ConfigContextProps;
+  /**
+   * The link button counter string.
+   */
+  counter?: string;
+  /**
+   * The link button disabled state.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The link button disruptive state.
+   * @default false
+   */
+  disruptive?: boolean;
+  /**
+   * The link button drop shadow state.
+   * @default false
+   */
+  dropShadow?: boolean;
+  /**
+   * The link button is always floating on bottom right corner.
+   */
+  floatingLinkButtonProps?: FloatingLinkButtonProps;
+  /**
+   * The link button nudge props.
+   * @experimental
+   */
+  nudgeProps?: NudgeProps;
+  /**
+   * The link button icon props.
+   */
+  iconProps?: IconProps;
+  /**
+   * The link button width type
+   * @default fitContent
+   */
+  linkButtonWidth?: LinkButtonWidth;
+  /**
+   * The link button icon props.
+   */
+  prefixIconProps?: IconProps;
+  /**
+   * The link button id.
+   */
+  id?: string;
+  /**
+   * The link button onClick event handler.
+   */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  /**
+   * Ref of the link button
+   */
+  ref?: Ref<HTMLAnchorElement>;
+  /**
+   * The link button role.
+   * @default 'link'
+   */
+  role?: string;
+  /**
+   * Shape of the link button.
+   * @default ButtonShape.Pill
+   */
+  shape?: LinkButtonShape | Shape;
+  /**
+   * The link button size.
+   * @default ButtonSize.Medium
+   */
+  size?: LinkButtonSize | Size;
+  /**
+   * The link button style.
+   */
+  style?: React.CSSProperties;
+  /**
+   * The link button target
+   * @default '_self'
+   */
+  target?: string;
+  /**
+   * The link button text.
+   */
+  text?: string;
+  /**
+   * The link button will remain transparent
+   * @default false
+   */
+  transparent?: boolean;
+  /**
+   * The link button variant.
+   * variant: `Default`, `Neutral`, `Primary`, `Secondary`, `SystemUI`
+   * @default LinkButtonVariant.Default
+   */
+  variant?: LinkButtonVariant;
+  /**
+   * If the link button is in loading state
+   */
+  loading?: boolean;
+}
diff --git a/src/components/LinkButton/__snapshots__/LinkButton.test.tsx.snap b/src/components/LinkButton/__snapshots__/LinkButton.test.tsx.snap
new file mode 100644
index 000000000..5f089ceb8
--- /dev/null
+++ b/src/components/LinkButton/__snapshots__/LinkButton.test.tsx.snap
@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link button Link button is default 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="link-button link-button-default link-button-medium pill-shape"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-medium"
+    >
+      test default
+    </span>
+  </a>
+</div>
+`;
+
+exports[`Link button Link button is large 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="link-button link-button-primary link-button-large pill-shape"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-large"
+    >
+      test
+    </span>
+  </a>
+</div>
+`;
+
+exports[`Link button Link button is loading 1`] = `
+<div>
+  <a
+    aria-disabled="true"
+    class="link-button link-button-primary link-button-medium pill-shape loading"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-medium"
+    >
+      test
+    </span>
+    <div
+      class="loader-container loader"
+    >
+      <div
+        class="dot medium"
+      />
+      <div
+        class="dot medium"
+      />
+      <div
+        class="dot medium"
+      />
+    </div>
+  </a>
+</div>
+`;
+
+exports[`Link button Link button is medium 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="link-button link-button-primary link-button-medium pill-shape"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-medium"
+    >
+      test
+    </span>
+  </a>
+</div>
+`;
+
+exports[`Link button Link button is neutral 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="link-button link-button-neutral link-button-medium pill-shape"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-medium"
+    >
+      test neutral
+    </span>
+  </a>
+</div>
+`;
+
+exports[`Link button Link button is primary 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="link-button link-button-primary link-button-medium pill-shape"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-medium"
+    >
+      test primary
+    </span>
+  </a>
+</div>
+`;
+
+exports[`Link button Link button is secondary 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="link-button link-button-secondary link-button-medium pill-shape"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-medium"
+    >
+      test secondary
+    </span>
+  </a>
+</div>
+`;
+
+exports[`Link button Link button is small 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="link-button link-button-primary link-button-small pill-shape"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-small"
+    >
+      test
+    </span>
+  </a>
+</div>
+`;
+
+exports[`Link button Link button is system ui 1`] = `
+<div>
+  <a
+    aria-disabled="false"
+    class="link-button link-button-system-ui link-button-medium pill-shape"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-medium"
+    >
+      test system ui
+    </span>
+  </a>
+</div>
+`;
+
+exports[`Link button simulate click on disabled link button 1`] = `
+<div>
+  <a
+    aria-disabled="true"
+    class="link-button link-button-primary link-button-medium pill-shape disabled"
+    data-testid="link-button-3"
+    href="https://eightfold.ai"
+    role="link"
+    target="_self"
+  >
+    <span
+      class="link-button-text-medium"
+    >
+      test LinkButton
+    </span>
+  </a>
+</div>
+`;
diff --git a/src/components/LinkButton/index.ts b/src/components/LinkButton/index.ts
new file mode 100644
index 000000000..866f71654
--- /dev/null
+++ b/src/components/LinkButton/index.ts
@@ -0,0 +1,2 @@
+export * from './LinkButton.types';
+export * from './LinkButton';
diff --git a/src/components/LinkButton/linkbutton.module.scss b/src/components/LinkButton/linkbutton.module.scss
new file mode 100644
index 000000000..78feff774
--- /dev/null
+++ b/src/components/LinkButton/linkbutton.module.scss
@@ -0,0 +1,1128 @@
+.link-button {
+  background-color: inherit;
+  border-radius: var(--button-border-radius);
+  cursor: pointer;
+  display: inline-block;
+  font-family: var(--button-font-family);
+  min-height: max-content;
+  min-width: max-content;
+  text-decoration: none;
+  transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
+  white-space: nowrap;
+  position: relative;
+  z-index: 0;
+
+  span:not(.inner-nudge) {
+    position: relative;
+    z-index: 1;
+  }
+
+  span:not(.column):not(.counter) {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .icon + .link-button-text-large:not(:empty) {
+    margin-left: $button-spacer-large;
+
+    + .prefix-icon {
+      margin-left: $button-spacer-large;
+    }
+  }
+
+  .icon + .link-button-text-medium:not(:empty) {
+    margin-left: $button-spacer-medium;
+
+    + .prefix-icon {
+      margin-left: $button-spacer-medium;
+    }
+  }
+
+  .icon + .link-button-text-small:not(:empty) {
+    margin-left: $button-spacer-small;
+
+    + .prefix-icon {
+      margin-left: $button-spacer-small;
+    }
+  }
+
+  &.pill-shape {
+    border-radius: var(--button-pill-shape-border-radius);
+  }
+
+  &.round-shape {
+    border-radius: var(--button-round-shape-border-radius);
+
+    &.link-button-large {
+      padding: $button-padding-vertical-large;
+    }
+    &.link-button-medium {
+      padding: $button-padding-vertical-medium;
+    }
+    &.link-button-small {
+      padding: $button-padding-vertical-small;
+    }
+  }
+
+  &.drop-shadow {
+    box-shadow: $shadow-object-s;
+  }
+
+  &.link-button-stretch {
+    width: 100%;
+
+    span {
+      justify-content: center;
+    }
+  }
+
+  &.left {
+    span {
+      justify-content: left;
+    }
+  }
+
+  &.right {
+    span {
+      justify-content: right;
+    }
+  }
+
+  &.icon-left {
+    span {
+      transform: none;
+    }
+  }
+
+  &.icon-right {
+    span:not(.counter):not(.inner-nudge) {
+      transform: scaleX(-1);
+    }
+
+    &.left {
+      span {
+        justify-content: right;
+      }
+    }
+
+    &.right {
+      span {
+        justify-content: left;
+      }
+    }
+  }
+
+  .counter {
+    background-color: var(--button-counter-default-background-color);
+    color: var(--button-counter-default-text-color);
+    display: inline-block;
+    text-align: center;
+    width: fit-content;
+  }
+
+  &.floating {
+    position: fixed;
+    bottom: 40px;
+    right: 40px;
+    z-index: $z-index-400;
+  }
+
+  .inner-nudge {
+    align-items: center;
+    background: inherit;
+    border-radius: inherit;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 0;
+
+    &.background {
+      overflow: hidden;
+
+      &:after {
+        animation: $motion-duration-slow $motion-easing-easeinout 1
+          nudgeBackgroundAfter;
+        background: linear-gradient(
+          to right,
+          transparent 0%,
+          var(--button-nudge-background-color-primary) 100%
+        );
+        content: '';
+        height: 200px;
+        left: -120%;
+        min-width: $space-l;
+        position: absolute;
+        top: -88px;
+        transform: rotate(45deg);
+        width: 50%;
+      }
+
+      &:before {
+        animation: $motion-duration-slow $motion-easing-easeinout 1
+          nudgeBackgroundBefore;
+        background: linear-gradient(
+          to right,
+          transparent 0%,
+          var(--button-nudge-background-color-primary) 100%
+        );
+        content: '';
+        height: 88px;
+        left: -100%;
+        position: absolute;
+        top: -22px;
+        transform: rotate(45deg);
+        width: $space-xs;
+      }
+    }
+
+    &.conic {
+      overflow: hidden;
+
+      &:before {
+        animation: 2000ms linear infinite nudgeConic;
+        background: conic-gradient(
+          var(--button-nudge-gradient-color-one),
+          var(--button-nudge-gradient-color-two),
+          var(--button-nudge-gradient-color-three)
+        );
+        border-radius: 100%;
+        content: '';
+        display: block;
+        height: 1024px;
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1024px;
+      }
+
+      &:after {
+        background: inherit;
+        border-radius: inherit;
+        content: '';
+        height: calc(100% - $space-xxs);
+        left: $space-xxxs;
+        position: absolute;
+        top: $space-xxxs;
+        width: calc(100% - $space-xxs);
+        z-index: 0;
+      }
+    }
+
+    &.ring {
+      &:after {
+        animation: $motion-duration-fast $motion-easing-easeinout 1
+          nudgeRingMedium;
+        border: $space-xxs solid var(--primary-color-20);
+        border-radius: 100%;
+        content: '';
+        height: 14px;
+        left: 50%;
+        opacity: 0;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 14px;
+        z-index: 0;
+      }
+    }
+
+    &.size {
+      overflow: visible;
+
+      &:after {
+        animation: $motion-duration-fast $motion-easing-easeinout 1 nudgeSize;
+        background: inherit;
+        border-radius: inherit;
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 0;
+      }
+    }
+  }
+
+  &.bounce {
+    animation-duration: 1s;
+    animation-name: nudgeBounce;
+    animation-fill-mode: both;
+    transform-origin: center bottom;
+  }
+
+  &.round-shape {
+    .inner-nudge {
+      &.background {
+        &:after {
+          animation-duration: $motion-duration-normal;
+        }
+
+        &:before {
+          animation-duration: $motion-duration-normal;
+        }
+      }
+
+      &.size {
+        overflow: visible;
+
+        &:after {
+          animation: $motion-duration-fast $motion-easing-easeinout 1 nudgeSize;
+          background: inherit;
+          border-radius: inherit;
+          content: '';
+          height: 100%;
+          left: 0;
+          position: absolute;
+          top: 0;
+          width: 100%;
+          z-index: 0;
+        }
+      }
+    }
+  }
+
+  &-large {
+    height: 44px;
+    padding: $button-padding-vertical-large $button-padding-horizontal-large;
+
+    &.floating.round-shape {
+      min-height: 44px;
+      min-width: 44px;
+      width: 44px;
+      height: 44px;
+    }
+
+    .inner-nudge {
+      &.ring {
+        &:after {
+          animation-name: nudgeRingLarge;
+        }
+      }
+    }
+  }
+
+  &-medium {
+    height: 36px;
+    padding: $button-padding-vertical-medium $button-padding-horizontal-medium;
+
+    &.floating.round-shape {
+      min-height: 36px;
+      min-width: 36px;
+      width: 36px;
+      height: 36px;
+    }
+
+    .inner-nudge {
+      &.ring {
+        &:after {
+          animation-name: nudgeRingMedium;
+        }
+      }
+    }
+  }
+
+  &-small {
+    height: 28px;
+    padding: $button-padding-vertical-small $button-padding-horizontal-small;
+
+    &.floating.round-shape {
+      min-height: 28px;
+      min-width: 28px;
+      width: 28px;
+      height: 28px;
+    }
+
+    .inner-nudge {
+      &.ring {
+        &:after {
+          animation-name: nudgeRingSmall;
+        }
+      }
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    opacity: $disabled-alpha-value;
+    cursor: not-allowed;
+  }
+
+  &.loading {
+    opacity: 1;
+    pointer-events: none;
+  }
+
+  &:hover:not([disabled]) {
+    .counter {
+      background-color: var(--button-counter-hover-background-color);
+    }
+  }
+
+  &:active:not([disabled]) {
+    .counter {
+      background-color: var(--button-counter-active-background-color);
+    }
+  }
+
+  // Hides the browser default keyboard focus-visible styles.
+  // Use the ConfigProvider instead.
+  &:focus-visible {
+    outline: none;
+  }
+
+  .loader {
+    align-items: center;
+    animation: fadeIn $motion-duration-normal $motion-easing-easein forwards;
+    background: inherit;
+    border-radius: inherit;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+}
+
+.link-button-text-large {
+  font-weight: $text-font-weight-semibold;
+  font-size: $text-font-size-4;
+  line-height: $text-line-height-3;
+
+  &.counter {
+    font-size: $text-font-size-4;
+    height: 24px;
+    line-height: 24px;
+    margin-left: $space-xs;
+  }
+}
+
+.link-button-text-medium {
+  font-weight: $text-font-weight-semibold;
+  font-size: $text-font-size-3;
+  line-height: $text-line-height-2;
+
+  &.counter {
+    font-size: $text-font-size-2;
+    height: 18px;
+    line-height: 18px;
+    margin-left: $space-xs;
+  }
+}
+
+.link-button-text-small {
+  font-weight: $text-font-weight-semibold;
+  font-size: $text-font-size-2;
+  line-height: $text-line-height-1;
+
+  &.counter {
+    font-size: $text-font-size-1;
+    height: 16px;
+    line-height: 16px;
+    margin-left: $space-xxs;
+  }
+}
+
+.link-button-primary {
+  --button-counter-default-background-color: var(--accent-color-10);
+  --button-counter-hover-background-color: var(--accent-color-20);
+  --button-counter-checked-background-color: var(--accent-color-10);
+  --button-counter-focus-background-color: var(--accent-color-10);
+  --button-counter-active-background-color: var(--accent-color-10);
+
+  color: var(--button-primary-text-color);
+  background-color: var(--button-primary-background-color);
+  border-width: var(--button-primary-border-width);
+  border-style: var(--button-primary-border-style);
+  border-color: var(--button-primary-border-color);
+
+  &.link-button-conic {
+    border-color: transparent;
+  }
+
+  .inner-nudge {
+    &.size {
+      &:after {
+        border-width: var(--button-primary-border-width);
+        border-style: var(--button-primary-border-style);
+        border-color: var(--button-primary-border-color);
+      }
+    }
+  }
+
+  &:hover:not([disabled]) {
+    color: var(--button-primary-hover-text-color);
+    background-color: var(--button-primary-hover-background-color);
+    border-width: var(--button-primary-hover-border-width);
+    border-style: var(--button-primary-hover-border-style);
+    border-color: var(--button-primary-hover-border-color);
+  }
+
+  &:active:not([disabled]) {
+    color: var(--button-primary-active-text-color);
+    background-color: var(--button-primary-active-background-color);
+    border-width: var(--button-primary-active-border-width);
+    border-style: var(--button-primary-active-border-style);
+    border-color: var(--button-primary-active-border-color);
+  }
+}
+
+.link-button-secondary {
+  --button-counter-default-background-color: var(--primary-color-20);
+  --button-counter-hover-background-color: var(--primary-color-20);
+  --button-counter-checked-background-color: var(--primary-color-10);
+  --button-counter-focus-background-color: var(--primary-color-20);
+  --button-counter-active-background-color: var(--primary-color-10);
+
+  color: var(--button-secondary-text-color);
+  background-color: var(--button-secondary-background-color);
+  border-width: var(--button-secondary-border-width);
+  border-style: var(--button-secondary-border-style);
+  border-color: var(--button-secondary-border-color);
+
+  &:hover:not([disabled]) {
+    color: var(--button-secondary-hover-text-color);
+    background-color: var(--button-secondary-hover-background-color);
+    border-width: var(--button-secondary-hover-border-width);
+    border-style: var(--button-secondary-hover-border-style);
+    border-color: var(--button-secondary-hover-border-color);
+  }
+
+  &:active:not([disabled]) {
+    color: var(--button-secondary-active-text-color);
+    background-color: var(--button-secondary-active-background-color);
+    border-width: var(--button-secondary-active-border-width);
+    border-style: var(--button-secondary-active-border-style);
+    border-color: var(--button-secondary-active-border-color);
+  }
+
+  &.link-button-conic {
+    border-color: transparent;
+  }
+
+  .inner-nudge {
+    &.background {
+      &:after {
+        background: linear-gradient(
+          to right,
+          transparent 0%,
+          var(--button-nudge-background-color-secondary) 100%
+        );
+      }
+
+      &:before {
+        background: linear-gradient(
+          to right,
+          transparent 0%,
+          var(--button-nudge-background-color-secondary) 100%
+        );
+      }
+    }
+
+    &.size {
+      &:after {
+        border-width: var(--button-secondary-border-width);
+        border-style: var(--button-secondary-border-style);
+        border-color: var(--button-secondary-border-color);
+      }
+    }
+  }
+
+  // The additional Secondary Button border requires some padding pixel pushing.
+  &.link-button-large {
+    padding: calc($button-padding-vertical-large - 1px)
+      $button-padding-horizontal-large;
+  }
+
+  &.link-button-medium {
+    padding: calc($button-padding-vertical-medium - 1px)
+      $button-padding-horizontal-medium;
+  }
+
+  &.link-button-small {
+    padding: calc($button-padding-vertical-small - 1px)
+      $button-padding-horizontal-small;
+  }
+}
+
+.link-button-primary-disruptive {
+  --button-counter-default-background-color: var(--disruptive-color-10);
+  --button-counter-hover-background-color: var(--disruptive-color-20);
+  --button-counter-checked-background-color: var(--disruptive-color-10);
+  --button-counter-focus-background-color: var(--disruptive-color-10);
+  --button-counter-active-background-color: var(--disruptive-color-10);
+  --button-counter-default-text-color: var(--disruptive-color-80);
+
+  color: var(--button-primary-disruptive-text-color);
+  background-color: var(--button-primary-disruptive-background-color);
+  border-width: var(--button-primary-disruptive-border-width);
+  border-style: var(--button-primary-disruptive-border-style);
+  border-color: var(--button-primary-disruptive-border-color);
+
+  &:hover:not([disabled]) {
+    color: var(--button-primary-disruptive-hover-text-color);
+    background-color: var(--button-primary-disruptive-hover-background-color);
+    border-width: var(--button-primary-disruptive-hover-border-width);
+    border-style: var(--button-primary-disruptive-hover-border-style);
+    border-color: var(--button-primary-disruptive-hover-border-color);
+  }
+
+  &:active:not([disabled]) {
+    color: var(--button-primary-disruptive-active-text-color);
+    background-color: var(--button-primary-disruptive-active-background-color);
+    border-width: var(--button-primary-disruptive-active-border-width);
+    border-style: var(--button-primary-disruptive-active-border-style);
+    border-color: var(--button-primary-disruptive-active-border-color);
+  }
+}
+
+.link-button-secondary-disruptive {
+  --button-counter-default-background-color: var(--disruptive-color-20);
+  --button-counter-hover-background-color: var(--disruptive-color-20);
+  --button-counter-checked-background-color: var(--disruptive-color-10);
+  --button-counter-focus-background-color: var(--disruptive-color-20);
+  --button-counter-active-background-color: var(--disruptive-color-10);
+  --button-counter-default-text-color: var(--disruptive-color-80);
+
+  color: var(--button-secondary-disruptive-text-color);
+  background-color: var(--button-secondary-disruptive-background-color);
+  border-width: var(--button-secondary-disruptive-border-width);
+  border-style: var(--button-secondary-disruptive-border-style);
+  border-color: var(--button-secondary-disruptive-border-color);
+
+  &:hover:not([disabled]) {
+    color: var(--button-secondary-disruptive-hover-text-color);
+    background-color: var(--button-secondary-disruptive-hover-background-color);
+    border-width: var(--button-secondary-disruptive-hover-border-width);
+    border-style: var(--button-secondary-disruptive-hover-border-style);
+    border-color: var(--button-secondary-disruptive-hover-border-color);
+  }
+
+  &:active:not([disabled]) {
+    color: var(--button-secondary-disruptive-active-text-color);
+    background-color: var(
+      --button-secondary-disruptive-active-background-color
+    );
+    border-width: var(--button-secondary-disruptive-active-border-width);
+    border-style: var(--button-secondary-disruptive-active-border-style);
+    border-color: var(--button-secondary-disruptive-active-border-color);
+  }
+}
+
+.link-button-default {
+  --button-counter-default-background-color: var(--primary-color-20);
+  --button-counter-hover-background-color: var(--primary-color-20);
+  --button-counter-checked-background-color: var(--primary-color-10);
+  --button-counter-focus-background-color: var(--primary-color-20);
+  --button-counter-active-background-color: var(--primary-color-10);
+
+  color: var(--button-default-text-color);
+  background-color: var(--button-default-background-color);
+  border-width: var(--button-default-border-width);
+  border-style: var(--button-default-border-style);
+  border-color: var(--button-default-border-color);
+
+  &.link-button-conic {
+    border-color: transparent;
+  }
+
+  .inner-nudge {
+    &.size {
+      &:after {
+        border-width: var(--button-default-border-width);
+        border-style: var(--button-default-border-style);
+        border-color: var(--button-default-border-color);
+      }
+    }
+  }
+
+  &:hover:not([disabled]) {
+    color: var(--button-default-hover-text-color);
+    background-color: var(--button-default-hover-background-color);
+    border-width: var(--button-default-hover-border-width);
+    border-style: var(--button-default-hover-border-style);
+    border-color: var(--button-default-hover-border-color);
+  }
+
+  &:active:not([disabled]) {
+    color: var(--button-default-active-text-color);
+    background-color: var(--button-default-active-background-color);
+    border-width: var(--button-default-active-border-width);
+    border-style: var(--button-default-active-border-style);
+    border-color: var(--button-default-active-border-color);
+  }
+}
+
+.link-button-disruptive {
+  --button-counter-default-background-color: var(--disruptive-color-20);
+  --button-counter-hover-background-color: var(--disruptive-color-20);
+  --button-counter-checked-background-color: var(--disruptive-color-10);
+  --button-counter-focus-background-color: var(--disruptive-color-20);
+  --button-counter-active-background-color: var(--disruptive-color-10);
+  --button-counter-default-text-color: var(--disruptive-color-80);
+
+  color: var(--button-default-disruptive-text-color);
+  background-color: var(--button-default-disruptive-background-color);
+  border-width: var(--button-default-disruptive-border-width);
+  border-style: var(--button-default-disruptive-border-style);
+  border-color: var(--button-default-disruptive-border-color);
+
+  &:hover:not([disabled]) {
+    color: var(--button-default-disruptive-hover-text-color);
+    background-color: var(--button-default-disruptive-hover-background-color);
+    border-width: var(--button-default-disruptive-hover-border-width);
+    border-style: var(--button-default-disruptive-hover-border-style);
+    border-color: var(--button-default-disruptive-hover-border-color);
+  }
+
+  &:active:not([disabled]) {
+    color: var(--button-default-disruptive-active-text-color);
+    background-color: var(--button-default-disruptive-active-background-color);
+    border-width: var(--button-default-disruptive-active-border-width);
+    border-style: var(--button-default-disruptive-active-border-style);
+    border-color: var(--button-default-disruptive-active-border-color);
+  }
+}
+
+.link-button-neutral {
+  --button-counter-default-text-color: var(
+    --button-neutral-counter-default-text-color
+  );
+
+  --bg: var(--button-neutral-background-color);
+  --color: var(--button-neutral-text-color);
+  color: var(--color);
+  background-color: var(--bg);
+
+  &:hover:not([disabled]) {
+    --bg: var(--button-neutral-hover-background-color);
+    --color: var(--button-neutral-hover-text-color);
+  }
+
+  &:active:not([disabled]) {
+    --bg: var(--button-neutral-active-background-color);
+    --color: var(--button-neutral-active-text-color);
+  }
+}
+
+.link-button-system-ui {
+  --button-counter-default-text-color: var(
+    --button-system-ui-counter-default-text-color
+  );
+
+  --bg: var(--button-system-ui-background-color);
+  --color: var(--button-system-ui-text-color);
+  color: var(--color);
+
+  .inner-nudge {
+    &.background {
+      &:after {
+        background: linear-gradient(
+          to right,
+          transparent 0%,
+          var(--button-nudge-background-color-secondary) 100%
+        );
+      }
+
+      &:before {
+        background: linear-gradient(
+          to right,
+          transparent 0%,
+          var(--button-nudge-background-color-secondary) 100%
+        );
+      }
+    }
+  }
+
+  &.transparent {
+    background: transparent;
+  }
+
+  &:not(.transparent) {
+    background-color: var(--bg);
+  }
+
+  &:not(.transparent):not([disabled]):hover {
+    --bg: var(--button-system-ui-hover-background-color);
+    --color: var(--button-system-ui-hover-text-color);
+  }
+
+  &:not(.transparent):not([disabled]):active {
+    --bg: var(--button-system-ui-active-background-color);
+    --color: var(--button-system-ui-active-text-color);
+  }
+}
+
+.link-button-rtl {
+  .icon + .link-button-text-large:not(:empty) {
+    margin-left: 0;
+    margin-right: $button-spacer-large;
+  }
+
+  .icon + .link-button-text-medium:not(:empty) {
+    margin-left: 0;
+    margin-right: $button-spacer-medium;
+  }
+
+  .icon + .link-button-text-small:not(:empty) {
+    margin-left: 0;
+    margin-right: $button-spacer-small;
+  }
+
+  .inner-nudge {
+    &.background {
+      &:after {
+        animation-name: nudgeBackgroundAfterRtl;
+        background: linear-gradient(
+          to left,
+          transparent 0%,
+          var(--button-nudge-background-color-primary) 100%
+        );
+        left: unset;
+        right: -120%;
+        transform: rotate(-45deg);
+      }
+
+      &:before {
+        animation-name: nudgeBackgroundBeforeRtl;
+        background: linear-gradient(
+          to left,
+          transparent 0%,
+          var(--button-nudge-background-color-primary) 100%
+        );
+        left: unset;
+        right: -100%;
+        transform: rotate(-45deg);
+      }
+    }
+
+    &.conic {
+      &:before {
+        animation-name: nudgeConicRtl;
+      }
+
+      &:after {
+        left: unset;
+        right: $space-xxxs;
+      }
+    }
+
+    &.size {
+      overflow: visible;
+
+      &:after {
+        animation: $motion-duration-fast $motion-easing-easeinout 1 nudgeSize;
+        background: inherit;
+        border-radius: inherit;
+        content: '';
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 0;
+      }
+    }
+  }
+
+  &.link-button-secondary {
+    .inner-nudge {
+      &.background {
+        &:after {
+          background: linear-gradient(
+            to left,
+            transparent 0%,
+            var(--button-nudge-background-color-secondary) 100%
+          );
+        }
+
+        &:before {
+          background: linear-gradient(
+            to left,
+            transparent 0%,
+            var(--button-nudge-background-color-secondary) 100%
+          );
+        }
+      }
+
+      &.size {
+        &:after {
+          border-width: var(--button-secondary-border-width);
+          border-style: var(--button-secondary-border-style);
+          border-color: var(--button-secondary-border-color);
+        }
+      }
+    }
+  }
+
+  &.link-button-system-ui {
+    .inner-nudge {
+      &.background {
+        &:after {
+          background: linear-gradient(
+            to left,
+            transparent 0%,
+            var(--button-nudge-background-color-secondary) 100%
+          );
+        }
+
+        &:before {
+          background: linear-gradient(
+            to left,
+            transparent 0%,
+            var(--button-nudge-background-color-secondary) 100%
+          );
+        }
+      }
+    }
+  }
+
+  &.floating {
+    left: 40px;
+    right: unset;
+  }
+
+  .link-button-text-large {
+    &.counter {
+      margin-left: 0;
+      margin-right: $space-xs;
+    }
+  }
+
+  .link-button-text-medium {
+    &.counter {
+      margin-left: 0;
+      margin-right: $space-xs;
+    }
+  }
+
+  .link-button-text-small {
+    &.counter {
+      margin-left: 0;
+      margin-right: $space-xxs;
+    }
+  }
+}
+
+:global(.focus-visible) {
+  .link-button {
+    &.focus-visible,
+    &:focus-visible {
+      box-shadow: var(--focus-visible-box-shadow);
+
+      &.drop-shadow {
+        box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
+      }
+
+      .counter {
+        background-color: var(--button-counter-focus-background-color);
+      }
+    }
+
+    &.link-button-secondary {
+      &.focus-visible,
+      &:focus-visible {
+        border-color: var(--background-color);
+      }
+    }
+
+    &.link-button-secondary-disruptive {
+      &.focus-visible,
+      &:focus-visible {
+        color: var(--disruptive-color-80);
+      }
+    }
+
+    &.link-button-disruptive {
+      &.focus-visible,
+      &:focus-visible {
+        background-color: var(--disruptive-color-10);
+        color: var(--disruptive-color-80);
+      }
+    }
+
+    &.link-button-neutral {
+      &.focus-visible,
+      &:focus-visible {
+        background-color: var(--button-neutral-focus-visible-background-color);
+
+        &.drop-shadow {
+          box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
+        }
+      }
+    }
+
+    &.link-button-system-ui {
+      &.focus-visible,
+      &:focus-visible {
+        background-color: var(
+          --button-system-ui-focus-visible-background-color
+        );
+
+        &.drop-shadow {
+          box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
+        }
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+// Button Nudge animations
+@keyframes nudgeBackgroundAfter {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 140%;
+  }
+}
+
+@keyframes nudgeBackgroundBefore {
+  0% {
+    left: -120%;
+  }
+
+  100% {
+    left: 120%;
+  }
+}
+
+@keyframes nudgeBackgroundAfterRtl {
+  0% {
+    right: -100%;
+  }
+
+  100% {
+    right: 140%;
+  }
+}
+
+@keyframes nudgeBackgroundBeforeRtl {
+  0% {
+    right: -120%;
+  }
+
+  100% {
+    right: 120%;
+  }
+}
+
+@keyframes nudgeBounce {
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
+  }
+  40%,
+  43% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -30px, 0);
+  }
+  70% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -15px, 0);
+  }
+  90% {
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
+@keyframes nudgeConic {
+  from {
+    transform: translate(-50%, -50%) rotate(0);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes nudgeConicRtl {
+  from {
+    transform: translate(-50%, -50%) rotate(0);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
+
+@keyframes nudgeRingLarge {
+  0% {
+    width: 14px;
+    height: 14px;
+    opacity: 1;
+  }
+  100% {
+    width: 176px;
+    height: 176px;
+    opacity: 0;
+  }
+}
+
+@keyframes nudgeRingMedium {
+  0% {
+    width: 14px;
+    height: 14px;
+    opacity: 1;
+  }
+  100% {
+    width: 124px;
+    height: 124px;
+    opacity: 0;
+  }
+}
+
+@keyframes nudgeRingSmall {
+  0% {
+    width: 14px;
+    height: 14px;
+    opacity: 1;
+  }
+  100% {
+    width: 112px;
+    height: 112px;
+    opacity: 0;
+  }
+}
+
+@keyframes nudgeSize {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/components/OcBase/Base.types.ts b/src/components/OcBase/Base.types.ts
index 66bd38574..79dfa47ef 100644
--- a/src/components/OcBase/Base.types.ts
+++ b/src/components/OcBase/Base.types.ts
@@ -7,8 +7,13 @@ export interface OcBaseProps<T> extends HTMLAttributes<T> {
   classNames?: string;
   /**
    * Unique id used to target element for testing
+   * @deprecated Use 'data-testid' instead to better map to react testing library.
    */
   'data-test-id'?: string;
+  /**
+   * Unique id used to target element for testing
+   */
+  'data-testid'?: string;
   /**
    * The component ref
    */
diff --git a/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
index 2986279cb..fb6dd74bf 100644
--- a/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Pagination Pagination should render as dots 1`] = `
     <button
       aria-disabled="true"
       aria-label="Previous"
-      class="pagination-button pagination-previous button button-neutral button-medium icon-left disabled"
+      class="pagination-button pagination-previous button button-neutral button-medium disabled icon-left"
       disabled=""
     >
       <span
@@ -135,7 +135,7 @@ exports[`Pagination Pagination should render as simplified 1`] = `
     <button
       aria-disabled="true"
       aria-label="Previous"
-      class="pagination-button pagination-previous button button-neutral button-medium icon-left disabled"
+      class="pagination-button pagination-previous button button-neutral button-medium disabled icon-left"
       disabled=""
     >
       <span
@@ -208,7 +208,7 @@ exports[`Pagination Pagination should render normally 1`] = `
     <button
       aria-disabled="true"
       aria-label="Previous"
-      class="pagination-button pagination-previous button button-neutral button-medium icon-left disabled"
+      class="pagination-button pagination-previous button button-neutral button-medium disabled icon-left"
       disabled=""
     >
       <span
@@ -458,7 +458,7 @@ exports[`Pagination Pagination should render with all elements 1`] = `
     <button
       aria-disabled="true"
       aria-label="Next"
-      class="pagination-button pagination-next button button-neutral button-medium icon-left disabled"
+      class="pagination-button pagination-next button button-neutral button-medium disabled icon-left"
       disabled=""
     >
       <span
diff --git a/src/components/PersistentBar/PersistentBar.stories.tsx b/src/components/PersistentBar/PersistentBar.stories.tsx
index 07ae6cbdd..a0a545545 100644
--- a/src/components/PersistentBar/PersistentBar.stories.tsx
+++ b/src/components/PersistentBar/PersistentBar.stories.tsx
@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { PersistentBar, PersistentBarType } from './';
 import { IconName } from '../Icon';
 import { PaginationLayoutOptions } from '../Pagination';
-import { ButtonType } from '../Button';
+import { ButtonVariant, ButtonVariant as ButtonType } from '../Button';
 
 export default {
   title: 'Persistent Bar',
@@ -41,42 +41,17 @@ export default {
   },
 } as ComponentMeta<typeof PersistentBar>;
 
-const Bottom_Bar_With_Text_Story: ComponentStory<typeof PersistentBar> = (
-  args
-) => <PersistentBar {...args} />;
-
-export const BottomBarWithText = Bottom_Bar_With_Text_Story.bind({});
-
-const Bottom_Bar_Secondary_Buttons_Story: ComponentStory<
-  typeof PersistentBar
-> = (args) => <PersistentBar {...args} />;
-
-export const BottomBarSecondaryButtons =
-  Bottom_Bar_Secondary_Buttons_Story.bind({});
-
-const Bottom_Bar_Buttons_On_Left_Story: ComponentStory<typeof PersistentBar> = (
-  args
-) => <PersistentBar {...args} />;
-
-export const BottomBarButtonsOnLeft = Bottom_Bar_Buttons_On_Left_Story.bind({});
-
-const Top_Bar_Buttons_Story: ComponentStory<typeof PersistentBar> = (args) => (
+const Bar_Story: ComponentStory<typeof PersistentBar> = (args) => (
   <PersistentBar {...args} />
 );
 
-export const TopBarButtons = Top_Bar_Buttons_Story.bind({});
-
-const Top_Bar_With_Text_Story: ComponentStory<typeof PersistentBar> = (
-  args
-) => <PersistentBar {...args} />;
-
-export const TopBarWithText = Top_Bar_With_Text_Story.bind({});
-
-const Top_Bar_Pagination_Story: ComponentStory<typeof PersistentBar> = (
-  args
-) => <PersistentBar {...args} />;
-
-export const TopBarPagination = Top_Bar_Pagination_Story.bind({});
+export const BottomBarWithText = Bar_Story.bind({});
+export const BottomBarSecondaryButtons = Bar_Story.bind({});
+export const BottomBarButtonsOnLeft = Bar_Story.bind({});
+export const TopBarButtons = Bar_Story.bind({});
+export const TopBarButtonsLegacy = Bar_Story.bind({});
+export const TopBarWithText = Bar_Story.bind({});
+export const TopBarPagination = Bar_Story.bind({});
 
 const paginationArgs: Object = {
   classNames: 'my-pagination-class',
@@ -198,6 +173,73 @@ BottomBarButtonsOnLeft.args = {
 };
 
 TopBarButtons.args = {
+  ...persistentBarArgs,
+  buttonMenuProps: [
+    {
+      ariaLabel: 'Save Icon Button',
+      iconProps: { path: IconName.mdiBookmark },
+      id: 'myBookmarkButton',
+      text: null,
+      variant: ButtonVariant.Secondary,
+    },
+    {
+      ariaLabel: 'Secondary',
+      classNames: 'my-primary-btn-class',
+      'data-test-id': 'my-primary-btn-test-id',
+      iconProps: null,
+      id: 'myPrimaryButton',
+      text: 'Secondary',
+      variant: ButtonVariant.Secondary,
+    },
+    {
+      ariaLabel: 'Secondary',
+      classNames: 'my-primary-btn-class',
+      'data-test-id': 'my-primary-btn-test-id',
+      iconProps: null,
+      id: 'myPrimaryButton',
+      text: 'Secondary',
+      variant: ButtonVariant.Secondary,
+    },
+    {
+      ariaLabel: 'Secondary',
+      classNames: 'my-primary-btn-class',
+      'data-test-id': 'my-primary-btn-test-id',
+      iconProps: null,
+      id: 'myPrimaryButton',
+      text: 'Secondary',
+      variant: ButtonVariant.Secondary,
+    },
+    {
+      ariaLabel: 'Secondary',
+      classNames: 'my-primary-btn-class',
+      'data-test-id': 'my-primary-btn-test-id',
+      iconProps: null,
+      id: 'myPrimaryButton',
+      text: 'Secondary',
+      variant: ButtonVariant.Secondary,
+    },
+    {
+      ariaLabel: 'Secondary',
+      classNames: 'my-primary-btn-class',
+      'data-test-id': 'my-primary-btn-test-id',
+      iconProps: null,
+      id: 'myPrimaryButton',
+      text: 'Secondary',
+      variant: ButtonVariant.Secondary,
+    },
+    {
+      ariaLabel: 'Save Icon Button',
+      iconProps: { path: IconName.mdiDotsVertical },
+      id: 'myMenuButton',
+      text: null,
+      variant: ButtonVariant.Secondary,
+    },
+  ],
+  type: PersistentBarType.topBarButtons,
+};
+
+// TODO: Remove in Octuple v3.0.0
+TopBarButtonsLegacy.args = {
   ...persistentBarArgs,
   buttonMenuProps: [
     {
diff --git a/src/components/PersistentBar/PersistentBar.tsx b/src/components/PersistentBar/PersistentBar.tsx
index d4b58c831..5d51fd799 100644
--- a/src/components/PersistentBar/PersistentBar.tsx
+++ b/src/components/PersistentBar/PersistentBar.tsx
@@ -3,11 +3,11 @@ import { Icon, IconName } from '../Icon';
 import { PersistentBarsProps, PersistentBarType } from './PersistentBar.types';
 import { mergeClasses } from '../../shared/utilities';
 import {
+  ButtonProps,
+  ButtonVariant,
   PrimaryButton,
   DefaultButton,
   SecondaryButton,
-  ButtonType,
-  InternalButtonProps,
 } from '../Button';
 import { Pagination, PaginationLayoutOptions } from '../Pagination';
 import { useCanvasDirection } from '../../hooks/useCanvasDirection';
@@ -177,8 +177,11 @@ export const PersistentBar: FC<PersistentBarsProps> = React.forwardRef(
         role={role}
       >
         {buttonMenuProps &&
-          buttonMenuProps.map((button: InternalButtonProps) => {
-            if (button.type === ButtonType.Secondary) {
+          buttonMenuProps.map((button: ButtonProps) => {
+            if (
+              button.variant === ButtonVariant.Secondary ||
+              button.type === ButtonVariant.Secondary
+            ) {
               return (
                 <SecondaryButton iconProps={button.iconProps} {...button} />
               );
diff --git a/src/components/PersistentBar/PersistentBar.types.ts b/src/components/PersistentBar/PersistentBar.types.ts
index baac03cfd..c032abd3d 100644
--- a/src/components/PersistentBar/PersistentBar.types.ts
+++ b/src/components/PersistentBar/PersistentBar.types.ts
@@ -1,5 +1,5 @@
 import { IconName } from '../Icon';
-import { ButtonProps, InternalButtonProps } from '../Button';
+import { ButtonProps } from '../Button';
 import { OcBaseProps } from '../OcBase';
 
 export type CloseButtonProps = Omit<ButtonProps, 'onClick' | 'icon'>;
@@ -29,7 +29,7 @@ export interface PersistentBarsProps extends OcBaseProps<HTMLDivElement> {
   /**
    * Buttons to display on top bar
    */
-  buttonMenuProps?: Array<InternalButtonProps>;
+  buttonMenuProps?: Array<ButtonProps>;
   /**
    * If the persistent is closable or not
    */
diff --git a/src/components/Select/__snapshots__/Select.test.tsx.snap b/src/components/Select/__snapshots__/Select.test.tsx.snap
index 346ddc830..e22bf152e 100644
--- a/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`Select Renders with default value 1`] = `
                 />
                 <button
                   aria-disabled="false"
-                  class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
+                  class="icon-button right-icon button button-system-ui button-medium icon-left"
                   type="button"
                 >
                   <span
@@ -188,7 +188,7 @@ exports[`Select Renders with default values when multiple 1`] = `
                 />
                 <button
                   aria-disabled="false"
-                  class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
+                  class="icon-button right-icon button button-system-ui button-medium icon-left"
                   type="button"
                 >
                   <span
@@ -263,7 +263,7 @@ exports[`Select Renders without crashing 1`] = `
                 />
                 <button
                   aria-disabled="false"
-                  class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
+                  class="icon-button right-icon button button-system-ui button-medium icon-left"
                   type="button"
                 >
                   <span
@@ -337,7 +337,7 @@ exports[`Select Select is large 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="icon-button right-icon button button-system-ui transparent button-large icon-left"
+                class="icon-button right-icon button button-system-ui button-large icon-left"
                 type="button"
               >
                 <span
@@ -410,7 +410,7 @@ exports[`Select Select is medium 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
+                class="icon-button right-icon button button-system-ui button-medium icon-left"
                 type="button"
               >
                 <span
@@ -483,7 +483,7 @@ exports[`Select Select is pill shaped 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="icon-button right-icon button button-system-ui transparent button-medium round-shape icon-left"
+                class="icon-button right-icon button button-system-ui button-medium round-shape icon-left"
                 type="button"
               >
                 <span
@@ -556,7 +556,7 @@ exports[`Select Select is rectangle shaped 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
+                class="icon-button right-icon button button-system-ui button-medium icon-left"
                 type="button"
               >
                 <span
@@ -629,7 +629,7 @@ exports[`Select Select is small 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="icon-button right-icon button button-system-ui transparent button-small icon-left"
+                class="icon-button right-icon button button-system-ui button-small icon-left"
                 type="button"
               >
                 <span
@@ -702,7 +702,7 @@ exports[`Select Select is underline shaped 1`] = `
               />
               <button
                 aria-disabled="false"
-                class="icon-button right-icon button button-system-ui transparent button-medium icon-left"
+                class="icon-button right-icon button button-system-ui button-medium icon-left"
                 type="button"
               >
                 <span
diff --git a/src/octuple.ts b/src/octuple.ts
index 476bb362d..4df71542a 100644
--- a/src/octuple.ts
+++ b/src/octuple.ts
@@ -17,10 +17,11 @@ import {
 import { Badge } from './components/Badge';
 
 import {
+  Button,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
-  ButtonType,
+  ButtonVariant,
   ButtonWidth,
   ButtonIconAlign,
   DefaultButton,
@@ -81,6 +82,16 @@ import Layout from './components/Layout';
 
 import { Link } from './components/Link';
 
+import {
+  LinkButton,
+  LinkButtonIconAlign,
+  LinkButtonShape,
+  LinkButtonSize,
+  LinkButtonTextAlign,
+  LinkButtonVariant,
+  LinkButtonWidth,
+} from './components/LinkButton';
+
 import { List } from './components/List';
 
 import {
@@ -219,7 +230,7 @@ import { useBoolean } from './hooks/useBoolean';
 
 import { useCanvasDirection } from './hooks/useCanvasDirection';
 
-import { useMatchMedia } from './hooks/useMatchMedia';
+import { Breakpoints, useMatchMedia } from './hooks/useMatchMedia';
 
 import { useOnClickOutside } from './hooks/useOnClickOutside';
 
@@ -237,11 +248,14 @@ export {
   AvatarGroupVariant,
   AvatarPopupProps,
   Badge,
+  Breakpoints,
+  Button,
   ButtonIconAlign,
   ButtonShape,
   ButtonSize,
   ButtonTextAlign,
-  ButtonType,
+  ButtonVariant,
+  ButtonVariant as ButtonType, // TODO: Remove in Octuple v3.0.0, leave in for now to support legacy variant by <Tag /> implementations
   ButtonWidth,
   Card,
   CardSize,
@@ -286,6 +300,13 @@ export {
   LabelSize,
   Layout,
   Link,
+  LinkButton,
+  LinkButtonIconAlign,
+  LinkButtonShape,
+  LinkButtonSize,
+  LinkButtonTextAlign,
+  LinkButtonVariant,
+  LinkButtonWidth,
   List,
   Loader,
   LoaderSize,