diff --git a/packages/orbit-components/src/Button/Button.stories.tsx b/packages/orbit-components/src/Button/Button.stories.tsx
index 007118720c..2263f32984 100644
--- a/packages/orbit-components/src/Button/Button.stories.tsx
+++ b/packages/orbit-components/src/Button/Button.stories.tsx
@@ -11,9 +11,9 @@ import SPACINGS_AFTER from "../common/getSpacingToken/consts";
 import Button from ".";
 
 const getIcons = (name: string, defaultIcon: string) =>
-  select(name, Object.keys(Icons), defaultIcon);
+  select(name, ["none", ...Object.keys(Icons)], defaultIcon);
 
-const getIcon = (source: string | null) => (source ? Icons[source] : null);
+const getIcon = (source: string) => (source in Icons ? Icons[source] : null);
 
 export default {
   title: "Button",
diff --git a/packages/orbit-components/src/Button/consts.ts b/packages/orbit-components/src/Button/consts.ts
index e75ed5983e..ebe6bac42d 100644
--- a/packages/orbit-components/src/Button/consts.ts
+++ b/packages/orbit-components/src/Button/consts.ts
@@ -15,24 +15,3 @@ export enum SIZE_OPTIONS {
   NORMAL = "normal",
   LARGE = "large",
 }
-
-export enum TOKENS {
-  // Size tokens
-  heightButton = "heightButton",
-  loadingWidth = "loadingWidth",
-  loadingHeight = "loadingHeight",
-  fontSizeButton = "fontSizeButton",
-  paddingButton = "paddingButton",
-  paddingButtonWithIcons = "paddingButtonWithIcons",
-  paddingButtonWithLeftIcon = "paddingButtonWithLeftIcon",
-  paddingButtonWithRightIcon = "paddingButtonWithRightIcon",
-  // Type tokens
-  backgroundButton = "backgroundButton",
-  backgroundButtonHover = "backgroundButtonHover",
-  backgroundButtonActive = "backgroundButtonActive",
-  backgroundButtonFocus = "backgroundButtonFocus",
-  colorTextButton = "colorTextButton",
-  colorTextButtonHover = "colorTextButtonHover",
-  colorTextButtonActive = "colorTextButtonActive",
-  borderColorButtonFocus = "borderColorButtonFocus",
-}
diff --git a/packages/orbit-components/src/Button/helpers/getButtonBoxShadow.ts b/packages/orbit-components/src/Button/helpers/getButtonBoxShadow.ts
deleted file mode 100644
index a6c22d0b5f..0000000000
--- a/packages/orbit-components/src/Button/helpers/getButtonBoxShadow.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
-import type { Interpolation } from "styled-components";
-
-import { TOKENS, TYPE_OPTIONS } from "../consts";
-import { BUTTON_STATES } from "../../primitives/ButtonPrimitive/common/consts";
-import getButtonTypeToken from "./getButtonTypeToken";
-import type { Type, ButtonStates } from "../types";
-import type { Theme } from "../../defaultTheme";
-
-const opacity = {
-  [TYPE_OPTIONS.PRIMARY]: 15,
-  [TYPE_OPTIONS.SECONDARY]: 8,
-  [TYPE_OPTIONS.CRITICAL]: 15,
-  [TYPE_OPTIONS.WHITE]: 8,
-  [TYPE_OPTIONS.PRIMARY_SUBTLE]: 8,
-  [TYPE_OPTIONS.CRITICAL_SUBTLE]: 8,
-  [TYPE_OPTIONS.BUNDLE_BASIC]: 15,
-  [TYPE_OPTIONS.BUNDLE_MEDIUM]: 15,
-  [TYPE_OPTIONS.BUNDLE_TOP]: 15,
-};
-
-interface BoxShadowProps {
-  state: ButtonStates;
-  disabled: boolean;
-  theme: Theme;
-  type: Type;
-}
-
-const getButtonBoxShadow = ({
-  state,
-  disabled,
-  theme,
-  type,
-}: BoxShadowProps): Interpolation<string> | null => {
-  const wrappedButtonTypeToken = (name: string) => getButtonTypeToken({ name, type, theme });
-  if (disabled) return null;
-
-  if (state === BUTTON_STATES.ACTIVE) {
-    return `inset 0 0 6px 3px ${convertHexToRgba(theme.orbit.paletteInkDark, opacity[type])};`;
-  }
-
-  if (state === BUTTON_STATES.FOCUS) {
-    return `0 0 0 3px ${wrappedButtonTypeToken(TOKENS.borderColorButtonFocus)}`;
-  }
-
-  return null;
-};
-
-export default getButtonBoxShadow;
diff --git a/packages/orbit-components/src/Button/helpers/getButtonIconForeground.ts b/packages/orbit-components/src/Button/helpers/getButtonIconForeground.ts
deleted file mode 100644
index 912ee33825..0000000000
--- a/packages/orbit-components/src/Button/helpers/getButtonIconForeground.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TOKENS } from "../consts";
-import getButtonTypeToken from "./getButtonTypeToken";
-import type { Theme } from "../../defaultTheme";
-import type { Type } from "../types";
-
-const getButtonIconForeground = ({
-  theme,
-  type,
-}: {
-  theme: Theme;
-  type: Type;
-}): {
-  foreground: string;
-  foregroundHover: string;
-  foregroundActive: string;
-  foregroundFocus: string;
-} => {
-  const wrappedTypeToken = (name: string) => getButtonTypeToken({ name, type, theme });
-  return {
-    foreground: wrappedTypeToken(TOKENS.colorTextButton),
-    foregroundHover: wrappedTypeToken(TOKENS.colorTextButtonHover),
-    foregroundActive: wrappedTypeToken(TOKENS.colorTextButtonActive),
-    foregroundFocus: wrappedTypeToken(TOKENS.colorTextButtonActive),
-  };
-};
-
-export default getButtonIconForeground;
diff --git a/packages/orbit-components/src/Button/helpers/getButtonStyles.ts b/packages/orbit-components/src/Button/helpers/getButtonStyles.ts
deleted file mode 100644
index b470dbae48..0000000000
--- a/packages/orbit-components/src/Button/helpers/getButtonStyles.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { BUTTON_STATES } from "../../primitives/ButtonPrimitive/common/consts";
-import getButtonTypeToken from "./getButtonTypeToken";
-import { TOKENS } from "../consts";
-import getButtonBoxShadow from "./getButtonBoxShadow";
-import type { Theme } from "../../defaultTheme";
-import type { Type, ButtonStates } from "../types";
-
-const getButtonStyles = ({
-  disabled,
-  theme,
-  type,
-}: {
-  disabled: boolean;
-  theme: Theme;
-  type: Type;
-}): {
-  background: string;
-  backgroundHover: string;
-  backgroundActive: string;
-  backgroundFocus: string | null;
-  foreground: string;
-  foregroundHover: string;
-  foregroundActive: string;
-} => {
-  const wrappedBoxShadow = (state: ButtonStates) =>
-    getButtonBoxShadow({ state, disabled, theme, type });
-  const wrappedTypeToken = (name: string) => getButtonTypeToken({ name, type, theme });
-  const boxShadow = {
-    boxShadow: wrappedBoxShadow(BUTTON_STATES.DEFAULT),
-    boxShadowHover: wrappedBoxShadow(BUTTON_STATES.HOVER),
-    boxShadowActive: wrappedBoxShadow(BUTTON_STATES.ACTIVE),
-  };
-  return {
-    background: wrappedTypeToken(TOKENS.backgroundButton),
-    backgroundHover: wrappedTypeToken(TOKENS.backgroundButtonHover),
-    backgroundActive: wrappedTypeToken(TOKENS.backgroundButtonActive),
-    backgroundFocus: null,
-    foreground: wrappedTypeToken(TOKENS.colorTextButton),
-    foregroundHover: wrappedTypeToken(TOKENS.colorTextButtonHover),
-    foregroundActive: wrappedTypeToken(TOKENS.colorTextButtonActive),
-    ...boxShadow,
-  };
-};
-
-export default getButtonStyles;
diff --git a/packages/orbit-components/src/Button/helpers/getButtonTypeToken.ts b/packages/orbit-components/src/Button/helpers/getButtonTypeToken.ts
deleted file mode 100644
index 3daea49868..0000000000
--- a/packages/orbit-components/src/Button/helpers/getButtonTypeToken.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
-
-import type { Theme } from "../../defaultTheme";
-import type { Type } from "../types";
-import { TOKENS, TYPE_OPTIONS } from "../consts";
-
-const getButtonTypeToken = ({
-  name,
-  type,
-  theme,
-}: {
-  name: string;
-  type: Type;
-  theme: Theme;
-}): string => {
-  const tokens = {
-    [TOKENS.backgroundButton]: {
-      [TYPE_OPTIONS.PRIMARY]: theme.orbit.buttonPrimaryBackground,
-      [TYPE_OPTIONS.SECONDARY]: theme.orbit.buttonSecondaryBackground,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.buttonCriticalBackground,
-      [TYPE_OPTIONS.WHITE]: theme.orbit.buttonWhiteBackground,
-      [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.buttonPrimarySubtleBackground,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.buttonCriticalSubtleBackground,
-      [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.buttonBundleBasicBackground,
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.buttonBundleMediumBackground,
-      [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.buttonBundleTopBackground,
-    },
-    [TOKENS.backgroundButtonHover]: {
-      [TYPE_OPTIONS.PRIMARY]: theme.orbit.buttonPrimaryBackgroundHover,
-      [TYPE_OPTIONS.SECONDARY]: theme.orbit.buttonSecondaryBackgroundHover,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.buttonCriticalBackgroundHover,
-      [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteHover,
-      [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.buttonPrimarySubtleBackgroundHover,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.buttonCriticalSubtleBackgroundHover,
-      [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.buttonBundleBasicBackgroundHover,
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.buttonBundleMediumBackgroundHover,
-      [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.buttonBundleTopBackgroundHover,
-    },
-    [TOKENS.backgroundButtonActive]: {
-      [TYPE_OPTIONS.PRIMARY]: theme.orbit.buttonPrimaryBackgroundActive,
-      [TYPE_OPTIONS.SECONDARY]: theme.orbit.buttonSecondaryBackgroundActive,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.buttonCriticalBackgroundActive,
-      [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteActive,
-      [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.buttonPrimarySubtleBackgroundActive,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.buttonCriticalSubtleBackgroundActive,
-      [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.buttonBundleBasicBackgroundActive,
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.buttonBundleMediumBackgroundActive,
-      [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.buttonBundleTopBackgroundActive,
-    },
-    [TOKENS.backgroundButtonFocus]: {
-      [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 10),
-      [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkNormal, 10),
-      [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 10),
-      [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 20),
-      [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.buttonPrimarySubtleBackground,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.buttonCriticalSubtleBackground,
-      [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.buttonBundleBasicBackground,
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.buttonBundleMediumBackground,
-      [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.buttonBundleTopBackground,
-    },
-    [TOKENS.colorTextButton]: {
-      [TYPE_OPTIONS.PRIMARY]: theme.orbit.buttonPrimaryForeground,
-      [TYPE_OPTIONS.SECONDARY]: theme.orbit.buttonSecondaryForeground,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.buttonCriticalForeground,
-      [TYPE_OPTIONS.WHITE]: theme.orbit.buttonWhiteForeground,
-      [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.buttonPrimarySubtleForeground,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.buttonCriticalSubtleForeground,
-      [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite,
-    },
-    [TOKENS.colorTextButtonHover]: {
-      [TYPE_OPTIONS.PRIMARY]: theme.orbit.buttonPrimaryForegroundHover,
-      [TYPE_OPTIONS.SECONDARY]: theme.orbit.buttonSecondaryForegroundHover,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.buttonCriticalForegroundHover,
-      [TYPE_OPTIONS.WHITE]: theme.orbit.buttonWhiteForegroundHover,
-      [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.buttonPrimarySubtleForegroundHover,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.buttonCriticalSubtleForegroundHover,
-      [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite,
-    },
-    [TOKENS.colorTextButtonActive]: {
-      [TYPE_OPTIONS.PRIMARY]: theme.orbit.buttonPrimaryForegroundActive,
-      [TYPE_OPTIONS.SECONDARY]: theme.orbit.buttonSecondaryForegroundActive,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.buttonCriticalForegroundActive,
-      [TYPE_OPTIONS.WHITE]: theme.orbit.buttonWhiteForegroundActive,
-      [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.buttonPrimarySubtleForegroundActive,
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.buttonCriticalSubtleForegroundActive,
-      [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite,
-      [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite,
-    },
-    [TOKENS.borderColorButtonFocus]: {
-      [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 50),
-      [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkNormal, 30),
-      [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 50),
-      // because it's not possible to see outline on the white bg, we use active token
-      [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhiteActive, 50),
-      [TYPE_OPTIONS.PRIMARY_SUBTLE]: convertHexToRgba(theme.orbit.paletteProductNormal, 50),
-      [TYPE_OPTIONS.CRITICAL_SUBTLE]: convertHexToRgba(theme.orbit.paletteRedNormal, 50),
-      // TODO: currently we do not have tokens for these colors
-      [TYPE_OPTIONS.BUNDLE_BASIC]: convertHexToRgba(`#E13E3B`, 50),
-      [TYPE_OPTIONS.BUNDLE_MEDIUM]: convertHexToRgba(`#3719AB`, 50),
-      [TYPE_OPTIONS.BUNDLE_TOP]: convertHexToRgba(`#2D2D2E`, 50),
-    },
-  };
-
-  return tokens[name][type];
-};
-
-export default getButtonTypeToken;
diff --git a/packages/orbit-components/src/Button/index.tsx b/packages/orbit-components/src/Button/index.tsx
index a2ff4024a1..1964c9ed39 100644
--- a/packages/orbit-components/src/Button/index.tsx
+++ b/packages/orbit-components/src/Button/index.tsx
@@ -1,35 +1,115 @@
 "use client";
 
 import * as React from "react";
+import cx from "clsx";
 
-import { TYPE_OPTIONS } from "./consts";
 import ButtonPrimitive from "../primitives/ButtonPrimitive";
-import getIconContainer from "../primitives/ButtonPrimitive/common/getIconContainer";
-import getCommonProps from "../primitives/ButtonPrimitive/common/getCommonProps";
-import useTheme from "../hooks/useTheme";
-import getButtonStyles from "./helpers/getButtonStyles";
-import getButtonIconForeground from "./helpers/getButtonIconForeground";
-import type { Props } from "./types";
+import type { Props, Size, Type } from "./types";
+
+const sizeStyles: Record<Size, string> = {
+  small: "h-button-small text-small [&_svg]:h-icon-small [&_svg]:w-icon-small",
+  normal: "h-button-normal text-normal [&_svg]:h-icon-medium [&_svg]:w-icon-medium",
+  large: "h-button-large text-large [&_svg]:h-icon-large [&_svg]:w-icon-large",
+};
+
+const paddingNoIconsStyles: Record<Size, string> = {
+  small: "px-button-padding-sm",
+  normal: "px-button-padding-md",
+  large: "px-button-padding-xl",
+};
+
+const paddingLeftIconStyles: Record<Size, string> = {
+  small: "ps-button-padding-xs pe-button-padding-sm",
+  normal: "ps-button-padding-sm pe-button-padding-md",
+  large: "ps-button-padding-lg pe-button-padding-xl",
+};
+
+const paddingRightIconStyles: Record<Size, string> = {
+  small: "ps-button-padding-sm pe-button-padding-xs",
+  normal: "ps-button-padding-md pe-button-padding-sm",
+  large: "ps-button-padding-xl pe-button-padding-lg",
+};
+
+const paddingBothIconsStyles: Record<Size, string> = {
+  small: "px-button-padding-xs",
+  normal: "px-button-padding-sm",
+  large: "px-button-padding-lg",
+};
+
+const circledStyles: Record<Size, string> = {
+  small: "rounded-button-circled-small",
+  normal: "rounded-button-circled-normal",
+  large: "rounded-button-circled-large",
+};
+
+const circledIconOnlyStyles: Record<Size, string> = {
+  small: "w-button-small",
+  normal: "w-button-normal",
+  large: "w-button-large",
+};
+
+const typeStyles: Record<Type, string> = {
+  primary:
+    "bg-button-primary-background hover:bg-button-primary-background-hover active:bg-button-primary-background-active disabled:bg-button-primary-background focus:bg-button-primary-background-focus text-button-primary-foreground focus:text-button-primary-foreground-focus active:text-button-primary-foreground-active hover:text-button-primary-foreground-hover disabled:text-button-primary-foreground active:shadow-button-active",
+  secondary:
+    "bg-button-secondary-background hover:bg-button-secondary-background-hover active:bg-button-secondary-background-active disabled:bg-button-secondary-background focus:bg-button-secondary-background-focus text-button-secondary-foreground focus:text-button-secondary-foreground-focus active:text-button-secondary-foreground-active hover:text-button-secondary-foreground-hover disabled:text-button-secondary-foreground active:shadow-button-active-pale",
+  critical:
+    "bg-button-critical-background hover:bg-button-critical-background-hover active:bg-button-critical-background-active disabled:bg-button-critical-background focus:bg-button-critical-background-focus text-button-critical-foreground focus:text-button-critical-foreground-focus active:text-button-critical-foreground-active hover:text-button-critical-foreground-hover disabled:text-button-critical-foreground active:shadow-button-active",
+  primarySubtle:
+    "bg-button-primary-subtle-background hover:bg-button-primary-subtle-background-hover active:bg-button-primary-subtle-active-background disabled:bg-button-primary-subtle-background focus:bg-button-primary-subtle-background-focus text-button-primary-subtle-foreground focus:text-button-primary-subtle-foreground-focus active:text-button-primary-subtle-foreground-active hover:text-button-primary-subtle-foreground-hover disabled:text-button-primary-subtle-foreground active:shadow-button-active-pale",
+  criticalSubtle:
+    "bg-button-critical-subtle-background hover:bg-button-critical-subtle-background-hover active:bg-button-critical-subtle-active-background disabled:bg-button-critical-subtle-background focus:bg-button-critical-subtle-background-focus text-button-critical-subtle-foreground focus:text-button-critical-subtle-foreground-focus active:text-button-critical-subtle-foreground-active hover:text-button-critical-subtle-foreground-hover disabled:text-button-critical-subtle-foreground active:shadow-button-active-pale",
+  white:
+    "bg-button-white-background hover:bg-button-white-background-hover active:bg-button-white-background-active disabled:bg-button-white-background focus:bg-button-white-background-focus text-button-white-foreground focus:text-button-white-foreground-focus active:text-button-white-foreground-active hover:text-button-white-foreground-hover disabled:text-button-white-foreground active:shadow-button-active-pale",
+  bundleBasic:
+    "bg-button-bundle-basic-background hover:bg-button-bundle-basic-background-hover active:bg-button-bundle-basic-background-active disabled:bg-button-bundle-basic-background focus:bg-button-bundle-basic-background-focus text-white-foreground focus:text-white-foreground-focus active:text-white-foreground-active hover:text-white-foreground-hover disabled:text-white-foreground active:shadow-button-active",
+  bundleMedium:
+    "bg-button-bundle-medium-background hover:bg-button-bundle-medium-background-hover active:bg-button-bundle-medium-background-active disabled:bg-button-bundle-medium-background focus:bg-button-bundle-medium-background-focus text-white-foreground focus:text-white-foreground-focus active:text-white-foreground-active hover:text-white-foreground-hover disabled:text-white-foreground active:shadow-button-active",
+  bundleTop:
+    "bg-button-bundle-top-background hover:bg-button-bundle-top-background-hover active:bg-button-bundle-top-background-active disabled:bg-button-bundle-top-background focus:bg-button-bundle-top-background-focus text-white-foreground focus:text-white-foreground-focus active:text-white-foreground-active hover:text-white-foreground-hover disabled:text-white-foreground active:shadow-button-active",
+};
+
+/**
+ * This is necessary for <a> elements since they don't have the `disabled` attribute.
+ */
+const typeDisabledStyled: Record<Type, string> = {
+  primary: "bg-button-primary-background text-button-primary-foreground",
+  secondary: "bg-button-secondary-background text-button-secondary-foreground",
+  critical: "bg-button-critical-background text-button-critical-foreground",
+  primarySubtle: "bg-button-primary-subtle-background text-button-primary-subtle-foreground",
+  criticalSubtle: "bg-button-critical-subtle-background text-button-critical-subtle-foreground",
+  white: "bg-button-white-background text-button-white-foreground",
+  bundleBasic: "bg-button-bundle-basic-background text-white-foreground",
+  bundleMedium: "bg-button-bundle-medium-background text-white-foreground",
+  bundleTop: "bg-button-bundle-top-background text-white-foreground",
+};
 
 const Button = React.forwardRef<HTMLButtonElement, Props>(
-  ({ type = TYPE_OPTIONS.PRIMARY, size, disabled = false, ...props }, ref) => {
-    const theme = useTheme();
-    const propsWithTheme = { theme, size, ...props };
-    const commonProps = getCommonProps(propsWithTheme);
-    const buttonStyles = getButtonStyles({ type, theme, disabled });
-    const icons = getIconContainer({
-      ...propsWithTheme,
-      iconForeground: getButtonIconForeground({ type, theme }),
-    });
+  (
+    { type = "primary", size = "normal", children, iconLeft, iconRight, disabled, ...props },
+    ref,
+  ) => {
     return (
       <ButtonPrimitive
         ref={ref}
+        iconLeft={iconLeft}
+        iconRight={iconRight}
         disabled={disabled}
         {...props}
-        {...buttonStyles}
-        {...commonProps}
-        {...icons}
-      />
+        className={cx(
+          "orbit-button space-x-xs rtl:space-x-reverse",
+          sizeStyles[size],
+          disabled === true ? typeDisabledStyled[type] : typeStyles[type],
+          children != null && iconLeft == null && iconRight == null && paddingNoIconsStyles[size],
+          children != null && iconLeft != null && iconRight == null && paddingLeftIconStyles[size],
+          children != null && iconLeft == null && iconRight != null && paddingRightIconStyles[size],
+          children != null && iconLeft != null && iconRight != null && paddingBothIconsStyles[size],
+          props.circled === true && circledStyles[size],
+          props.circled === true && children == null && circledIconOnlyStyles[size],
+        )}
+      >
+        {children}
+      </ButtonPrimitive>
     );
   },
 );
diff --git a/packages/orbit-components/src/Button/types.d.ts b/packages/orbit-components/src/Button/types.d.ts
index d1f17f0112..d0e57de61d 100644
--- a/packages/orbit-components/src/Button/types.d.ts
+++ b/packages/orbit-components/src/Button/types.d.ts
@@ -8,6 +8,8 @@ import type {
   FullWidthConditionalProps,
 } from "../primitives/ButtonPrimitive/types";
 
+export type { Size };
+
 export type Type =
   | "primary"
   | "secondary"