From 512bb4384993f0d8878b2f2fef596d6a85f1626c Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Tue, 22 Oct 2024 16:16:29 -0400
Subject: [PATCH] feat(Link): implement link component (#953)

---
 .../src/components/breadcrumb/breadcrumb.tsx  |    2 +-
 .../components/buttons/abstract-button.tsx    |  144 --
 .../buttons/abstract/abstract-button.tsx      |   29 +
 .../src/components/buttons/abstract/styled.ts |   70 +
 .../src/components/buttons/abstract/types.ts  |    9 +
 .../components/buttons/button.test.tsx.snap   |   20 +-
 .../react/src/components/buttons/button.tsx   |   69 +-
 .../buttons/icon-button.test.tsx.snap         |    4 +-
 .../src/components/buttons/icon-button.tsx    |    6 +-
 .../react/src/components/buttons/index.ts     |    8 +
 .../src/components/buttons/search-button.tsx  |    2 +-
 .../react/src/components/buttons/styled.ts    |   88 ++
 .../react/src/components/buttons/types.ts     |   51 +
 .../date-picker/date-picker.test.tsx.snap     |   62 +-
 .../components/date-picker/date-picker.tsx    |    2 +-
 .../disclosure/disclosure.test.tsx.snap       |    4 +
 .../src/components/disclosure/disclosure.tsx  |    8 +-
 .../dropdown-menu-button.test.tsx.snap        |  124 +-
 .../dropdown-menu-button.tsx                  |    2 +-
 .../dropdown-navigation.tsx                   |    2 +-
 .../external-link/external-link.tsx           |    3 +
 packages/react/src/components/link/index.ts   |    1 +
 .../react/src/components/link/link.test.tsx   |  200 +++
 .../src/components/link/link.test.tsx.snap    | 1168 +++++++++++++++++
 packages/react/src/components/link/link.tsx   |   95 ++
 packages/react/src/components/link/styled.ts  |   91 ++
 packages/react/src/components/link/types.ts   |   50 +
 .../components/menu-button/menu-button.tsx    |    2 +-
 .../modal/dialog/modal-dialog.test.tsx.snap   |  584 +++------
 .../src/components/modal/modal.test.tsx.snap  |    8 +-
 .../password-input.test.tsx.snap              |   12 +-
 .../src/components/route-link/route-link.tsx  |    3 +
 .../search/search-input.test.tsx.snap         |    1 +
 .../src/components/search/search-input.tsx    |    2 +-
 .../src/components/skip-link/skip-link.tsx    |   10 +-
 .../src/components/tabs/tabs.test.tsx.snap    |  186 +--
 .../src/components/tag/tag.test.tsx.snap      |   12 +-
 .../toast/toast-container.test.tsx.snap       |    5 +
 .../toggletip/toggletip.test.tsx.snap         |    4 +
 .../user-profile/user-profile.test.tsx.snap   |  162 +--
 packages/react/src/index.ts                   |    4 +-
 .../themes/tokens/component/link-tokens.ts    |   19 +-
 .../stories/external-link.stories.tsx         |    2 +-
 packages/storybook/stories/link.mdx           |   17 +-
 packages/storybook/stories/link.stories.tsx   |  101 +-
 packages/storybook/stories/route-link.mdx     |   36 +
 .../storybook/stories/route-link.stories.tsx  |   28 +
 47 files changed, 2593 insertions(+), 919 deletions(-)
 delete mode 100755 packages/react/src/components/buttons/abstract-button.tsx
 create mode 100755 packages/react/src/components/buttons/abstract/abstract-button.tsx
 create mode 100644 packages/react/src/components/buttons/abstract/styled.ts
 create mode 100644 packages/react/src/components/buttons/abstract/types.ts
 create mode 100644 packages/react/src/components/buttons/index.ts
 create mode 100644 packages/react/src/components/buttons/styled.ts
 create mode 100644 packages/react/src/components/buttons/types.ts
 create mode 100644 packages/react/src/components/link/index.ts
 create mode 100644 packages/react/src/components/link/link.test.tsx
 create mode 100644 packages/react/src/components/link/link.test.tsx.snap
 create mode 100644 packages/react/src/components/link/link.tsx
 create mode 100644 packages/react/src/components/link/styled.ts
 create mode 100644 packages/react/src/components/link/types.ts
 create mode 100644 packages/storybook/stories/route-link.mdx
 create mode 100644 packages/storybook/stories/route-link.stories.tsx

diff --git a/packages/react/src/components/breadcrumb/breadcrumb.tsx b/packages/react/src/components/breadcrumb/breadcrumb.tsx
index cd699372c3..329ed5e3ad 100644
--- a/packages/react/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/react/src/components/breadcrumb/breadcrumb.tsx
@@ -2,7 +2,7 @@ import { KeyboardEvent, useCallback, useEffect, useRef, useState, VoidFunctionCo
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { eventIsInside } from '../../utils/events';
-import { IconButton } from '../buttons/icon-button';
+import { IconButton } from '../buttons';
 import { Icon } from '../icon/icon';
 import { NavList } from '../nav-list/nav-list';
 import { NavListOption } from '../nav-list/nav-list-option';
diff --git a/packages/react/src/components/buttons/abstract-button.tsx b/packages/react/src/components/buttons/abstract-button.tsx
deleted file mode 100755
index d3ec02e426..0000000000
--- a/packages/react/src/components/buttons/abstract-button.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { ButtonHTMLAttributes, forwardRef, PropsWithChildren, Ref } from 'react';
-import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
-import { focus } from '../../utils/css-state';
-
-type Size = 'small' | 'medium';
-
-const getButtonMinHeight = ({ isMobile, size }: { isMobile: boolean, size?: Size }): string => {
-    switch (size) {
-        case 'small':
-            return isMobile ? 'var(--size-3x)' : 'var(--size-1halfx)';
-        case 'medium':
-        default:
-            return isMobile ? 'var(--size-3x)' : 'var(--size-2x)';
-    }
-};
-
-const getButtonPadding = ({ isMobile, size }: { isMobile: boolean, size?: Size }): string => {
-    switch (size) {
-        case 'small':
-            return isMobile ? '0 var(--spacing-3x);' : '0 var(--spacing-1halfx);';
-        case 'medium':
-        default:
-            return isMobile ? '0 var(--spacing-3x);' : '0 var(--spacing-2x);';
-    }
-};
-
-export const defaultButtonStyles = css<{ $focusable?: boolean, isMobile: boolean, size?: Size }>`
-    align-items: center;
-    appearance: none;
-    background: inherit;
-    border: 1px solid;
-    border-radius: 1.5rem;
-    box-sizing: border-box;
-    color: inherit;
-    display: inline-flex;
-    font-family: inherit;
-    font-size: ${({ isMobile }) => (isMobile ? 0.875 : 0.75)}rem;
-    font-weight: var(--font-bold);
-    justify-content: center;
-    letter-spacing: ${({ isMobile }) => (isMobile ? 0.033125 : 0.025)}rem;
-    line-height: ${({ isMobile }) => (isMobile ? 1.5 : 1)}rem;
-    min-height: ${getButtonMinHeight};
-    min-width: 2rem;
-    outline: none;
-    padding: ${getButtonPadding};
-    text-transform: uppercase;
-    user-select: none;
-
-    ${(props) => props.$focusable !== false && focus};
-
-    > svg {
-        height: ${({ isMobile }) => (isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)')};
-        width: ${({ isMobile }) => (isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)')};
-    }
-`;
-
-interface AbstractButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    focusable?: boolean;
-    isMobile: boolean;
-    size?: Size;
-}
-
-const StyledButton = styled.button<{ $focusable?: boolean; isMobile: boolean; size?: Size }>`
-    ${defaultButtonStyles}
-`;
-
-export const AbstractButton = forwardRef<HTMLButtonElement, PropsWithChildren<AbstractButtonProps>>(({
-    children,
-    onClick,
-    focusable,
-    ...props
-}: AbstractButtonProps, ref: Ref<HTMLButtonElement>) => (
-    <StyledButton
-        $focusable={focusable}
-        onClick={onClick}
-        ref={ref}
-        tabIndex={focusable === false ? -1 : undefined}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {children}
-    </StyledButton>
-));
-
-AbstractButton.displayName = 'AbstractButton';
-
-export type ButtonType =
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'destructive-primary'
-    | 'destructive-secondary'
-    | 'destructive-tertiary';
-
-export interface ButtonTypeStyles {
-    buttonType: ButtonType;
-    focusable?: boolean;
-    inverted?: boolean;
-    theme: ResolvedTheme;
-}
-
-const getButtonStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>> = ({
-    focusable,
-    inverted,
-    buttonType,
-    theme,
-}) => {
-    const inversionSuffix = inverted ? '-inverted' : '';
-
-    return css`
-        background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-background-color`]};
-        border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-border-color`]};
-        color: ${theme.component[`button-${buttonType}${inversionSuffix}-text-color`]};
-
-        &:hover,
-        &[aria-expanded='true'] {
-            background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-background-color`]};
-            border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-border-color`]};
-            color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-text-color`]};
-        }
-
-        &[aria-disabled='true'] {
-            background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
-            border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
-            color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
-            cursor: not-allowed;
-            ${buttonType === 'destructive-primary' && css`
-                &,
-                ${focusable !== false && '&:focus,'}
-                &:hover {
-                    background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
-                    border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
-                    color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
-                }
-            `}
-        }
-    `;
-};
-
-export const getButtonTypeStyles: (props: ButtonTypeStyles) => FlattenInterpolation<ThemeProps<ResolvedTheme>> = (props) => css`
-    ${props.focusable !== false && focus(props, { inverted: props.inverted })};
-    ${getButtonStyles(props)};
-`;
diff --git a/packages/react/src/components/buttons/abstract/abstract-button.tsx b/packages/react/src/components/buttons/abstract/abstract-button.tsx
new file mode 100755
index 0000000000..fcdd7c91cd
--- /dev/null
+++ b/packages/react/src/components/buttons/abstract/abstract-button.tsx
@@ -0,0 +1,29 @@
+import { forwardRef, PropsWithChildren, Ref } from 'react';
+import { useDeviceContext } from '../../device-context-provider/device-context-provider';
+import { StyledAbstractButton } from './styled';
+import { AbstractButtonProps } from './types';
+
+export const AbstractButton = forwardRef<HTMLButtonElement, PropsWithChildren<AbstractButtonProps>>(({
+    children,
+    onClick,
+    focusable,
+    ...props
+}: AbstractButtonProps, ref: Ref<HTMLButtonElement>) => {
+    const { isMobile } = useDeviceContext();
+
+    return (
+        <StyledAbstractButton
+            $focusable={focusable}
+            $isMobile={isMobile}
+            onClick={onClick}
+            ref={ref}
+            tabIndex={focusable === false ? -1 : undefined}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        >
+            {children}
+        </StyledAbstractButton>
+    );
+});
+
+AbstractButton.displayName = 'AbstractButton';
diff --git a/packages/react/src/components/buttons/abstract/styled.ts b/packages/react/src/components/buttons/abstract/styled.ts
new file mode 100644
index 0000000000..03a392cbf3
--- /dev/null
+++ b/packages/react/src/components/buttons/abstract/styled.ts
@@ -0,0 +1,70 @@
+import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
+import { ResolvedTheme } from '../../../themes/theme';
+import { focus } from '../../../utils/css-state';
+import { Size } from './types';
+
+export interface BaseButtonStyles {
+    $size?: Size;
+    $isMobile: boolean;
+    $focusable?: boolean;
+    $inverted?: boolean;
+}
+
+function getButtonMinHeight({ $isMobile, $size }: BaseButtonStyles): string {
+    switch ($size) {
+        case 'small':
+            return $isMobile ? 'var(--size-3x)' : 'var(--size-1halfx)';
+        case 'medium':
+        default:
+            return $isMobile ? 'var(--size-3x)' : 'var(--size-2x)';
+    }
+}
+
+function getButtonPadding({ $isMobile, $size }: BaseButtonStyles): string {
+    switch ($size) {
+        case 'small':
+            return $isMobile ? '0 var(--spacing-3x);' : '0 var(--spacing-1halfx);';
+        case 'medium':
+        default:
+            return $isMobile ? '0 var(--spacing-3x);' : '0 var(--spacing-2x);';
+    }
+}
+
+export const getBaseButtonStyles = ({
+    $size,
+    $isMobile,
+    $focusable,
+    $inverted,
+}: BaseButtonStyles): FlattenInterpolation<ThemeProps<ResolvedTheme>> => css`
+    align-items: center;
+    appearance: none;
+    background: inherit;
+    border: 1px solid;
+    border-radius: 1.5rem;
+    box-sizing: border-box;
+    color: inherit;
+    display: inline-flex;
+    font-family: inherit;
+    font-size: ${$isMobile ? 0.875 : 0.75}rem;
+    font-weight: var(--font-bold);
+    justify-content: center;
+    letter-spacing: ${$isMobile ? 0.033125 : 0.025}rem;
+    line-height: ${$isMobile ? 1.5 : 1}rem;
+    min-height: ${getButtonMinHeight({ $isMobile, $size })};
+    min-width: 2rem;
+    outline: none;
+    padding: ${getButtonPadding({ $isMobile, $size })};
+    text-transform: uppercase;
+    user-select: none;
+
+    ${({ theme }) => $focusable !== false && focus({ theme }, { inverted: $inverted })};
+
+    > svg {
+        height: ${$isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)'};
+        width: ${$isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)'};
+    }
+`;
+
+export const StyledAbstractButton = styled.button<BaseButtonStyles>`
+    ${getBaseButtonStyles};
+`;
diff --git a/packages/react/src/components/buttons/abstract/types.ts b/packages/react/src/components/buttons/abstract/types.ts
new file mode 100644
index 0000000000..9eefb3ace9
--- /dev/null
+++ b/packages/react/src/components/buttons/abstract/types.ts
@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react';
+
+export type Size = 'small' | 'medium';
+
+export interface AbstractButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    focusable?: boolean;
+    isMobile: boolean;
+    size?: Size;
+}
diff --git a/packages/react/src/components/buttons/button.test.tsx.snap b/packages/react/src/components/buttons/button.test.tsx.snap
index 819eaa3dc4..4daeab1dc2 100644
--- a/packages/react/src/components/buttons/button.test.tsx.snap
+++ b/packages/react/src/components/buttons/button.test.tsx.snap
@@ -465,14 +465,6 @@ exports[`Button has left and right icons 1`] = `
   width: var(--size-1x);
 }
 
-.c2 {
-  margin-right: var(--spacing-1x);
-}
-
-.c3 {
-  margin-left: var(--spacing-1x);
-}
-
 .c1 {
   background-color: #006296;
   border-color: #006296;
@@ -504,6 +496,14 @@ exports[`Button has left and right icons 1`] = `
   cursor: not-allowed;
 }
 
+.c2 {
+  margin-right: var(--spacing-1x);
+}
+
+.c3 {
+  margin-left: var(--spacing-1x);
+}
+
 <button
   class="c0 c1"
   type="button"
@@ -1137,10 +1137,10 @@ exports[`Button has small styles 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/packages/react/src/components/buttons/button.tsx b/packages/react/src/components/buttons/button.tsx
index 2bb1103734..135501fea9 100644
--- a/packages/react/src/components/buttons/button.tsx
+++ b/packages/react/src/components/buttons/button.tsx
@@ -1,5 +1,4 @@
 import {
-    FocusEventHandler,
     forwardRef,
     KeyboardEvent,
     MouseEvent,
@@ -7,74 +6,10 @@ import {
     ReactElement,
     Ref,
 } from 'react';
-import styled from 'styled-components';
-import {
-    Icon,
-    IconName,
-} from '../icon/icon';
-import { Spinner } from '../spinner/spinner';
-import { ResolvedTheme } from '../../themes/theme';
 import { useTranslation } from '../../i18n/use-translation';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
-import { AbstractButton, ButtonType, getButtonTypeStyles } from './abstract-button';
-
-export type Size = 'small' | 'medium';
-
-export type Type = 'submit' | 'button' | 'reset';
-
-export interface ButtonProps {
-    id?: string;
-    autofocus?: boolean;
-    /**
-     * Visual style
-     * @default primary
-     */
-    buttonType: ButtonType;
-    className?: string;
-    disabled?: boolean;
-    /**
-     * @default true
-     */
-    focusable?: boolean;
-    inverted?: boolean;
-    label?: string;
-    loading?: boolean;
-    /**
-     * @default Loading...
-     */
-    loadingLabel?: string;
-    /**
-     * Size variant
-     * @default medium
-     */
-    size?: Size;
-    title?: string;
-    type?: Type;
-
-    leftIconName?: IconName;
-    rightIconName?: IconName;
-
-    onClick?(event: MouseEvent<HTMLButtonElement>): void;
-    onFocus?: FocusEventHandler<HTMLButtonElement>;
-    onBlur?: FocusEventHandler<HTMLButtonElement>;
-    onKeyDown?(event: KeyboardEvent<HTMLButtonElement>): void;
-}
-
-const StyledSpinner = styled(Spinner)`
-    margin-right: var(--spacing-1x);
-`;
-
-const LeftIcon = styled(Icon)`
-    margin-right: var(--spacing-1x);
-`;
-
-const RightIcon = styled(Icon)`
-    margin-left: var(--spacing-1x);
-`;
-
-const StyledButton = styled(AbstractButton)<{ theme: ResolvedTheme } & ButtonProps>`
-    ${getButtonTypeStyles}
-`;
+import { LeftIcon, RightIcon, StyledButton, StyledSpinner } from './styled';
+import { ButtonProps } from './types';
 
 export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(({
     autofocus,
diff --git a/packages/react/src/components/buttons/icon-button.test.tsx.snap b/packages/react/src/components/buttons/icon-button.test.tsx.snap
index 89ad69ce8a..7426791852 100644
--- a/packages/react/src/components/buttons/icon-button.test.tsx.snap
+++ b/packages/react/src/components/buttons/icon-button.test.tsx.snap
@@ -581,10 +581,10 @@ exports[`Icon Button Has small styles 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/packages/react/src/components/buttons/icon-button.tsx b/packages/react/src/components/buttons/icon-button.tsx
index aed8d009dc..cda8337cff 100644
--- a/packages/react/src/components/buttons/icon-button.tsx
+++ b/packages/react/src/components/buttons/icon-button.tsx
@@ -4,8 +4,10 @@ import { ResolvedTheme } from '../../themes/theme';
 import { AvatarProps } from '../avatar/avatar';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName, IconProps } from '../icon/icon';
-import { AbstractButton, getButtonTypeStyles } from './abstract-button';
-import { ButtonProps, Size } from './button';
+import { AbstractButton } from './abstract/abstract-button';
+import { Size } from './abstract/types';
+import { getButtonTypeStyles } from './styled';
+import { ButtonProps } from './types';
 
 export interface IconButtonProps extends ButtonProps {
     children?: ReactElement<IconProps | AvatarProps>;
diff --git a/packages/react/src/components/buttons/index.ts b/packages/react/src/components/buttons/index.ts
new file mode 100644
index 0000000000..5e82f51c0b
--- /dev/null
+++ b/packages/react/src/components/buttons/index.ts
@@ -0,0 +1,8 @@
+export { Size } from './abstract/types';
+export { ButtonProps, ButtonType, Type } from './types';
+export { getBaseButtonStyles } from './abstract/styled';
+export { getButtonTypeStyles, getButtonStyles } from './styled';
+export { AbstractButton } from './abstract/abstract-button';
+export { Button } from './button';
+export { SearchButton } from './search-button';
+export { IconButton } from './icon-button';
diff --git a/packages/react/src/components/buttons/search-button.tsx b/packages/react/src/components/buttons/search-button.tsx
index fd617922cd..8d5a51c288 100644
--- a/packages/react/src/components/buttons/search-button.tsx
+++ b/packages/react/src/components/buttons/search-button.tsx
@@ -1,7 +1,7 @@
 import { MouseEvent, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { Icon } from '../icon/icon';
-import { AbstractButton } from './abstract-button';
+import { AbstractButton } from './abstract/abstract-button';
 
 interface ButtonProps {
     className: string;
diff --git a/packages/react/src/components/buttons/styled.ts b/packages/react/src/components/buttons/styled.ts
new file mode 100644
index 0000000000..248451cd31
--- /dev/null
+++ b/packages/react/src/components/buttons/styled.ts
@@ -0,0 +1,88 @@
+import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
+import { ResolvedTheme } from '../../themes/theme';
+import { Icon } from '../icon/icon';
+import { Spinner } from '../spinner/spinner';
+import { AbstractButton } from './abstract/abstract-button';
+import { BaseButtonStyles, getBaseButtonStyles } from './abstract/styled';
+import { ButtonProps, ButtonType } from './types';
+import { focus } from '../../utils/css-state';
+
+interface ButtonTypeStyles {
+    buttonType: ButtonType;
+    focusable?: boolean;
+    inverted?: boolean;
+    theme: ResolvedTheme;
+}
+
+export function getButtonTypeStyles({
+    focusable,
+    inverted,
+    buttonType,
+    theme,
+}: ButtonTypeStyles): FlattenInterpolation<ThemeProps<ResolvedTheme>> {
+    const inversionSuffix = inverted ? '-inverted' : '';
+
+    return css`
+        ${focusable !== false && focus({ theme }, { inverted })};
+
+        background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-background-color`]};
+        border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-border-color`]};
+        color: ${theme.component[`button-${buttonType}${inversionSuffix}-text-color`]};
+
+        &:hover,
+        &[aria-expanded='true'] {
+            background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-background-color`]};
+            border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-border-color`]};
+            color: ${theme.component[`button-${buttonType}${inversionSuffix}-hover-text-color`]};
+        }
+
+        &[aria-disabled='true'] {
+            background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
+            border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
+            color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
+            cursor: not-allowed;
+            ${buttonType === 'destructive-primary' && css`
+                &,
+                ${focusable !== false && '&:focus,'}
+                &:hover {
+                    background-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-background-color`]};
+                    border-color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-border-color`]};
+                    color: ${theme.component[`button-${buttonType}${inversionSuffix}-disabled-text-color`]};
+                }
+            `}
+        }
+    `;
+}
+
+interface ButtonStylesProps extends ButtonTypeStyles, BaseButtonStyles {}
+
+export const getButtonStyles = ({
+    buttonType, inverted, focusable, $size, $isMobile, theme,
+}: ButtonStylesProps): FlattenInterpolation<ThemeProps<ResolvedTheme>> => css`
+    ${getBaseButtonStyles({
+        $size,
+        $isMobile,
+        $focusable: focusable,
+        $inverted: inverted,
+    })};
+
+    ${getButtonTypeStyles({
+        buttonType, inverted, focusable, theme,
+    })};
+`;
+
+export const StyledButton = styled(AbstractButton)<{ theme: ResolvedTheme } & ButtonProps>`
+    ${getButtonTypeStyles}
+`;
+
+export const StyledSpinner = styled(Spinner)`
+    margin-right: var(--spacing-1x);
+`;
+
+export const LeftIcon = styled(Icon)`
+    margin-right: var(--spacing-1x);
+`;
+
+export const RightIcon = styled(Icon)`
+    margin-left: var(--spacing-1x);
+`;
diff --git a/packages/react/src/components/buttons/types.ts b/packages/react/src/components/buttons/types.ts
new file mode 100644
index 0000000000..9ab8686521
--- /dev/null
+++ b/packages/react/src/components/buttons/types.ts
@@ -0,0 +1,51 @@
+import { FocusEventHandler, MouseEventHandler, KeyboardEventHandler } from 'react';
+import { IconName } from '../icon/icon';
+import { Size } from './abstract/types';
+
+export type Type = 'submit' | 'button' | 'reset';
+
+export type ButtonType =
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'destructive-primary'
+    | 'destructive-secondary'
+    | 'destructive-tertiary';
+
+export interface ButtonProps {
+    id?: string;
+    autofocus?: boolean;
+    /**
+     * Visual style
+     * @default primary
+     */
+    buttonType: ButtonType;
+    className?: string;
+    disabled?: boolean;
+    /**
+     * @default true
+     */
+    focusable?: boolean;
+    inverted?: boolean;
+    label?: string;
+    loading?: boolean;
+    /**
+     * @default Loading...
+     */
+    loadingLabel?: string;
+    /**
+     * Size variant
+     * @default medium
+     */
+    size?: Size;
+    title?: string;
+    type?: Type;
+
+    leftIconName?: IconName;
+    rightIconName?: IconName;
+
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onFocus?: FocusEventHandler<HTMLButtonElement>;
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+}
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index d308bfff08..5021383a12 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -3713,6 +3713,37 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
   width: var(--size-1x);
 }
 
+.c18 {
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
+}
+
+.c18 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c18:focus {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+.c18:hover,
+.c18[aria-expanded='true'] {
+  background-color: transparent;
+  border-color: #003A5A;
+  color: #003A5A;
+}
+
+.c18[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: #84C6EA;
+  color: #84C6EA;
+  cursor: not-allowed;
+}
+
 .c8 {
   background-color: transparent;
   border-color: transparent;
@@ -3751,37 +3782,6 @@ exports[`Datepicker matches snapshot (open, hasTodayButton) 1`] = `
   width: var(--size-1x);
 }
 
-.c18 {
-  background-color: transparent;
-  border-color: #006296;
-  color: #006296;
-}
-
-.c18 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c18:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c18:hover,
-.c18[aria-expanded='true'] {
-  background-color: transparent;
-  border-color: #003A5A;
-  color: #003A5A;
-}
-
-.c18[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: #84C6EA;
-  color: #84C6EA;
-  cursor: not-allowed;
-}
-
 .c2 {
   color: #1B1C1E;
   display: block;
diff --git a/packages/react/src/components/date-picker/date-picker.tsx b/packages/react/src/components/date-picker/date-picker.tsx
index 2efc785515..f1bf92e77b 100644
--- a/packages/react/src/components/date-picker/date-picker.tsx
+++ b/packages/react/src/components/date-picker/date-picker.tsx
@@ -23,7 +23,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { eventIsInside } from '../../utils/events';
 import { v4 as uuid } from '../../utils/uuid';
-import { AbstractButton } from '../buttons/abstract-button';
+import { AbstractButton } from '../buttons/abstract/abstract-button';
 import { Button } from '../buttons/button';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
diff --git a/packages/react/src/components/disclosure/disclosure.test.tsx.snap b/packages/react/src/components/disclosure/disclosure.test.tsx.snap
index 2b6509b2f2..c3f6ba5a8e 100644
--- a/packages/react/src/components/disclosure/disclosure.test.tsx.snap
+++ b/packages/react/src/components/disclosure/disclosure.test.tsx.snap
@@ -148,6 +148,7 @@ exports[`Disclosure Button matches the snapshot when collapsed 1`] = `
           >
             <styled.button
               $focusable={true}
+              $isMobile={false}
               aria-controls="idContent"
               aria-expanded={false}
               buttonType="primary"
@@ -337,6 +338,7 @@ exports[`Disclosure Button matches the snapshot when expanded 1`] = `
           >
             <styled.button
               $focusable={true}
+              $isMobile={false}
               aria-controls="idContent"
               aria-expanded={true}
               buttonType="primary"
@@ -537,6 +539,7 @@ exports[`Disclosure IconButton matches the snapshot when collapsed 1`] = `
           >
             <styled.button
               $focusable={true}
+              $isMobile={false}
               aria-controls="idContent"
               aria-expanded={false}
               aria-label="disclose content"
@@ -751,6 +754,7 @@ exports[`Disclosure IconButton matches the snapshot when expanded 1`] = `
           >
             <styled.button
               $focusable={true}
+              $isMobile={false}
               aria-controls="idContent"
               aria-expanded={true}
               aria-label="disclose content"
diff --git a/packages/react/src/components/disclosure/disclosure.tsx b/packages/react/src/components/disclosure/disclosure.tsx
index 410a926361..8ae06a3a46 100644
--- a/packages/react/src/components/disclosure/disclosure.tsx
+++ b/packages/react/src/components/disclosure/disclosure.tsx
@@ -1,8 +1,12 @@
 import { FunctionComponent, PropsWithChildren, useState } from 'react';
 import styled from 'styled-components';
 import { useId } from '../../hooks/use-id';
-import { Button, ButtonProps, Size } from '../buttons/button';
-import { IconButton } from '../buttons/icon-button';
+import {
+    Size,
+    Button,
+    IconButton,
+    ButtonProps,
+} from '../buttons';
 import { IconName } from '../icon/icon';
 
 export type ButtonPropsWithoutOnClick = Omit<ButtonProps, 'onClick'> & {
diff --git a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
index 44b869b82a..48cb7c919a 100644
--- a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
+++ b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.test.tsx.snap
@@ -57,6 +57,37 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
   width: var(--size-1x);
 }
 
+.c2 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #FFFFFF;
+}
+
+.c2 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c2:focus {
+  box-shadow: 0 0 0 2px #84C6EA;
+  outline: 2px solid #006296;
+  outline-offset: -2px;
+}
+
+.c2:hover,
+.c2[aria-expanded='true'] {
+  background-color: rgb(0 0 0 / 0.5);
+  border-color: transparent;
+  color: #FFFFFF;
+}
+
+.c2[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #006296;
+  cursor: not-allowed;
+}
+
 .c13 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -351,37 +382,6 @@ exports[`DropdownMenuButton Matches Snapshot (defaultOpen) 1`] = `
   pointer-events: none;
 }
 
-.c2 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #FFFFFF;
-}
-
-.c2 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c2:focus {
-  box-shadow: 0 0 0 2px #84C6EA;
-  outline: 2px solid #006296;
-  outline-offset: -2px;
-}
-
-.c2:hover,
-.c2[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.5);
-  border-color: transparent;
-  color: #FFFFFF;
-}
-
-.c2[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: transparent;
-  color: #006296;
-  cursor: not-allowed;
-}
-
 .c5 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
@@ -720,6 +720,37 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
   width: var(--size-1x);
 }
 
+.c2 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #FFFFFF;
+}
+
+.c2 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c2:focus {
+  box-shadow: 0 0 0 2px #84C6EA;
+  outline: 2px solid #006296;
+  outline-offset: -2px;
+}
+
+.c2:hover,
+.c2[aria-expanded='true'] {
+  background-color: rgb(0 0 0 / 0.5);
+  border-color: transparent;
+  color: #FFFFFF;
+}
+
+.c2[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #006296;
+  cursor: not-allowed;
+}
+
 .c13 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1014,37 +1045,6 @@ exports[`DropdownMenuButton Matches Snapshot 1`] = `
   pointer-events: none;
 }
 
-.c2 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #FFFFFF;
-}
-
-.c2 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c2:focus {
-  box-shadow: 0 0 0 2px #84C6EA;
-  outline: 2px solid #006296;
-  outline-offset: -2px;
-}
-
-.c2:hover,
-.c2[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.5);
-  border-color: transparent;
-  color: #FFFFFF;
-}
-
-.c2[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: transparent;
-  color: #006296;
-  cursor: not-allowed;
-}
-
 .c5 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
diff --git a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx
index 8bc690f5e1..14287507b2 100644
--- a/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx
+++ b/packages/react/src/components/dropdown-menu-button/dropdown-menu-button.tsx
@@ -17,9 +17,9 @@ import { getRootDocument } from '../../utils/dom';
 import { eventIsInside } from '../../utils/events';
 import { v4 as uuid } from '../../utils/uuid';
 import { AvatarProps } from '../avatar/avatar';
-import { ButtonType } from '../buttons/abstract-button';
 import { Button } from '../buttons/button';
 import { IconButton } from '../buttons/icon-button';
+import { ButtonType } from '../buttons/types';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { DropdownMenu } from '../dropdown-menu/dropdown-menu';
 import { GroupItemProps } from '../dropdown-menu/list-items';
diff --git a/packages/react/src/components/dropdown-navigation/dropdown-navigation.tsx b/packages/react/src/components/dropdown-navigation/dropdown-navigation.tsx
index 4cf5b0b901..8138f08130 100644
--- a/packages/react/src/components/dropdown-navigation/dropdown-navigation.tsx
+++ b/packages/react/src/components/dropdown-navigation/dropdown-navigation.tsx
@@ -16,9 +16,9 @@ import { menuDimensions } from '../../legacy-constants/menuDimensions';
 import { getRootDocument } from '../../utils/dom';
 import { eventIsInside } from '../../utils/events';
 import { v4 as uuid } from '../../utils/uuid';
-import { ButtonType } from '../buttons/abstract-button';
 import { Button } from '../buttons/button';
 import { IconButton } from '../buttons/icon-button';
+import { ButtonType } from '../buttons/types';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName } from '../icon/icon';
 import { NavList } from '../nav-list/nav-list';
diff --git a/packages/react/src/components/external-link/external-link.tsx b/packages/react/src/components/external-link/external-link.tsx
index 2361c08df6..f47781d3fc 100644
--- a/packages/react/src/components/external-link/external-link.tsx
+++ b/packages/react/src/components/external-link/external-link.tsx
@@ -48,6 +48,9 @@ export interface ExternalLinkProps {
     onClick?(event: MouseEvent<Element, globalThis.MouseEvent>): void;
 }
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases. Use Link instead.
+ */
 export const ExternalLink: VoidFunctionComponent<ExternalLinkProps> = ({
     className,
     disabled,
diff --git a/packages/react/src/components/link/index.ts b/packages/react/src/components/link/index.ts
new file mode 100644
index 0000000000..63b88256ef
--- /dev/null
+++ b/packages/react/src/components/link/index.ts
@@ -0,0 +1 @@
+export { Link } from './link';
diff --git a/packages/react/src/components/link/link.test.tsx b/packages/react/src/components/link/link.test.tsx
new file mode 100644
index 0000000000..8cb491ad40
--- /dev/null
+++ b/packages/react/src/components/link/link.test.tsx
@@ -0,0 +1,200 @@
+import { act } from 'react-dom/test-utils';
+import { Link as RouteLink, NavLink } from 'react-router-dom';
+import { mountWithProviders, renderWithProviders } from '../../test-utils/renderer';
+import { Link } from './link';
+
+describe('Link Component', () => {
+    describe('Features', () => {
+        it('internal link is valid and updates dynamically ', () => {
+            const wrapper = mountWithProviders(<Link href="/internal-page" />);
+
+            expect(wrapper.find('a').prop('href')).toBe('/internal-page');
+        });
+
+        it('external link is valid', () => {
+            const wrapper = mountWithProviders(<Link external href="https://example.com" />);
+
+            expect(wrapper.find('a').prop('href')).toBe('https://example.com');
+            expect(wrapper.find('a').prop('target')).toBe('_blank');
+            expect(wrapper.find('a').prop('rel')).toContain('noopener noreferrer');
+        });
+
+        it('renders icon', () => {
+            const wrapper = mountWithProviders(<Link icon={{ name: 'mail', label: 'This is a label' }}>Label</Link>);
+
+            expect(wrapper.find('Icon').prop('name')).toBe('mail');
+        });
+
+        it('renders tooltip isIconOnly is provided', () => {
+            const tooltipWrapper = mountWithProviders(<Link icon={{ name: 'mail', label: 'Test Label' }} />);
+
+            expect(tooltipWrapper.find('Tooltip').prop('label')).toBe('Test Label');
+            expect(tooltipWrapper.find('Icon').exists()).toBe(true);
+        });
+
+        it('renders children when provided', () => {
+            const childrenWrapper = mountWithProviders(<Link><div className="test-child">Child Content</div></Link>);
+
+            expect(childrenWrapper.contains(<div className="test-child">Child Content</div>)).toBe(true);
+        });
+
+        it('renders NavLink when routerLink prop is NavLink', () => {
+            const wrapper = mountWithProviders(<Link routerLink={NavLink} href="/internal-page" />);
+
+            expect(wrapper.find(NavLink).exists()).toBe(true);
+            expect(wrapper.find(NavLink).prop('to')).toBe('/internal-page');
+        });
+
+        it('renders RouteLink when routerLink prop is RouteLink', () => {
+            const routeLinkWrapper = mountWithProviders(<Link routerLink={RouteLink} href="/internal-route" />);
+
+            expect(routeLinkWrapper.find(RouteLink).exists()).toBe(true);
+            expect(routeLinkWrapper.find(NavLink).exists()).toBe(false);
+            expect(routeLinkWrapper.find(RouteLink).prop('to')).toBe('/internal-route');
+        });
+
+        it('calls onClick callback when clicked', () => {
+            const onClickMock = jest.fn();
+            const wrapper = mountWithProviders(<Link href="/test" onClick={onClickMock} />);
+
+            wrapper.find('a').simulate('click');
+
+            expect(wrapper.find('a').prop('href')).toBeDefined();
+            expect(onClickMock).toHaveBeenCalledTimes(1);
+        });
+
+        it('prevent onClick callback when disabled', () => {
+            const onClickMock = jest.fn();
+            const wrapper = mountWithProviders(<Link href="/test" onClick={onClickMock} />);
+
+            wrapper.find('a').simulate('click');
+            act(() => {
+                wrapper.setProps({ disabled: true });
+            });
+            wrapper.find('a').simulate('click');
+
+            expect(wrapper.find('a').prop('href')).toBeUndefined();
+            expect(onClickMock).toHaveBeenCalledTimes(1);
+        });
+
+        it('updates dynamically ', () => {
+            const wrapper = mountWithProviders(<Link href="/internal-page" />);
+
+            act(() => {
+                wrapper.setProps({ href: '/updated-page' });
+                wrapper.setProps({ icon: { name: 'bell', label: 'This is a label' } });
+            });
+
+            expect(wrapper.find('a').prop('href')).toBe('/updated-page');
+            expect(wrapper.find('Icon').prop('name')).toBe('bell');
+        });
+    });
+
+    describe('Styling', () => {
+        test('matches default snapshot', () => {
+            const tree = mountWithProviders(<Link />);
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('matches with children snapshot', () => {
+            const tree = mountWithProviders(
+                <Link><span>Test</span></Link>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('matches icon and label snapshot', () => {
+            const tree = renderWithProviders(
+                <Link
+                    href="/test"
+                    icon={{ name: 'mail', label: 'This is a label' }}
+                >
+                    Navigation Link
+                </Link>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('matches icon only snapshot', () => {
+            const tree = renderWithProviders(
+                <Link icon={{ name: 'mail', label: 'Navigation Link' }} />,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('matches external link snapshot', () => {
+            const tree = renderWithProviders(
+                <Link href="/test" external>Navigation Link</Link>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('matches button link snapshot', () => {
+            const tree = renderWithProviders(
+                <Link
+                    routerLink={NavLink}
+                    href="/test"
+                    button={{
+                        buttonType: 'secondary',
+                    }}
+                >
+                    Navigation Link
+                </Link>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('matches disabled snapshot', () => {
+            const tree = renderWithProviders(
+                <Link href="/test" disabled>
+                    Navigation Link
+                </Link>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('matches NavLink snapshot', () => {
+            const tree = mountWithProviders(
+                <Link routerLink={NavLink} href="/test">Navigation Link</Link>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+
+        test('matches RouteLink snapshot', () => {
+            const tree = mountWithProviders(
+                <Link routerLink={RouteLink} href="/test">Navigation Link</Link>,
+            );
+
+            expect(tree).toMatchSnapshot();
+        });
+    });
+
+    describe('Accessibility', () => {
+        it('applies aria-disabled when link is disabled', () => {
+            const wrapper = mountWithProviders(<Link disabled />);
+
+            expect(wrapper.find('a').prop('aria-disabled')).toBe('true');
+        });
+
+        it('displays screen-reader-only text only when external && target="_blank"', () => {
+            const wrapper = mountWithProviders(<Link external target='none' />);
+
+            expect(wrapper.find('ScreenReaderOnlyText').exists()).toBe(false);
+
+            act(() => {
+                wrapper.setProps({ external: true, target: '_blank' });
+            });
+
+            expect(wrapper.find('ScreenReaderOnlyText').exists()).toBe(true);
+            expect(wrapper.find('ScreenReaderOnlyText').text()).toContain('opens in a new tab');
+        });
+    });
+});
diff --git a/packages/react/src/components/link/link.test.tsx.snap b/packages/react/src/components/link/link.test.tsx.snap
new file mode 100644
index 0000000000..bb280205b0
--- /dev/null
+++ b/packages/react/src/components/link/link.test.tsx.snap
@@ -0,0 +1,1168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link Component Styling matches NavLink snapshot 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  color: #006296;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.0125rem;
+  -moz-letter-spacing: 0.0125rem;
+  -ms-letter-spacing: 0.0125rem;
+  letter-spacing: 0.0125rem;
+  line-height: 1.25rem;
+  padding: 0 var(--spacing-half);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: var(--spacing-half);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 svg {
+  color: #006296;
+  height: 1rem;
+  width: 1rem;
+}
+
+.c0[visited],
+.c0:visited {
+  color: #602FA0;
+}
+
+.c0[visited] svg,
+.c0:visited svg {
+  color: #602FA0;
+}
+
+.c0[hover],
+.c0:hover {
+  color: #003A5A;
+}
+
+.c0[hover] svg,
+.c0:hover svg {
+  color: #003A5A;
+}
+
+.c0[disabled],
+.c0[aria-disabled='true'],
+.c0:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus-visible {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<Link
+  href="/test"
+  routerLink={
+    {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    }
+  }
+>
+  <styled.a
+    $disabled={false}
+    $isMobile={false}
+    aria-disabled="false"
+    as={
+      {
+        "$$typeof": Symbol(react.forward_ref),
+        "render": [Function],
+      }
+    }
+    data-testid="link"
+    href="/test"
+    id="uuid1"
+    onClick={[Function]}
+    tabIndex={0}
+    to="/test"
+  >
+    <NavLink
+      aria-disabled="false"
+      className="c0"
+      data-testid="link"
+      href="/test"
+      id="uuid1"
+      onClick={[Function]}
+      tabIndex={0}
+      to="/test"
+    >
+      <Link
+        aria-disabled="false"
+        className="c0"
+        data-testid="link"
+        href="/test"
+        id="uuid1"
+        onClick={[Function]}
+        tabIndex={0}
+        to="/test"
+      >
+        <a
+          aria-disabled="false"
+          className="c0"
+          data-testid="link"
+          href="/test"
+          id="uuid1"
+          onClick={[Function]}
+          tabIndex={0}
+        >
+          Navigation Link
+        </a>
+      </Link>
+    </NavLink>
+  </styled.a>
+</Link>
+`;
+
+exports[`Link Component Styling matches RouteLink snapshot 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  color: #006296;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.0125rem;
+  -moz-letter-spacing: 0.0125rem;
+  -ms-letter-spacing: 0.0125rem;
+  letter-spacing: 0.0125rem;
+  line-height: 1.25rem;
+  padding: 0 var(--spacing-half);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: var(--spacing-half);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 svg {
+  color: #006296;
+  height: 1rem;
+  width: 1rem;
+}
+
+.c0[visited],
+.c0:visited {
+  color: #602FA0;
+}
+
+.c0[visited] svg,
+.c0:visited svg {
+  color: #602FA0;
+}
+
+.c0[hover],
+.c0:hover {
+  color: #003A5A;
+}
+
+.c0[hover] svg,
+.c0:hover svg {
+  color: #003A5A;
+}
+
+.c0[disabled],
+.c0[aria-disabled='true'],
+.c0:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus-visible {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<Link
+  href="/test"
+  routerLink={
+    {
+      "$$typeof": Symbol(react.forward_ref),
+      "render": [Function],
+    }
+  }
+>
+  <styled.a
+    $disabled={false}
+    $isMobile={false}
+    aria-disabled="false"
+    as={
+      {
+        "$$typeof": Symbol(react.forward_ref),
+        "render": [Function],
+      }
+    }
+    data-testid="link"
+    href="/test"
+    id="uuid1"
+    onClick={[Function]}
+    tabIndex={0}
+    to="/test"
+  >
+    <Link
+      aria-disabled="false"
+      className="c0"
+      data-testid="link"
+      href="/test"
+      id="uuid1"
+      onClick={[Function]}
+      tabIndex={0}
+      to="/test"
+    >
+      <a
+        aria-disabled="false"
+        className="c0"
+        data-testid="link"
+        href="/test"
+        id="uuid1"
+        onClick={[Function]}
+        tabIndex={0}
+      >
+        Navigation Link
+      </a>
+    </Link>
+  </styled.a>
+</Link>
+`;
+
+exports[`Link Component Styling matches button link snapshot 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: inherit;
+  border: 1px solid;
+  border-radius: 1.5rem;
+  box-sizing: border-box;
+  color: inherit;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: var(--font-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-letter-spacing: 0.025rem;
+  -moz-letter-spacing: 0.025rem;
+  -ms-letter-spacing: 0.025rem;
+  letter-spacing: 0.025rem;
+  line-height: 1rem;
+  min-height: var(--size-2x);
+  min-width: 2rem;
+  outline: none;
+  padding: 0 var(--spacing-2x);
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border-color: #006296;
+  color: #006296;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: var(--spacing-1x);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+.c0 > svg {
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+.c0:hover,
+.c0[aria-expanded='true'] {
+  background-color: transparent;
+  border-color: #003A5A;
+  color: #003A5A;
+}
+
+.c0[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: #84C6EA;
+  color: #84C6EA;
+  cursor: not-allowed;
+}
+
+<a
+  aria-disabled="false"
+  class="c0"
+  data-testid="link"
+  href="/test"
+  id="uuid1"
+  tabindex="0"
+>
+  Navigation Link
+</a>
+`;
+
+exports[`Link Component Styling matches default snapshot 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  color: #006296;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.0125rem;
+  -moz-letter-spacing: 0.0125rem;
+  -ms-letter-spacing: 0.0125rem;
+  letter-spacing: 0.0125rem;
+  line-height: 1.25rem;
+  padding: 0 var(--spacing-half);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: var(--spacing-half);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 svg {
+  color: #006296;
+  height: 1rem;
+  width: 1rem;
+}
+
+.c0[visited],
+.c0:visited {
+  color: #602FA0;
+}
+
+.c0[visited] svg,
+.c0:visited svg {
+  color: #602FA0;
+}
+
+.c0[hover],
+.c0:hover {
+  color: #003A5A;
+}
+
+.c0[hover] svg,
+.c0:hover svg {
+  color: #003A5A;
+}
+
+.c0[disabled],
+.c0[aria-disabled='true'],
+.c0:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus-visible {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<Link>
+  <styled.a
+    $disabled={false}
+    $isMobile={false}
+    aria-disabled="false"
+    data-testid="link"
+    href="#"
+    id="uuid1"
+    onClick={[Function]}
+    tabIndex={0}
+    to="#"
+  >
+    <a
+      aria-disabled="false"
+      className="c0"
+      data-testid="link"
+      href="#"
+      id="uuid1"
+      onClick={[Function]}
+      tabIndex={0}
+      to="#"
+    />
+  </styled.a>
+</Link>
+`;
+
+exports[`Link Component Styling matches disabled snapshot 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  color: #006296;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.0125rem;
+  -moz-letter-spacing: 0.0125rem;
+  -ms-letter-spacing: 0.0125rem;
+  letter-spacing: 0.0125rem;
+  line-height: 1.25rem;
+  padding: 0 var(--spacing-half);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: var(--spacing-half);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 svg {
+  color: #006296;
+  height: 1rem;
+  width: 1rem;
+}
+
+.c0[visited],
+.c0:visited {
+  color: #602FA0;
+}
+
+.c0[visited] svg,
+.c0:visited svg {
+  color: #602FA0;
+}
+
+.c0[hover],
+.c0:hover {
+  color: #003A5A;
+}
+
+.c0[hover] svg,
+.c0:hover svg {
+  color: #003A5A;
+}
+
+.c0[disabled],
+.c0[aria-disabled='true'],
+.c0:disabled {
+  color: #8FCEF0;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0[disabled] svg,
+.c0[aria-disabled='true'] svg,
+.c0:disabled svg {
+  color: #8FCEF0;
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus-visible {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<a
+  aria-disabled="true"
+  class="c0"
+  data-testid="link"
+  id="uuid1"
+  tabindex="-1"
+  to="/test"
+>
+  Navigation Link
+</a>
+`;
+
+exports[`Link Component Styling matches external link snapshot 1`] = `
+.c1 {
+  border: 0;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  color: #006296;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.0125rem;
+  -moz-letter-spacing: 0.0125rem;
+  -ms-letter-spacing: 0.0125rem;
+  letter-spacing: 0.0125rem;
+  line-height: 1.25rem;
+  padding: 0 var(--spacing-half);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: var(--spacing-half);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 svg {
+  color: #006296;
+  height: 1rem;
+  width: 1rem;
+}
+
+.c0[visited],
+.c0:visited {
+  color: #602FA0;
+}
+
+.c0[visited] svg,
+.c0:visited svg {
+  color: #602FA0;
+}
+
+.c0[hover],
+.c0:hover {
+  color: #003A5A;
+}
+
+.c0[hover] svg,
+.c0:hover svg {
+  color: #003A5A;
+}
+
+.c0[disabled],
+.c0[aria-disabled='true'],
+.c0:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus-visible {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<a
+  aria-disabled="false"
+  class="c0"
+  data-testid="link"
+  href="/test"
+  id="uuid1"
+  rel="noopener noreferrer"
+  tabindex="0"
+  target="_blank"
+>
+  Navigation Link
+  <svg
+    aria-hidden="true"
+    color="currentColor"
+    data-testid="external-link-icon"
+    focusable="false"
+    height="16"
+    role="img"
+    width="16"
+  />
+  <span
+    class="c1"
+    data-testid="screen-reader-text"
+  >
+    (opens in a new tab)
+  </span>
+</a>
+`;
+
+exports[`Link Component Styling matches icon and label snapshot 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  color: #006296;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.0125rem;
+  -moz-letter-spacing: 0.0125rem;
+  -ms-letter-spacing: 0.0125rem;
+  letter-spacing: 0.0125rem;
+  line-height: 1.25rem;
+  padding: 0 var(--spacing-half);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: var(--spacing-half);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 svg {
+  color: #006296;
+  height: 1rem;
+  width: 1rem;
+}
+
+.c0[visited],
+.c0:visited {
+  color: #602FA0;
+}
+
+.c0[visited] svg,
+.c0:visited svg {
+  color: #602FA0;
+}
+
+.c0[hover],
+.c0:hover {
+  color: #003A5A;
+}
+
+.c0[hover] svg,
+.c0:hover svg {
+  color: #003A5A;
+}
+
+.c0[disabled],
+.c0[aria-disabled='true'],
+.c0:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus-visible {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<a
+  aria-disabled="false"
+  class="c0"
+  data-testid="link"
+  href="/test"
+  id="uuid1"
+  tabindex="0"
+  to="/test"
+>
+  <svg
+    aria-hidden="true"
+    color="currentColor"
+    data-testid="link-icon"
+    focusable="false"
+    height="16"
+    width="16"
+  />
+  Navigation Link
+</a>
+`;
+
+exports[`Link Component Styling matches icon only snapshot 1`] = `
+[
+  .c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  color: #006296;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.0125rem;
+  -moz-letter-spacing: 0.0125rem;
+  -ms-letter-spacing: 0.0125rem;
+  letter-spacing: 0.0125rem;
+  line-height: 1.25rem;
+  padding: 0 var(--spacing-half);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: var(--spacing-half);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c1 svg {
+  color: #006296;
+  height: 1rem;
+  width: 1rem;
+}
+
+.c1[visited],
+.c1:visited {
+  color: #602FA0;
+}
+
+.c1[visited] svg,
+.c1:visited svg {
+  color: #602FA0;
+}
+
+.c1[hover],
+.c1:hover {
+  color: #003A5A;
+}
+
+.c1[hover] svg,
+.c1:hover svg {
+  color: #003A5A;
+}
+
+.c1[disabled],
+.c1[aria-disabled='true'],
+.c1:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c1 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c1:focus-visible {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<span
+    aria-describedby="uuid2"
+    class="c0"
+    data-testid="tooltip"
+    id="tooltip-trigger-uuid2"
+    tabindex="-1"
+  >
+    <a
+      aria-disabled="false"
+      class="c1"
+      data-testid="link"
+      href="#"
+      id="uuid1"
+      tabindex="0"
+      to="#"
+    >
+      <svg
+        aria-hidden="true"
+        color="currentColor"
+        data-testid="link-icon"
+        focusable="false"
+        height="16"
+        width="16"
+      />
+    </a>
+  </span>,
+  .c2 {
+  height: 1.25rem;
+  position: absolute;
+  width: 1rem;
+}
+
+.c2::before {
+  border-style: solid;
+  content: '';
+  display: block;
+  height: 0;
+  margin: auto;
+  width: 0;
+}
+
+.c2::after {
+  border-style: solid;
+  content: '';
+  display: block;
+  height: 0;
+  margin: auto;
+  position: absolute;
+  width: 0;
+}
+
+.c0 {
+  background-color: #60666E;
+  border: 1px solid #FFFFFF;
+  border-radius: var(--border-radius-half);
+  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 19%);
+  box-sizing: border-box;
+  color: #FFFFFF;
+  display: none;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-size: 0.75rem;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 1.25rem;
+  margin: 0;
+  max-width: 327px;
+  min-height: 24px;
+  padding: 1px var(--spacing-1x);
+  -webkit-transition: opacity 300ms;
+  transition: opacity 300ms;
+  z-index: 1000;
+}
+
+.c0[data-popper-placement*="bottom"] > .c1 {
+  height: 1rem;
+  left: 0;
+  margin-top: -0.375rem;
+  top: 0;
+  width: 1rem;
+}
+
+.c0[data-popper-placement*="bottom"] > .c1::before {
+  border-color: transparent transparent #FFFFFF transparent;
+  border-width: 0 0.5rem 0.5rem;
+  position: absolute;
+  top: -2px;
+}
+
+.c0[data-popper-placement*="bottom"] > .c1::after {
+  border-color: transparent transparent #60666E transparent;
+  border-width: 0 0.5rem 0.5rem;
+}
+
+.c0[data-popper-placement*="top"] > .c1 {
+  bottom: 0;
+  height: 0;
+  left: 0;
+  margin-bottom: 0;
+  width: 1rem;
+}
+
+.c0[data-popper-placement*="top"] > .c1::before {
+  border-color: #FFFFFF transparent transparent transparent;
+  border-width: 0.5rem 0.5rem 0;
+  position: absolute;
+  top: 0;
+}
+
+.c0[data-popper-placement*="top"] > .c1::after {
+  border-color: #60666E transparent transparent transparent;
+  border-width: 0.5rem 0.5rem 0;
+  top: -0.1rem;
+}
+
+.c0[data-popper-placement*="right"] > .c1 {
+  height: 1rem;
+  left: 0;
+  margin-left: -0.8rem;
+  width: 1rem;
+}
+
+.c0[data-popper-placement*="right"] > .c1::before {
+  border-color: transparent #FFFFFF transparent transparent;
+  border-width: 0.5rem 0.5rem 0.5rem 0;
+}
+
+.c0[data-popper-placement*="right"] > .c1::after {
+  border-color: transparent #60666E transparent transparent;
+  border-width: 0.5rem 0.5rem 0.5rem 0;
+  left: 0.375rem;
+  top: 0;
+}
+
+.c0[data-popper-placement*="left"] > .c1 {
+  height: 1rem;
+  margin-right: -0.7rem;
+  right: -1px;
+  width: 1rem;
+}
+
+.c0[data-popper-placement*="left"] > .c1::before {
+  border-color: transparent transparent transparent #FFFFFF;
+  border-width: 0.5rem 0 0.5rem 0.5rem;
+}
+
+.c0[data-popper-placement*="left"] > .c1::after {
+  border-color: transparent transparent transparent #60666E;
+  border-width: 0.5rem 0 0.5rem 0.5rem;
+  left: 0.17rem;
+  top: 0;
+}
+
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+<div
+    aria-hidden="true"
+    class="c0"
+    data-popper-interactive="false"
+    data-testid="tooltip-content-container"
+    id="uuid2"
+    role="tooltip"
+    style="position:absolute;left:0;top:0"
+  >
+    <div
+      class="c1 c2"
+      data-popper-arrow="true"
+      style="position:absolute"
+    />
+    <div
+      class="c3"
+    >
+      Navigation Link
+    </div>
+  </div>,
+]
+`;
+
+exports[`Link Component Styling matches with children snapshot 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  color: #006296;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: var(--font-normal);
+  -webkit-letter-spacing: 0.0125rem;
+  -moz-letter-spacing: 0.0125rem;
+  -ms-letter-spacing: 0.0125rem;
+  letter-spacing: 0.0125rem;
+  line-height: 1.25rem;
+  padding: 0 var(--spacing-half);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: var(--spacing-half);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0 svg {
+  color: #006296;
+  height: 1rem;
+  width: 1rem;
+}
+
+.c0[visited],
+.c0:visited {
+  color: #602FA0;
+}
+
+.c0[visited] svg,
+.c0:visited svg {
+  color: #602FA0;
+}
+
+.c0[hover],
+.c0:hover {
+  color: #003A5A;
+}
+
+.c0[hover] svg,
+.c0:hover svg {
+  color: #003A5A;
+}
+
+.c0[disabled],
+.c0[aria-disabled='true'],
+.c0:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.c0 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c0:focus-visible {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+<Link>
+  <styled.a
+    $disabled={false}
+    $isMobile={false}
+    aria-disabled="false"
+    data-testid="link"
+    href="#"
+    id="uuid1"
+    onClick={[Function]}
+    tabIndex={0}
+    to="#"
+  >
+    <a
+      aria-disabled="false"
+      className="c0"
+      data-testid="link"
+      href="#"
+      id="uuid1"
+      onClick={[Function]}
+      tabIndex={0}
+      to="#"
+    >
+      <span>
+        Test
+      </span>
+    </a>
+  </styled.a>
+</Link>
+`;
diff --git a/packages/react/src/components/link/link.tsx b/packages/react/src/components/link/link.tsx
new file mode 100644
index 0000000000..870e823bf6
--- /dev/null
+++ b/packages/react/src/components/link/link.tsx
@@ -0,0 +1,95 @@
+import { FC, ReactElement, MouseEvent } from 'react';
+import { useId } from '../../hooks/use-id';
+import { useTranslation } from '../../i18n/use-translation';
+import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { Icon } from '../icon/icon';
+import { ScreenReaderOnlyText } from '../screen-reader-only-text/ScreenReaderOnlyText';
+import { Tooltip } from '../tooltip/tooltip';
+import { StyledLink } from './styled';
+import { LinkProps } from './types';
+
+export const Link: FC<LinkProps> = ({
+    button,
+    children,
+    disabled = false,
+    external = false,
+    href = '#',
+    icon,
+    id: providedId,
+    target = '_blank',
+    onClick,
+    routerLink,
+    rel = 'noopener noreferrer',
+    ...linkProps
+}): ReactElement => {
+    const id = useId(providedId);
+    const { isMobile } = useDeviceContext();
+    const { t } = useTranslation('common');
+    const opensInNewTab = external && target === '_blank';
+    const isIconOnly = icon && !children;
+
+    const handleClick = (event: MouseEvent<HTMLAnchorElement>): void => {
+        if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        } else {
+            onClick?.(event);
+        }
+    };
+
+    const renderLink = (): ReactElement => (
+        <StyledLink
+            as={external ? 'a' : routerLink}
+            to={external ? undefined : href}
+            data-testid="link"
+            aria-disabled={disabled ? 'true' : 'false'}
+            id={id}
+            href={disabled ? undefined : href}
+            onClick={handleClick}
+            target={external ? target : undefined}
+            tabIndex={disabled ? -1 : 0}
+            rel={external ? rel : undefined}
+            $buttonProps={button}
+            $isMobile={isMobile}
+            $disabled={disabled}
+            {...linkProps /* eslint-disable-line react/jsx-props-no-spreading */}
+        >
+            {icon?.name && (
+                <Icon
+                    data-testid="link-icon"
+                    aria-hidden="true"
+                    name={icon.name}
+                    size="16"
+                />
+            )}
+            {!isIconOnly && children}
+            {external && (
+                <Icon
+                    data-testid="external-link-icon"
+                    aria-hidden="true"
+                    focusable={false}
+                    name="externalLink"
+                    role="img"
+                    size="16"
+                />
+            )}
+            {opensInNewTab && (
+                <ScreenReaderOnlyText
+                    data-testid="screen-reader-text"
+                    label={t('opensInNewTabScreenReader')}
+                />
+            )}
+        </StyledLink>
+    );
+
+    return isIconOnly ? (
+        <Tooltip
+            aria-describedby={`${id}-tooltip`}
+            label={icon.label}
+        >
+            {renderLink()}
+        </Tooltip>
+    ) : renderLink();
+};
+
+Link.displayName = 'Link';
diff --git a/packages/react/src/components/link/styled.ts b/packages/react/src/components/link/styled.ts
new file mode 100644
index 0000000000..cf3f3ebe41
--- /dev/null
+++ b/packages/react/src/components/link/styled.ts
@@ -0,0 +1,91 @@
+import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
+import { ResolvedTheme } from '../../themes/theme';
+import { focus } from '../../utils/css-state';
+import { getButtonStyles } from '../buttons';
+import { LinkProps } from './types';
+
+interface LinkStylesProps {
+    $isMobile: boolean;
+    $disabled: LinkProps['disabled'];
+    theme: ResolvedTheme;
+}
+
+const getLinkStyles = ({
+    $disabled, $isMobile, theme,
+}: LinkStylesProps): FlattenInterpolation<ThemeProps<ResolvedTheme>> => css`
+    align-items: center;
+    border-radius: var(--border-radius);
+    color: ${theme.component['link-text-color']};
+    cursor: pointer;
+    font-size: ${$isMobile ? '1rem' : '0.875rem'};
+    font-style: normal;
+    font-weight: var(--font-normal);
+    letter-spacing: 0.0125rem;
+    line-height: 1.25rem;
+    padding: 0 var(--spacing-half);
+
+    svg {
+        color: ${theme.component['link-icon-color']};
+        height: 1rem;
+        width: 1rem;
+    }
+
+    &[visited],
+    &:visited {
+        color: ${theme.component['link-visited-text-color']};
+        svg {
+            color: ${theme.component['link-visited-icon-color']};
+        }
+    }
+
+    &[hover],
+    &:hover {
+        color: ${theme.component['link-hover-text-color']};
+        svg {
+            color: ${theme.component['link-hover-icon-color']};
+        }
+    }
+
+    &[disabled],
+    &[aria-disabled='true'],
+    &:disabled {
+        color: ${$disabled && theme.component['link-disabled-text-color']};
+        cursor: not-allowed;
+        pointer-events: none;
+        svg {
+            color: ${$disabled && theme.component['link-disabled-icon-color']};
+        }
+    }
+
+    ${focus({ theme }, { focusType: 'focus-visible' })};
+`;
+
+export const StyledLink = styled.a<{
+    $disabled: LinkProps['disabled'],
+    $buttonProps?: LinkProps['button'],
+    $isMobile: boolean
+}>`
+    ${({
+        $buttonProps, $disabled, $isMobile, theme,
+    }) => (
+        $buttonProps
+            ? getButtonStyles({
+                $size: $buttonProps.size,
+                buttonType: $buttonProps.buttonType,
+                focusable: $buttonProps.focusable,
+                inverted: $buttonProps.inverted,
+                $isMobile,
+                theme,
+            })
+            : getLinkStyles({
+                $disabled,
+                $isMobile,
+                theme,
+            }))
+};
+
+    display: inline-flex;
+    flex-direction: row;
+    gap: ${({ $buttonProps }) => ($buttonProps ? 'var(--spacing-1x)' : 'var(--spacing-half)')};
+    text-decoration: underline;
+`;
diff --git a/packages/react/src/components/link/types.ts b/packages/react/src/components/link/types.ts
new file mode 100644
index 0000000000..6adc5990a4
--- /dev/null
+++ b/packages/react/src/components/link/types.ts
@@ -0,0 +1,50 @@
+import { AnchorHTMLAttributes } from 'react';
+import { NavLink, Link as ReactRouterLink, NavLinkProps } from 'react-router-dom';
+import { ButtonProps } from '../buttons';
+import { IconName } from '../icon/icon';
+
+type BaseLinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>,
+    | 'id'
+    | 'className'
+    | 'onClick'
+    | 'aria-disabled'
+    | 'aria-label'
+    | 'target'
+    | 'children'
+    | 'href'
+    | 'rel'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onKeyDown'
+> & Pick<NavLinkProps, 'end'>;
+
+type LinkButtonProps = Pick<ButtonProps,
+    | 'autofocus'
+    | 'buttonType'
+    | 'disabled'
+    | 'focusable'
+    | 'inverted'
+    | 'size'
+    | 'title'
+    | 'type'
+>;
+
+export interface LinkProps extends BaseLinkProps {
+    disabled?: boolean;
+
+    /** Button Link Variant */
+    button?: LinkButtonProps;
+
+    /** External Link Variant */
+    external?: boolean;
+
+    /** Icon Only Variant (with a tooltip)
+     *  Make sure to provide an icon name and a label (for the tooltip)
+     */
+    icon?: {
+        name: IconName;
+        label: string;
+    };
+
+    routerLink?: typeof NavLink | typeof ReactRouterLink;
+}
diff --git a/packages/react/src/components/menu-button/menu-button.tsx b/packages/react/src/components/menu-button/menu-button.tsx
index 1e221126eb..d3813ccdbd 100644
--- a/packages/react/src/components/menu-button/menu-button.tsx
+++ b/packages/react/src/components/menu-button/menu-button.tsx
@@ -1,9 +1,9 @@
 import React, { FunctionComponent, PropsWithChildren, useState, useEffect, useRef, useCallback } from 'react';
 import styled from 'styled-components';
 import { menuDimensions } from '../../legacy-constants/menuDimensions';
-import { ButtonType } from '../buttons/abstract-button';
 import { Button } from '../buttons/button';
 import { IconButton } from '../buttons/icon-button';
+import { ButtonType } from '../buttons/types';
 import { Icon, IconName } from '../icon/icon';
 import { Menu, MenuItem } from '../menu/menu';
 import { eventIsInside } from '../../utils/events';
diff --git a/packages/react/src/components/modal/dialog/modal-dialog.test.tsx.snap b/packages/react/src/components/modal/dialog/modal-dialog.test.tsx.snap
index 77e31cf020..d7502521e3 100644
--- a/packages/react/src/components/modal/dialog/modal-dialog.test.tsx.snap
+++ b/packages/react/src/components/modal/dialog/modal-dialog.test.tsx.snap
@@ -54,10 +54,10 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -82,112 +82,40 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
 }
 
 .c11 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: inherit;
-  border: 1px solid;
-  border-radius: 1.5rem;
-  box-sizing: border-box;
-  color: inherit;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-family: inherit;
-  font-size: 0.75rem;
-  font-weight: var(--font-bold);
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-letter-spacing: 0.025rem;
-  -moz-letter-spacing: 0.025rem;
-  -ms-letter-spacing: 0.025rem;
-  letter-spacing: 0.025rem;
-  line-height: 1rem;
-  min-height: var(--size-2x);
-  min-width: 2rem;
-  outline: none;
-  padding: 0 var(--spacing-2x);
-  text-transform: uppercase;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.c11 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c11:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c11 > svg {
-  height: var(--size-1x);
-  width: var(--size-1x);
-}
-
-.c3 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
-  min-width: var(--size-1halfx);
-  padding: 0;
-  width: var(--size-1halfx);
 }
 
-.c3 {
+.c11 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c3:focus {
+.c11:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c3:hover,
-.c3[aria-expanded='true'] {
+.c11:hover,
+.c11[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c3[aria-disabled='true'] {
+.c11[aria-disabled='true'] {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
   cursor: not-allowed;
 }
 
-.c3 > svg {
-  height: var(--size-1x);
-  width: var(--size-1x);
-}
-
-.c0 {
-  box-sizing: border-box;
-  position: fixed;
-  z-index: 100000;
-  bottom: var(--spacing-2x);
-  right: var(--spacing-2x);
-}
-
 .c12 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
+  background-color: #006296;
+  border-color: #006296;
+  color: #FFFFFF;
 }
 
 .c12 {
@@ -203,49 +131,65 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
 
 .c12:hover,
 .c12[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.15);
-  border-color: transparent;
-  color: #000000;
+  background-color: #003A5A;
+  border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c12[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: transparent;
-  color: #B7BBC2;
+  background-color: #84C6EA;
+  border-color: #84C6EA;
+  color: #FFFFFF;
   cursor: not-allowed;
 }
 
-.c13 {
-  background-color: #006296;
-  border-color: #006296;
-  color: #FFFFFF;
+.c3 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  min-width: var(--size-1halfx);
+  padding: 0;
+  width: var(--size-1halfx);
 }
 
-.c13 {
+.c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c13:focus {
+.c3:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c13:hover,
-.c13[aria-expanded='true'] {
-  background-color: #003A5A;
-  border-color: #003A5A;
-  color: #FFFFFF;
+.c3:hover,
+.c3[aria-expanded='true'] {
+  background-color: rgb(0 0 0 / 0.15);
+  border-color: transparent;
+  color: #000000;
 }
 
-.c13[aria-disabled='true'] {
-  background-color: #84C6EA;
-  border-color: #84C6EA;
-  color: #FFFFFF;
+.c3[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
   cursor: not-allowed;
 }
 
+.c3 > svg {
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c0 {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 100000;
+  bottom: var(--spacing-2x);
+  right: var(--spacing-2x);
+}
+
 .c6 {
   color: #1B1C1E;
   font-size: 1.25rem;
@@ -432,14 +376,14 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = `
             class="c10"
           >
             <button
-              class="c11 c12"
+              class="c2 c11"
               data-testid="cancel-button"
               type="button"
             >
               Test Cancel
             </button>
             <button
-              class="c11 c13"
+              class="c2 c12"
               data-testid="confirm-button"
               type="button"
             >
@@ -483,10 +427,10 @@ exports[`Modal-Dialog Matches snapshot (custom footer content) 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -751,10 +695,10 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -779,43 +723,9 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
 }
 
 .c11 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: inherit;
-  border: 1px solid;
-  border-radius: 1.5rem;
-  box-sizing: border-box;
-  color: inherit;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-family: inherit;
-  font-size: 0.75rem;
-  font-weight: var(--font-bold);
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-letter-spacing: 0.025rem;
-  -moz-letter-spacing: 0.025rem;
-  -ms-letter-spacing: 0.025rem;
-  letter-spacing: 0.025rem;
-  line-height: 1rem;
-  min-height: var(--size-2x);
-  min-width: 2rem;
-  outline: none;
-  padding: 0 var(--spacing-2x);
-  text-transform: uppercase;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
 }
 
 .c11 {
@@ -829,9 +739,49 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
   outline-offset: -2px;
 }
 
-.c11 > svg {
-  height: var(--size-1x);
-  width: var(--size-1x);
+.c11:hover,
+.c11[aria-expanded='true'] {
+  background-color: rgb(0 0 0 / 0.15);
+  border-color: transparent;
+  color: #000000;
+}
+
+.c11[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+  cursor: not-allowed;
+}
+
+.c12 {
+  background-color: #006296;
+  border-color: #006296;
+  color: #FFFFFF;
+}
+
+.c12 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c12:focus {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+.c12:hover,
+.c12[aria-expanded='true'] {
+  background-color: #003A5A;
+  border-color: #003A5A;
+  color: #FFFFFF;
+}
+
+.c12[aria-disabled='true'] {
+  background-color: #84C6EA;
+  border-color: #84C6EA;
+  color: #FFFFFF;
+  cursor: not-allowed;
 }
 
 .c3 {
@@ -881,82 +831,20 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
   right: var(--spacing-2x);
 }
 
-.c12 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
+.c6 {
+  color: #1B1C1E;
+  font-size: 1.25rem;
+  font-weight: var(--font-semi-bold);
+  line-height: 2rem;
+  margin: 0;
 }
 
-.c12 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c12:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c12:hover,
-.c12[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.15);
-  border-color: transparent;
-  color: #000000;
-}
-
-.c12[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: transparent;
-  color: #B7BBC2;
-  cursor: not-allowed;
-}
-
-.c13 {
-  background-color: #006296;
-  border-color: #006296;
-  color: #FFFFFF;
-}
-
-.c13 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c13:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c13:hover,
-.c13[aria-expanded='true'] {
-  background-color: #003A5A;
-  border-color: #003A5A;
-  color: #FFFFFF;
-}
-
-.c13[aria-disabled='true'] {
-  background-color: #84C6EA;
-  border-color: #84C6EA;
-  color: #FFFFFF;
-  cursor: not-allowed;
-}
-
-.c6 {
-  color: #1B1C1E;
-  font-size: 1.25rem;
-  font-weight: var(--font-semi-bold);
-  line-height: 2rem;
-  margin: 0;
-}
-
-.c8 {
-  color: #1B1C1E;
-  font-size: 1rem;
-  font-weight: var(--font-semi-bold);
-  line-height: 1.5rem;
-  margin: 0;
+.c8 {
+  color: #1B1C1E;
+  font-size: 1rem;
+  font-weight: var(--font-semi-bold);
+  line-height: 1.5rem;
+  margin: 0;
 }
 
 .c1 {
@@ -1129,14 +1017,14 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = `
             class="c10"
           >
             <button
-              class="c11 c12"
+              class="c2 c11"
               data-testid="cancel-button"
               type="button"
             >
               Cancel
             </button>
             <button
-              class="c11 c13"
+              class="c2 c12"
               data-testid="confirm-button"
               type="button"
             >
@@ -1180,10 +1068,10 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1208,112 +1096,40 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
 }
 
 .c11 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: inherit;
-  border: 1px solid;
-  border-radius: 1.5rem;
-  box-sizing: border-box;
-  color: inherit;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-family: inherit;
-  font-size: 0.75rem;
-  font-weight: var(--font-bold);
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-letter-spacing: 0.025rem;
-  -moz-letter-spacing: 0.025rem;
-  -ms-letter-spacing: 0.025rem;
-  letter-spacing: 0.025rem;
-  line-height: 1rem;
-  min-height: var(--size-2x);
-  min-width: 2rem;
-  outline: none;
-  padding: 0 var(--spacing-2x);
-  text-transform: uppercase;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.c11 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c11:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c11 > svg {
-  height: var(--size-1x);
-  width: var(--size-1x);
-}
-
-.c3 {
   background-color: transparent;
   border-color: transparent;
   color: #60666E;
-  min-width: var(--size-1halfx);
-  padding: 0;
-  width: var(--size-1halfx);
 }
 
-.c3 {
+.c11 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c3:focus {
+.c11:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c3:hover,
-.c3[aria-expanded='true'] {
+.c11:hover,
+.c11[aria-expanded='true'] {
   background-color: rgb(0 0 0 / 0.15);
   border-color: transparent;
   color: #000000;
 }
 
-.c3[aria-disabled='true'] {
+.c11[aria-disabled='true'] {
   background-color: transparent;
   border-color: transparent;
   color: #B7BBC2;
   cursor: not-allowed;
 }
 
-.c3 > svg {
-  height: var(--size-1x);
-  width: var(--size-1x);
-}
-
-.c0 {
-  box-sizing: border-box;
-  position: fixed;
-  z-index: 100000;
-  bottom: var(--spacing-2x);
-  right: var(--spacing-2x);
-}
-
 .c12 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
+  background-color: #006296;
+  border-color: #006296;
+  color: #FFFFFF;
 }
 
 .c12 {
@@ -1329,49 +1145,65 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
 
 .c12:hover,
 .c12[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.15);
-  border-color: transparent;
-  color: #000000;
+  background-color: #003A5A;
+  border-color: #003A5A;
+  color: #FFFFFF;
 }
 
 .c12[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: transparent;
-  color: #B7BBC2;
+  background-color: #84C6EA;
+  border-color: #84C6EA;
+  color: #FFFFFF;
   cursor: not-allowed;
 }
 
-.c13 {
-  background-color: #006296;
-  border-color: #006296;
-  color: #FFFFFF;
+.c3 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  min-width: var(--size-1halfx);
+  padding: 0;
+  width: var(--size-1halfx);
 }
 
-.c13 {
+.c3 {
   outline: 2px solid transparent;
   outline-offset: -2px;
 }
 
-.c13:focus {
+.c3:focus {
   box-shadow: 0 0 0 2px #006296;
   outline: 2px solid #84C6EA;
   outline-offset: -2px;
 }
 
-.c13:hover,
-.c13[aria-expanded='true'] {
-  background-color: #003A5A;
-  border-color: #003A5A;
-  color: #FFFFFF;
+.c3:hover,
+.c3[aria-expanded='true'] {
+  background-color: rgb(0 0 0 / 0.15);
+  border-color: transparent;
+  color: #000000;
 }
 
-.c13[aria-disabled='true'] {
-  background-color: #84C6EA;
-  border-color: #84C6EA;
-  color: #FFFFFF;
+.c3[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
   cursor: not-allowed;
 }
 
+.c3 > svg {
+  height: var(--size-1x);
+  width: var(--size-1x);
+}
+
+.c0 {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 100000;
+  bottom: var(--spacing-2x);
+  right: var(--spacing-2x);
+}
+
 .c6 {
   color: #1B1C1E;
   font-size: 1.25rem;
@@ -1558,14 +1390,14 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = `
             class="c10"
           >
             <button
-              class="c11 c12"
+              class="c2 c11"
               data-testid="cancel-button"
               type="button"
             >
               Cancel
             </button>
             <button
-              class="c11 c13"
+              class="c2 c12"
               data-testid="confirm-button"
               type="button"
             >
@@ -1636,52 +1468,6 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
   width: var(--size-1halfx);
 }
 
-.c3 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-  padding: 0;
-  width: var(--size-3x);
-}
-
-.c3 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c3:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c3:hover,
-.c3[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.15);
-  border-color: transparent;
-  color: #000000;
-}
-
-.c3[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: transparent;
-  color: #B7BBC2;
-  cursor: not-allowed;
-}
-
-.c3 > svg {
-  height: var(--size-1halfx);
-  width: var(--size-1halfx);
-}
-
-.c0 {
-  box-sizing: border-box;
-  position: fixed;
-  z-index: 100000;
-  bottom: var(--spacing-2x);
-  right: 0;
-}
-
 .c11 {
   background-color: transparent;
   border-color: transparent;
@@ -1744,6 +1530,52 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = `
   cursor: not-allowed;
 }
 
+.c3 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+  padding: 0;
+  width: var(--size-3x);
+}
+
+.c3 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c3:focus {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+.c3:hover,
+.c3[aria-expanded='true'] {
+  background-color: rgb(0 0 0 / 0.15);
+  border-color: transparent;
+  color: #000000;
+}
+
+.c3[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+  cursor: not-allowed;
+}
+
+.c3 > svg {
+  height: var(--size-1halfx);
+  width: var(--size-1halfx);
+}
+
+.c0 {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 100000;
+  bottom: var(--spacing-2x);
+  right: 0;
+}
+
 .c6 {
   color: #1B1C1E;
   font-size: 1.25rem;
diff --git a/packages/react/src/components/modal/modal.test.tsx.snap b/packages/react/src/components/modal/modal.test.tsx.snap
index 2ff1b68c38..492e79dc58 100644
--- a/packages/react/src/components/modal/modal.test.tsx.snap
+++ b/packages/react/src/components/modal/modal.test.tsx.snap
@@ -250,10 +250,10 @@ exports[`Modal Matches snapshot (noPadding) 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -469,10 +469,10 @@ exports[`Modal Matches snapshot (opened, desktop) 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/packages/react/src/components/password-input/password-input.test.tsx.snap b/packages/react/src/components/password-input/password-input.test.tsx.snap
index 69c406502f..dbaed0b25d 100644
--- a/packages/react/src/components/password-input/password-input.test.tsx.snap
+++ b/packages/react/src/components/password-input/password-input.test.tsx.snap
@@ -30,10 +30,10 @@ exports[`PasswordInput matches the snapshot (Disabled) 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -455,10 +455,10 @@ exports[`PasswordInput matches the snapshot (Invalid) 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -920,10 +920,10 @@ exports[`PasswordInput matches the snapshot (Normal) 1`] = `
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/packages/react/src/components/route-link/route-link.tsx b/packages/react/src/components/route-link/route-link.tsx
index 4f21bc0e4e..37a4150e13 100644
--- a/packages/react/src/components/route-link/route-link.tsx
+++ b/packages/react/src/components/route-link/route-link.tsx
@@ -41,6 +41,9 @@ interface LinkProps extends RouterLinkProps {
     onClick?(event: MouseEvent<HTMLAnchorElement>): void;
 }
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases. Use Link instead.
+ */
 export const RouteLink: VoidFunctionComponent<LinkProps> = ({
     className,
     disabled,
diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
index f765a5bb18..1ac1e5b7d4 100644
--- a/packages/react/src/components/search/search-input.test.tsx.snap
+++ b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -425,6 +425,7 @@ input:valid + .c8 {
               onClick={[Function]}
             >
               <styled.button
+                $isMobile={false}
                 className="c12 c11 primary"
                 disabled={true}
                 isMobile={false}
diff --git a/packages/react/src/components/search/search-input.tsx b/packages/react/src/components/search/search-input.tsx
index 1b99efad2a..544cdcf0c6 100644
--- a/packages/react/src/components/search/search-input.tsx
+++ b/packages/react/src/components/search/search-input.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from '../../i18n/use-translation';
 import { ResolvedTheme } from '../../themes/theme';
 import { focus } from '../../utils/css-state';
 import { v4 as uuid } from '../../utils/uuid';
-import { SearchButton } from '../buttons/search-button';
+import { SearchButton } from '../buttons';
 import { Label } from '../label/label';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { VisuallyHidden } from '../visually-hidden/visuallyhidden';
diff --git a/packages/react/src/components/skip-link/skip-link.tsx b/packages/react/src/components/skip-link/skip-link.tsx
index 61cb92968b..40121c2e6d 100644
--- a/packages/react/src/components/skip-link/skip-link.tsx
+++ b/packages/react/src/components/skip-link/skip-link.tsx
@@ -1,15 +1,15 @@
 import { MouseEvent, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { defaultButtonStyles } from '../buttons/abstract-button';
+import { getBaseButtonStyles } from '../buttons';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 
-const StyledLink = styled.a<{ isMobile: boolean }>`
-    ${defaultButtonStyles};
+const StyledLink = styled.a<{ $isMobile: boolean }>`
+    ${({ $isMobile }) => getBaseButtonStyles({ $isMobile })};
 
     background: ${({ theme }) => theme.component['skip-link-background-color']};
     color: ${({ theme }) => theme.component['skip-link-text-color']};
-    font-size: ${({ isMobile }) => (isMobile ? 1 : 0.875)}rem;
+    font-size: ${({ $isMobile }) => ($isMobile ? 1 : 0.875)}rem;
     font-weight: var(--font-normal);
     letter-spacing: 0.015rem;
     overflow: hidden;
@@ -44,7 +44,7 @@ export const SkipLink: VoidFunctionComponent<SkipLinkProps> = ({
         <StyledLink
             className={className}
             href={href}
-            isMobile={isMobile}
+            $isMobile={isMobile}
             onClick={onClick}
         >
             {t('label')}
diff --git a/packages/react/src/components/tabs/tabs.test.tsx.snap b/packages/react/src/components/tabs/tabs.test.tsx.snap
index f59aeb2bb2..b0b9a34402 100644
--- a/packages/react/src/components/tabs/tabs.test.tsx.snap
+++ b/packages/react/src/components/tabs/tabs.test.tsx.snap
@@ -57,6 +57,37 @@ exports[`Tabs matches snapshot (global) 1`] = `
   width: var(--size-1x);
 }
 
+.c2 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+}
+
+.c2 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c2:focus {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+.c2:hover,
+.c2[aria-expanded='true'] {
+  background-color: rgb(0 0 0 / 0.15);
+  border-color: transparent;
+  color: #000000;
+}
+
+.c2[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+  cursor: not-allowed;
+}
+
 .c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -208,37 +239,6 @@ exports[`Tabs matches snapshot (global) 1`] = `
   outline-offset: -2px;
 }
 
-.c2 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-}
-
-.c2 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c2:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c2:hover,
-.c2[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.15);
-  border-color: transparent;
-  color: #000000;
-}
-
-.c2[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: transparent;
-  color: #B7BBC2;
-  cursor: not-allowed;
-}
-
 .c0 {
   background: #FFFFFF;
   box-sizing: content-box;
@@ -506,6 +506,37 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   width: var(--size-1halfx);
 }
 
+.c3 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+}
+
+.c3 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c3:focus {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+.c3:hover,
+.c3[aria-expanded='true'] {
+  background-color: rgb(0 0 0 / 0.15);
+  border-color: transparent;
+  color: #000000;
+}
+
+.c3[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+  cursor: not-allowed;
+}
+
 .c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -657,37 +688,6 @@ exports[`Tabs matches snapshot (mobile) 1`] = `
   outline-offset: -2px;
 }
 
-.c3 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-}
-
-.c3 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c3:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c3:hover,
-.c3[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.15);
-  border-color: transparent;
-  color: #000000;
-}
-
-.c3[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: transparent;
-  color: #B7BBC2;
-  cursor: not-allowed;
-}
-
 .c0 {
   background: #FFFFFF;
   border: 1px solid #DBDEE1;
@@ -966,6 +966,37 @@ exports[`Tabs matches snapshot 1`] = `
   width: var(--size-1x);
 }
 
+.c3 {
+  background-color: transparent;
+  border-color: transparent;
+  color: #60666E;
+}
+
+.c3 {
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.c3:focus {
+  box-shadow: 0 0 0 2px #006296;
+  outline: 2px solid #84C6EA;
+  outline-offset: -2px;
+}
+
+.c3:hover,
+.c3[aria-expanded='true'] {
+  background-color: rgb(0 0 0 / 0.15);
+  border-color: transparent;
+  color: #000000;
+}
+
+.c3[aria-disabled='true'] {
+  background-color: transparent;
+  border-color: transparent;
+  color: #B7BBC2;
+  cursor: not-allowed;
+}
+
 .c8 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -1117,37 +1148,6 @@ exports[`Tabs matches snapshot 1`] = `
   outline-offset: -2px;
 }
 
-.c3 {
-  background-color: transparent;
-  border-color: transparent;
-  color: #60666E;
-}
-
-.c3 {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-}
-
-.c3:focus {
-  box-shadow: 0 0 0 2px #006296;
-  outline: 2px solid #84C6EA;
-  outline-offset: -2px;
-}
-
-.c3:hover,
-.c3[aria-expanded='true'] {
-  background-color: rgb(0 0 0 / 0.15);
-  border-color: transparent;
-  color: #000000;
-}
-
-.c3[aria-disabled='true'] {
-  background-color: transparent;
-  border-color: transparent;
-  color: #B7BBC2;
-  cursor: not-allowed;
-}
-
 .c0 {
   background: #FFFFFF;
   border: 1px solid #DBDEE1;
diff --git a/packages/react/src/components/tag/tag.test.tsx.snap b/packages/react/src/components/tag/tag.test.tsx.snap
index 08ba68c0a3..684604e52f 100644
--- a/packages/react/src/components/tag/tag.test.tsx.snap
+++ b/packages/react/src/components/tag/tag.test.tsx.snap
@@ -1716,10 +1716,10 @@ exports[`Tag Tag size=small color=decorative-01 matches snapshot (desktop remova
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2279,10 +2279,10 @@ exports[`Tag Tag size=small color=decorative-02 matches snapshot (desktop remova
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2842,10 +2842,10 @@ exports[`Tag Tag size=small color=default matches snapshot (desktop removable) 1
   -ms-letter-spacing: 0.025rem;
   letter-spacing: 0.025rem;
   line-height: 1rem;
-  min-height: var(--size-1halfx);
+  min-height: var(--size-2x);
   min-width: 2rem;
   outline: none;
-  padding: 0 var(--spacing-1halfx);
+  padding: 0 var(--spacing-2x);
   text-transform: uppercase;
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/packages/react/src/components/toast/toast-container.test.tsx.snap b/packages/react/src/components/toast/toast-container.test.tsx.snap
index 182f709a5e..14e4983336 100644
--- a/packages/react/src/components/toast/toast-container.test.tsx.snap
+++ b/packages/react/src/components/toast/toast-container.test.tsx.snap
@@ -245,6 +245,7 @@ exports[`ToastContainer should match snapshot (alert) 1`] = `
             >
               <styled.button
                 $focusable={true}
+                $isMobile={false}
                 aria-label="Dismiss notification"
                 buttonType="tertiary"
                 className="c4 c3"
@@ -532,6 +533,7 @@ exports[`ToastContainer should match snapshot (discovery) 1`] = `
             >
               <styled.button
                 $focusable={true}
+                $isMobile={false}
                 aria-label="Dismiss notification"
                 buttonType="tertiary"
                 className="c4 c3"
@@ -819,6 +821,7 @@ exports[`ToastContainer should match snapshot (neutral) 1`] = `
             >
               <styled.button
                 $focusable={true}
+                $isMobile={false}
                 aria-label="Dismiss notification"
                 buttonType="tertiary"
                 className="c4 c3"
@@ -1106,6 +1109,7 @@ exports[`ToastContainer should match snapshot (success) 1`] = `
             >
               <styled.button
                 $focusable={true}
+                $isMobile={false}
                 aria-label="Dismiss notification"
                 buttonType="tertiary"
                 className="c4 c3"
@@ -1393,6 +1397,7 @@ exports[`ToastContainer should match snapshot (warning) 1`] = `
             >
               <styled.button
                 $focusable={true}
+                $isMobile={false}
                 aria-label="Dismiss notification"
                 buttonType="tertiary"
                 className="c4 c3"
diff --git a/packages/react/src/components/toggletip/toggletip.test.tsx.snap b/packages/react/src/components/toggletip/toggletip.test.tsx.snap
index 38921e4f81..14a56bf962 100644
--- a/packages/react/src/components/toggletip/toggletip.test.tsx.snap
+++ b/packages/react/src/components/toggletip/toggletip.test.tsx.snap
@@ -276,6 +276,7 @@ exports[`Toggletip Has default desktop styles (defaultOpen) 1`] = `
       >
         <styled.button
           $focusable={true}
+          $isMobile={false}
           aria-controls="uuid1"
           aria-expanded={true}
           aria-label="info"
@@ -504,6 +505,7 @@ exports[`Toggletip Has default desktop styles 1`] = `
       >
         <styled.button
           $focusable={true}
+          $isMobile={false}
           aria-controls="uuid1"
           aria-expanded={false}
           aria-label="info"
@@ -823,6 +825,7 @@ exports[`Toggletip Has mobile styles (defaultOpen) 1`] = `
       >
         <styled.button
           $focusable={true}
+          $isMobile={true}
           aria-controls="uuid1"
           aria-expanded={true}
           aria-label="info"
@@ -1051,6 +1054,7 @@ exports[`Toggletip Has mobile styles 1`] = `
       >
         <styled.button
           $focusable={true}
+          $isMobile={true}
           aria-controls="uuid1"
           aria-expanded={false}
           aria-label="info"
diff --git a/packages/react/src/components/user-profile/user-profile.test.tsx.snap b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
index 086f2871d9..2893ea9548 100644
--- a/packages/react/src/components/user-profile/user-profile.test.tsx.snap
+++ b/packages/react/src/components/user-profile/user-profile.test.tsx.snap
@@ -57,33 +57,6 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   width: var(--size-1x);
 }
 
-.c4 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background: #F1F2F2;
-  border-radius: 50%;
-  color: #60666E;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-weight: var(--font-semi-bold);
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  text-transform: capitalize;
-  font-size: 0.625rem;
-  height: var(--size-1halfx);
-  -webkit-letter-spacing: 0.011rem;
-  -moz-letter-spacing: 0.011rem;
-  -ms-letter-spacing: 0.011rem;
-  letter-spacing: 0.011rem;
-  width: var(--size-1halfx);
-}
-
 .c2 {
   background-color: transparent;
   border-color: transparent;
@@ -115,6 +88,33 @@ exports[`UserProfile Matches Snapshot (defaultOpen) 1`] = `
   cursor: not-allowed;
 }
 
+.c4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: #F1F2F2;
+  border-radius: 50%;
+  color: #60666E;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-weight: var(--font-semi-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-transform: capitalize;
+  font-size: 0.625rem;
+  height: var(--size-1halfx);
+  -webkit-letter-spacing: 0.011rem;
+  -moz-letter-spacing: 0.011rem;
+  -ms-letter-spacing: 0.011rem;
+  letter-spacing: 0.011rem;
+  width: var(--size-1halfx);
+}
+
 .c7 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
@@ -749,33 +749,6 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   width: var(--size-1x);
 }
 
-.c4 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background: #F1F2F2;
-  border-radius: 50%;
-  color: #60666E;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-weight: var(--font-semi-bold);
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  text-transform: capitalize;
-  font-size: 0.625rem;
-  height: var(--size-1halfx);
-  -webkit-letter-spacing: 0.011rem;
-  -moz-letter-spacing: 0.011rem;
-  -ms-letter-spacing: 0.011rem;
-  letter-spacing: 0.011rem;
-  width: var(--size-1halfx);
-}
-
 .c2 {
   background-color: transparent;
   border-color: transparent;
@@ -807,6 +780,33 @@ exports[`UserProfile Matches Snapshot (desktop) 1`] = `
   cursor: not-allowed;
 }
 
+.c4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: #F1F2F2;
+  border-radius: 50%;
+  color: #60666E;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-weight: var(--font-semi-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-transform: capitalize;
+  font-size: 0.625rem;
+  height: var(--size-1halfx);
+  -webkit-letter-spacing: 0.011rem;
+  -moz-letter-spacing: 0.011rem;
+  -ms-letter-spacing: 0.011rem;
+  letter-spacing: 0.011rem;
+  width: var(--size-1halfx);
+}
+
 .c7 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
@@ -2130,33 +2130,6 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   width: var(--size-1x);
 }
 
-.c4 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background: #F1F2F2;
-  border-radius: 50%;
-  color: #60666E;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  font-weight: var(--font-semi-bold);
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  text-transform: capitalize;
-  font-size: 0.625rem;
-  height: var(--size-1halfx);
-  -webkit-letter-spacing: 0.011rem;
-  -moz-letter-spacing: 0.011rem;
-  -ms-letter-spacing: 0.011rem;
-  letter-spacing: 0.011rem;
-  width: var(--size-1halfx);
-}
-
 .c2 {
   background-color: transparent;
   border-color: transparent;
@@ -2188,6 +2161,33 @@ exports[`UserProfile Matches Snapshot (tag="nav") 1`] = `
   cursor: not-allowed;
 }
 
+.c4 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: #F1F2F2;
+  border-radius: 50%;
+  color: #60666E;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-weight: var(--font-semi-bold);
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-transform: capitalize;
+  font-size: 0.625rem;
+  height: var(--size-1halfx);
+  -webkit-letter-spacing: 0.011rem;
+  -moz-letter-spacing: 0.011rem;
+  -ms-letter-spacing: 0.011rem;
+  letter-spacing: 0.011rem;
+  width: var(--size-1halfx);
+}
+
 .c7 {
   background-color: #FFFFFF;
   border: 1px solid #878F9A;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 3ad6f92633..0f316e27af 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -4,7 +4,8 @@ declare global { var __DS_DEV__: boolean; }
 global.__DS_DEV__ = process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test';
 
 // Buttons
-export { Button, ButtonProps } from './components/buttons/button';
+export { Button } from './components/buttons/button';
+export { ButtonProps } from './components/buttons/types';
 export { IconButton } from './components/buttons/icon-button';
 export { NavListOption } from './components/nav-list/nav-list-option';
 export { MenuButton, MenuButtonProps } from './components/menu-button/menu-button';
@@ -93,6 +94,7 @@ export { useToast } from './hooks/use-toast';
 export { Breadcrumb, BreadcrumbElement } from './components/breadcrumb/breadcrumb';
 export * from './components/global-navigation/global-navigation';
 export { RouteLink } from './components/route-link/route-link';
+export { Link } from './components/link';
 
 // Results
 export * from './components/legend/legend';
diff --git a/packages/react/src/themes/tokens/component/link-tokens.ts b/packages/react/src/themes/tokens/component/link-tokens.ts
index 5d56d2d6c2..40e34d9b02 100644
--- a/packages/react/src/themes/tokens/component/link-tokens.ts
+++ b/packages/react/src/themes/tokens/component/link-tokens.ts
@@ -8,7 +8,15 @@ export type LinkTokens =
     | 'route-link-text-color'
     | 'route-link-disabled-text-color'
     | 'route-link-hover-text-color'
-    | 'route-link-visited-text-color';
+    | 'route-link-visited-text-color'
+    | 'link-text-color'
+    | 'link-disabled-text-color'
+    | 'link-hover-text-color'
+    | 'link-visited-text-color'
+    | 'link-icon-color'
+    | 'link-disabled-icon-color'
+    | 'link-hover-icon-color'
+    | 'link-visited-icon-color';
 
 export type LinkTokenValue = AliasTokens | RefTokens;
 
@@ -26,4 +34,13 @@ export const defaultLinkTokens: LinkTokenMap = {
 
     'skip-link-text-color': 'color-link-content',
     'skip-link-background-color': 'color-background',
+
+    'link-text-color': 'color-link-content',
+    'link-disabled-text-color': 'color-link-content-disabled',
+    'link-hover-text-color': 'color-link-content-hover',
+    'link-visited-text-color': 'color-link-content-visited',
+    'link-icon-color': 'color-link-content',
+    'link-disabled-icon-color': 'color-link-content-disabled',
+    'link-hover-icon-color': 'color-link-content-hover',
+    'link-visited-icon-color': 'color-link-content-visited',
 };
diff --git a/packages/storybook/stories/external-link.stories.tsx b/packages/storybook/stories/external-link.stories.tsx
index 4f5bffd051..5aa56bef1b 100644
--- a/packages/storybook/stories/external-link.stories.tsx
+++ b/packages/storybook/stories/external-link.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { rawCodeParameters } from './utils/parameters';
 
 const ExternalLinkMeta: Meta<typeof ExternalLink> = {
-    title: 'Components/External Link',
+    title: 'Deprecated/External Link (deprecated)',
     component: ExternalLink,
     args: {
         label: 'External Link',
diff --git a/packages/storybook/stories/link.mdx b/packages/storybook/stories/link.mdx
index e8ca204c40..3702b8460e 100644
--- a/packages/storybook/stories/link.mdx
+++ b/packages/storybook/stories/link.mdx
@@ -1,8 +1,8 @@
-import { RouteLink } from '@equisoft/design-elements-react';
 import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
-import * as RouteLinkStories from './link.stories';
+import * as LinkStories from './link.stories';
+import {Link} from "@equisoft/design-elements-react";
 
-<Meta of={RouteLinkStories} />
+<Meta of={LinkStories} />
 
 # Link
 1. [Definition](#definition)
@@ -12,7 +12,7 @@ import * as RouteLinkStories from './link.stories';
 
 ## Definition
 The Link component enables users to seamlessly navigate between pages, both within and outside the application. 
-<Canvas of={RouteLinkStories.Default} />
+<Canvas of={LinkStories.Default} />
 
 ## Usage
 ### When to use
@@ -25,10 +25,15 @@ The Link component enables users to seamlessly navigate between pages, both with
 ### Route Link
 Route link redirects users somewhere else inside the application. 
 - This variant can use an icon or not
-<Canvas of={RouteLinkStories.Default} />
+<Canvas of={LinkStories.Default} />
+
+### External Link
+External links redirect users outside the current page by opening a new tab or opening a new window for old browsers.
+- External links should always have an icon at the end, representing the external link.
+<Canvas of={LinkStories.External} />
 
 ## Properties
-<ArgTypes of={RouteLink} />
+<ArgTypes of={Link} />
 
 ## References
 
diff --git a/packages/storybook/stories/link.stories.tsx b/packages/storybook/stories/link.stories.tsx
index bb1564b7b2..b148e6099d 100644
--- a/packages/storybook/stories/link.stories.tsx
+++ b/packages/storybook/stories/link.stories.tsx
@@ -1,28 +1,105 @@
-import { RouteLink } from '@equisoft/design-elements-react';
+import { Link } from '@equisoft/design-elements-react';
 import { Meta, StoryObj } from '@storybook/react';
-import { NavLink } from 'react-router-dom';
+import { Link as RouteLink } from 'react-router-dom';
 import { RouterDecorator } from './utils/router-decorator';
+import { rawCodeParameters } from './utils/parameters';
 
-const RouteLinkMeta: Meta<typeof RouteLink> = {
+const LinkMeta: Meta<typeof Link> = {
     title: 'Components/Link',
-    component: RouteLink,
+    component: Link,
     args: {
-        label: 'Route Link',
-        href: '/story1',
+        href: '?path=/story/components-link--external',
     },
     render: (args) => (
-        <RouteLink
+        <Link
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...args}
-            routerLink={NavLink}
-        />
+        >
+            Default Link
+        </Link>
     ),
 };
 
-export default RouteLinkMeta;
-type Story = StoryObj<typeof RouteLink>;
+export default LinkMeta;
+type Story = StoryObj<typeof Link>;
 
 export const Default: Story = {
-    ...RouteLinkMeta,
+    ...LinkMeta,
 };
 Default.decorators = [RouterDecorator];
+
+export const External: Story = {
+    ...LinkMeta,
+    args: {
+        href: 'https://www.google.com',
+        external: true,
+    },
+    render: (args) => (
+        <Link
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...args}
+        >
+            External Link
+        </Link>
+    ),
+};
+External.decorators = [RouterDecorator];
+
+export const WithIcon: Story = {
+    ...Default,
+    args: {
+        icon: { name: 'mail', label: 'Link with icon' },
+        children: 'Link with icon',
+    },
+};
+
+export const OnlyIcon: Story = {
+    ...Default,
+    args: {
+        icon: { name: 'mail', label: 'Link icon only' },
+    },
+    render: (args) => (
+        <Link
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...args}
+        />
+    ),
+};
+
+export const Disabled: Story = {
+    ...Default,
+    args: {
+        children: 'Disabled Link',
+        disabled: true,
+    },
+};
+
+export const ButtonLink: Story = {
+    ...External,
+    args: {
+        external: true,
+        children: 'Button Link',
+        button: {
+            buttonType: 'secondary',
+        },
+    },
+};
+
+export const WithCallback: Story = {
+    ...Default,
+    args: {
+        onClick: () => console.info('Link clicked'),
+        onBlur: () => console.info('Link blurred'),
+        onFocus: () => console.info('Link focused'),
+    },
+};
+WithCallback.parameters = rawCodeParameters;
+
+export const WithRouteLink: Story = {
+    args: {
+        children: 'Router Link',
+        href: '/storybook',
+        routerLink: RouteLink,
+    },
+};
+WithRouteLink.decorators = [RouterDecorator];
diff --git a/packages/storybook/stories/route-link.mdx b/packages/storybook/stories/route-link.mdx
new file mode 100644
index 0000000000..e72a4fa202
--- /dev/null
+++ b/packages/storybook/stories/route-link.mdx
@@ -0,0 +1,36 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+import * as RouteLinkStories from './route-link.stories';
+import {RouteLink} from "@equisoft/design-elements-react";
+
+<Meta of={RouteLinkStories} />
+
+# Route Link
+1. [Definition](#definition)
+2. [Usage](#usage)
+3. [Variants](#variants)
+4. [Properties](#properties)
+
+## Definition
+The Link component enables users to seamlessly navigate between pages, both within and outside the application.
+<Canvas of={RouteLinkStories.Default} />
+
+## Usage
+### When to use
+- Use when you have to bring the user somewhere else into or outside the application.
+
+### When not to use
+- Do not use if the action of clicking the link doesn’t bring the user somewhere else.
+
+## Variants
+### Route Link
+Route link redirects users somewhere else inside the application.
+- This variant can use an icon or not
+<Canvas of={RouteLinkStories.Default} />
+
+## Properties
+<ArgTypes of={RouteLink} />
+
+## References
+
+
+
diff --git a/packages/storybook/stories/route-link.stories.tsx b/packages/storybook/stories/route-link.stories.tsx
new file mode 100644
index 0000000000..93064b5092
--- /dev/null
+++ b/packages/storybook/stories/route-link.stories.tsx
@@ -0,0 +1,28 @@
+import { RouteLink } from '@equisoft/design-elements-react';
+import { Meta, StoryObj } from '@storybook/react';
+import { NavLink } from 'react-router-dom';
+import { RouterDecorator } from './utils/router-decorator';
+
+const RouteLinkMeta: Meta<typeof RouteLink> = {
+    title: 'Deprecated/Route Link (deprecated)',
+    component: RouteLink,
+    args: {
+        label: 'Route Link',
+        href: '/story1',
+    },
+    render: (args) => (
+        <RouteLink
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...args}
+            routerLink={NavLink}
+        />
+    ),
+};
+
+export default RouteLinkMeta;
+type Story = StoryObj<typeof RouteLink>;
+
+export const Default: Story = {
+    ...RouteLinkMeta,
+};
+Default.decorators = [RouterDecorator];