diff --git a/packages/ods-react/src/components/switch/src/components/switch/Switch.tsx b/packages/ods-react/src/components/switch/src/components/switch/Switch.tsx
index d2e0ae0c1..d28f52620 100644
--- a/packages/ods-react/src/components/switch/src/components/switch/Switch.tsx
+++ b/packages/ods-react/src/components/switch/src/components/switch/Switch.tsx
@@ -1,6 +1,6 @@
 import { ToggleGroup, type ToggleGroupValueChangeDetails } from '@ark-ui/react/toggle-group';
 import classNames from 'classnames';
-import { type ComponentPropsWithRef, type FC, type JSX, forwardRef } from 'react';
+import { type ComponentPropsWithRef, type FC, type JSX, forwardRef, useEffect } from 'react';
 import { SWITCH_SIZE, type SwitchSize } from '../../constants/switch-size';
 import style from './switch.module.scss';
 
@@ -40,6 +40,10 @@ const Switch: FC<SwitchProp> = forwardRef(({
   value,
   ...props
 }, ref): JSX.Element => {
+  useEffect(() => {
+    console.warn('[DEPRECATED]: Switch component is not recommended anymore and will be removed in a next major release. Check the documentation for correct alternative.');
+  }, []);
+
   function onSwitchValueChange(detail: ToggleGroupValueChangeDetails): void {
     if (onValueChange) {
       onValueChange({ value: detail.value[0] });
diff --git a/packages/ods-react/src/components/tabs/src/components/tab-list/TabList.tsx b/packages/ods-react/src/components/tabs/src/components/tab-list/TabList.tsx
index 569711a02..34423c909 100644
--- a/packages/ods-react/src/components/tabs/src/components/tab-list/TabList.tsx
+++ b/packages/ods-react/src/components/tabs/src/components/tab-list/TabList.tsx
@@ -4,6 +4,7 @@ import { type ComponentPropsWithRef, type FC, type JSX, forwardRef, useCallback,
 import { debounce } from '../../../../../utils/debounce';
 import { BUTTON_SIZE, BUTTON_VARIANT, Button } from '../../../../button/src';
 import { ICON_NAME, Icon } from '../../../../icon/src';
+import { TABS_VARIANT } from '../../constants/tabs-variant';
 import { useTabs } from '../../contexts/useTabs';
 import style from './tabList.module.scss';
 
@@ -14,10 +15,11 @@ const TabList: FC<TabListProp> = forwardRef(({
   className,
   ...props
 }, ref): JSX.Element => {
-  const { withArrows, setScrollContainerRef } = useTabs();
+  const { setScrollContainerRef, size, variant, withArrows } = useTabs();
   const [isLeftButtonDisabled, setIsLeftButtonDisabled] = useState(false);
   const [isRightButtonDisabled, setIsRightButtonDisabled] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const arrowSize = variant === TABS_VARIANT.default ? BUTTON_SIZE.xs : size;
 
   useEffect(() => {
     if (setScrollContainerRef) {
@@ -27,7 +29,7 @@ const TabList: FC<TabListProp> = forwardRef(({
 
   const updateScrollButtonState = useCallback(() => {
     setIsLeftButtonDisabled(scrollRef.current ? scrollRef.current.scrollLeft === 0 : false);
-    setIsRightButtonDisabled(scrollRef.current ? scrollRef.current.scrollLeft === scrollRef.current.scrollWidth - scrollRef.current.offsetWidth : false);
+    setIsRightButtonDisabled(scrollRef.current ? Math.ceil(scrollRef.current.scrollLeft) >= scrollRef.current.scrollWidth - scrollRef.current.offsetWidth : false);
   }, []);
 
   const debouncedUpdateScrollButtonState = useMemo(() => {
@@ -73,7 +75,10 @@ const TabList: FC<TabListProp> = forwardRef(({
 
   return (
     <div
-      className={ classNames(style['tab-list'], className) }
+      className={ classNames(
+        style['tab-list'],
+        className,
+      )}
       data-ods="tab-list"
       ref={ ref }
       { ...props }>
@@ -81,12 +86,13 @@ const TabList: FC<TabListProp> = forwardRef(({
         withArrows &&
         <div className={ classNames(
           style['tab-list__left-arrow'],
+          style[`tab-list__left-arrow--${arrowSize}`],
           { [style['tab-list__left-arrow--active']]: !isLeftButtonDisabled },
         )}>
           <Button
             disabled={ isLeftButtonDisabled }
             onClick={ onLeftScrollClick }
-            size={ BUTTON_SIZE.xs }
+            size={ arrowSize }
             tabIndex={ -1 }
             variant={ BUTTON_VARIANT.ghost }>
             <Icon name={ ICON_NAME.chevronLeft } />
@@ -95,7 +101,11 @@ const TabList: FC<TabListProp> = forwardRef(({
       }
 
       <div
-        className={ style['tab-list__container'] }
+        className={ classNames(
+          style['tab-list__container'],
+          style[`tab-list__container--${size}`],
+          style[`tab-list__container--${variant}`],
+        )}
         onScroll={ debouncedUpdateScrollButtonState }
         ref={ scrollRef }
         tabIndex={ -1 }>
@@ -108,12 +118,13 @@ const TabList: FC<TabListProp> = forwardRef(({
         withArrows &&
         <div className={ classNames(
           style['tab-list__right-arrow'],
+          style[`tab-list__right-arrow--${arrowSize}`],
           { [style['tab-list__right-arrow--active']]: !isRightButtonDisabled },
         )}>
           <Button
             disabled={ isRightButtonDisabled }
             onClick={ onRightScrollClick }
-            size={ BUTTON_SIZE.xs }
+            size={ arrowSize }
             tabIndex={ -1 }
             variant={ BUTTON_VARIANT.ghost }>
             <Icon name={ ICON_NAME.chevronRight } />
diff --git a/packages/ods-react/src/components/tabs/src/components/tab-list/tabList.module.scss b/packages/ods-react/src/components/tabs/src/components/tab-list/tabList.module.scss
index bf2557429..a8aeaf91f 100644
--- a/packages/ods-react/src/components/tabs/src/components/tab-list/tabList.module.scss
+++ b/packages/ods-react/src/components/tabs/src/components/tab-list/tabList.module.scss
@@ -1,11 +1,17 @@
 @use '../../../../../style/button';
+@use '../../../../../style/font';
 @use '../../../../../style/scroll';
 
 $tab-list-border-bottom-size: 2px;
 
 @layer ods-molecules {
   .tab-list {
+    --ods-tab-list-background-color-switch: var(--ods-color-neutral-050);
     --ods-tab-list-border-color: var(--ods-color-neutral-100);
+    --ods-tab-list-border-radius-switch-md: calc(var(--ods-theme-border-radius) * 1.25);
+    --ods-tab-list-border-radius-switch-sm: calc(var(--ods-theme-border-radius) * 0.75);
+    --ods-tab-list-border-radius-switch-xs: calc(var(--ods-theme-border-radius) / 2);
+    --ods-tab-list-border-width: #{$tab-list-border-bottom-size};
 
     display: flex;
     position: relative;
@@ -25,12 +31,18 @@ $tab-list-border-bottom-size: 2px;
         bottom: 0;
         transition: opacity ease .3s;
         opacity: 0;
-        z-index: 1;
+        z-index: 10;
         width: 60px;
         height: 100%;
         content: '';
         pointer-events: none;
       }
+
+      &--xs {
+        [data-ods="button"] {
+          font-size: font.px-to-rem(10px);
+        }
+      }
     }
 
     &__left-arrow {
@@ -38,9 +50,20 @@ $tab-list-border-bottom-size: 2px;
         background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);
       }
 
+      &--md::after {
+        left: button.$ods-button-size-md;
+      }
+
+      &--sm::after {
+        left: button.$ods-button-size-sm;
+      }
+
+      &--xs::after {
+        left: button.$ods-button-size-xs;
+      }
+
       &--active {
         &::after {
-          left: button.$ods-button-size-xs;
           opacity: 1;
         }
       }
@@ -51,34 +74,66 @@ $tab-list-border-bottom-size: 2px;
         background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 100%);
       }
 
+      &--md::after {
+        right: button.$ods-button-size-md;
+      }
+
+      &--sm::after {
+        right: button.$ods-button-size-sm;
+      }
+
+      &--xs::after {
+        right: button.$ods-button-size-xs;
+      }
+
       &--active {
         &::after {
-          right: button.$ods-button-size-xs;
           opacity: 1;
         }
       }
     }
 
     &__container {
+      $container: &;
+
       @include scroll.hide-scrollbar();
 
       display: inline-block;
       position: relative;
-      width: 100%;
       overflow: auto hidden;
       white-space: nowrap;
 
-      &::after {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        border-bottom: solid $tab-list-border-bottom-size var(--ods-tab-list-border-color);
-        content: '';
+      &--default {
+        width: 100%;
+
+        &::after {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          border-bottom: solid var(--ods-tab-list-border-width) var(--ods-tab-list-border-color);
+          content: '';
+        }
+      }
+
+      &--switch {
+        background-color: var(--ods-tab-list-background-color-switch);
+
+        &#{$container}--md {
+          border-radius: var(--ods-tab-list-border-radius-switch-md);
+        }
+
+        &#{$container}--sm {
+          border-radius: var(--ods-tab-list-border-radius-switch-sm);
+        }
+
+        &#{$container}--xs {
+          border-radius: var(--ods-tab-list-border-radius-switch-xs);
+        }
       }
 
       &__tabs {
-        display: flex;
+        display: inline-flex;
       }
     }
   }
diff --git a/packages/ods-react/src/components/tabs/src/components/tab/Tab.tsx b/packages/ods-react/src/components/tabs/src/components/tab/Tab.tsx
index 5667e58c7..cf464c691 100644
--- a/packages/ods-react/src/components/tabs/src/components/tab/Tab.tsx
+++ b/packages/ods-react/src/components/tabs/src/components/tab/Tab.tsx
@@ -18,7 +18,7 @@ const Tab: FC<TabProp> = forwardRef(({
   ...props
 }, ref): JSX.Element => {
   const { focusedValue } = useTabsContext();
-  const { scrollContainerRef } = useTabs();
+  const { scrollContainerRef, size, variant } = useTabs();
   const innerRef = useRef<HTMLButtonElement>(null);
 
   useImperativeHandle(ref, () => innerRef.current!, [innerRef]);
@@ -43,7 +43,12 @@ const Tab: FC<TabProp> = forwardRef(({
 
   return (
     <Tabs.Trigger
-      className={ classNames(style['tab'], className) }
+      className={ classNames(
+        style['tab'],
+        style[`tab--${size}`],
+        style[`tab--${variant}`],
+        className,
+      )}
       data-ods="tab"
       ref={ innerRef }
       value={ value }
diff --git a/packages/ods-react/src/components/tabs/src/components/tab/tab.module.scss b/packages/ods-react/src/components/tabs/src/components/tab/tab.module.scss
index 1f2a3b466..7f3b0ba22 100644
--- a/packages/ods-react/src/components/tabs/src/components/tab/tab.module.scss
+++ b/packages/ods-react/src/components/tabs/src/components/tab/tab.module.scss
@@ -1,48 +1,54 @@
 @use '../../../../../style/focus';
+@use '../../../../../style/font';
 @use '../../../../../style/state';
-@use '../tab-list/tabList.module' as tab-list;
 
 @layer ods-molecules {
   .tab {
+    $tab: &;
+
+    --ods-tab-margin-horizontal-switch-md: calc(var(--ods-theme-padding-horizontal) / 2);
+    --ods-tab-margin-horizontal-switch-sm: calc(var(--ods-theme-padding-horizontal) / 2);
+    --ods-tab-margin-horizontal-switch-xs: calc(var(--ods-theme-padding-horizontal) / 4);
+    --ods-tab-margin-vertical-switch-md: calc(var(--ods-theme-padding-vertical) / 2);
+    --ods-tab-margin-vertical-switch-sm: calc(var(--ods-theme-padding-vertical) / 2);
+    --ods-tab-margin-vertical-switch-xs: calc(var(--ods-theme-padding-vertical) / 4);
     --ods-tab-padding-horizontal: calc(var(--ods-theme-padding-horizontal) * 2);
+    --ods-tab-padding-horizontal-switch-md: calc(var(--ods-theme-padding-horizontal) * 1.5);
+    --ods-tab-padding-horizontal-switch-sm: var(--ods-theme-padding-horizontal);
+    --ods-tab-padding-horizontal-switch-xs: calc(var(--ods-theme-padding-horizontal) * 0.75);
     --ods-tab-padding-vertical: calc(var(--ods-theme-padding-vertical) / 4);
+    --ods-tab-padding-vertical-switch-md: var(--ods-theme-padding-horizontal);
+    --ods-tab-padding-vertical-switch-sm: calc(var(--ods-theme-padding-horizontal) * 0.75);
+    --ods-tab-padding-vertical-switch-xs: calc(var(--ods-theme-padding-horizontal) / 2);
     --ods-tab-background-color-hover: var(--ods-color-neutral-050);
+    --ods-tab-background-color-selected-switch: var(--ods-color-neutral-000);
+    --ods-tab-background-color-selected-disabled-switch: var(--ods-color-neutral-500);
     --ods-tab-border-color: var(--ods-tab-list-border-color);
     --ods-tab-border-color-disabled: var(--ods-color-neutral-100);
     --ods-tab-border-color-hover: var(--ods-color-neutral-050);
     --ods-tab-border-color-selected: var(--ods-color-primary-500);
     --ods-tab-border-color-selected-disabled: var(--ods-color-neutral-500);
+    --ods-tab-border-color-selected-disabled-switch: var(--ods-color-neutral-000);
+    --ods-tab-border-radius-switch-md: var(--ods-theme-border-radius);
+    --ods-tab-border-radius-switch-sm: calc(var(--ods-theme-border-radius) / 2);
+    --ods-tab-border-radius-switch-xs: calc(var(--ods-theme-border-radius) / 4);
+    --ods-tab-text-color-hover: var(--ods-color-primary-500);
     --ods-tab-text-color-selected: var(--ods-color-primary-500);
 
     display: block;
     z-index: 1;
-    border-top: none;
-    border-right: none;
-    border-bottom: solid tab-list.$tab-list-border-bottom-size var(--ods-tab-border-color);
-    border-left: none;
-    border-top-left-radius: var(--ods-theme-border-radius);
-    border-top-right-radius: var(--ods-theme-border-radius);
     background: none;
     cursor: pointer;
-    padding: var(--ods-tab-padding-vertical) var(--ods-tab-padding-horizontal);
     text-align: center;
     white-space: nowrap;
     color: var(--ods-theme-text-color);
     font-family: inherit;
-    font-size: inherit;
     font-weight: 600;
 
     &:focus-visible {
       @include focus.ods-focus();
 
       z-index: 2;
-      outline-offset: calc(var(--ods-theme-outline-offset) * -1);
-    }
-
-    &:focus-visible:not([disabled], [aria-selected="true"]),
-    &:hover:not([disabled], [aria-selected="true"]) {
-      border-color: var(--ods-tab-border-color-hover);
-      background-color: var(--ods-tab-background-color-hover);
     }
 
     &[disabled] {
@@ -52,15 +58,89 @@
       background-color: inherit;
     }
 
-    &[aria-selected="true"] {
-      &:not([disabled]) {
-        border-color: var(--ods-tab-border-color-selected);
-        color: var(--ods-tab-text-color-selected);
+    &--default {
+      border-top: none;
+      border-right: none;
+      border-bottom: solid var(--ods-tab-list-border-width) var(--ods-tab-border-color);
+      border-left: none;
+      border-top-left-radius: var(--ods-theme-border-radius);
+      border-top-right-radius: var(--ods-theme-border-radius);
+      padding: var(--ods-tab-padding-vertical) var(--ods-tab-padding-horizontal);
+
+      &:focus-visible:focus-visible {
+        outline-offset: calc(var(--ods-theme-outline-offset) * -1);
+      }
+
+      &:hover:not([disabled], [aria-selected="true"]) {
+        border-color: var(--ods-tab-border-color-hover);
+        background-color: var(--ods-tab-background-color-hover);
+        color: var(--ods-tab-text-color-hover);
+      }
+
+      &[aria-selected="true"] {
+        &:not([disabled]) {
+          border-color: var(--ods-tab-border-color-selected);
+          color: var(--ods-tab-text-color-selected);
+        }
+
+        &[disabled] {
+          border-color: var(--ods-tab-border-color-selected-disabled);
+        }
+      }
+    }
+
+    &--switch {
+      border: 0;
+
+      &:hover:not([disabled], [aria-selected="true"]) {
+        color: var(--ods-tab-text-color-hover);
       }
 
-      &[disabled] {
-        border-color: var(--ods-tab-border-color-selected-disabled);
+      &[aria-selected="true"] {
+        &:not([disabled]) {
+          background-color: var(--ods-tab-background-color-selected-switch);
+          color: var(--ods-tab-text-color-selected);
+        }
+
+        &[disabled] {
+          background-color: var(--ods-tab-background-color-selected-disabled-switch);
+          color: var(--ods-tab-border-color-selected-disabled-switch);
+        }
       }
+
+      &#{$tab}--md {
+        margin: var(--ods-tab-margin-vertical-switch-md) var(--ods-tab-margin-horizontal-switch-md);
+        border-radius: var(--ods-tab-border-radius-switch-md);
+        padding: var(--ods-tab-padding-vertical-switch-md) var(--ods-tab-padding-horizontal-switch-md);
+      }
+
+      &#{$tab}--sm {
+        margin: var(--ods-tab-margin-vertical-switch-sm) var(--ods-tab-margin-horizontal-switch-sm);
+        border-radius: var(--ods-tab-border-radius-switch-sm);
+        padding: var(--ods-tab-padding-vertical-switch-sm) var(--ods-tab-padding-horizontal-switch-sm);
+      }
+
+      &#{$tab}--xs {
+        margin: var(--ods-tab-margin-vertical-switch-xs) var(--ods-tab-margin-horizontal-switch-xs);
+        border-radius: var(--ods-tab-border-radius-switch-xs);
+        padding: var(--ods-tab-padding-vertical-switch-xs) var(--ods-tab-padding-horizontal-switch-xs);
+
+        &:focus-visible:focus-visible {
+          outline-offset: 0;
+        }
+      }
+    }
+
+    &--md {
+      font-size: font.px-to-rem(16px);
+    }
+
+    &--sm {
+      font-size: font.px-to-rem(14px);
+    }
+
+    &--xs {
+      font-size: font.px-to-rem(12px);
     }
   }
 }
diff --git a/packages/ods-react/src/components/tabs/src/components/tabs/Tabs.tsx b/packages/ods-react/src/components/tabs/src/components/tabs/Tabs.tsx
index 38775cba2..59a961220 100644
--- a/packages/ods-react/src/components/tabs/src/components/tabs/Tabs.tsx
+++ b/packages/ods-react/src/components/tabs/src/components/tabs/Tabs.tsx
@@ -1,10 +1,9 @@
 import { Tabs as VendorTabs } from '@ark-ui/react/tabs';
 import { type ComponentPropsWithRef, type FC, type JSX, forwardRef, useEffect } from 'react';
+import { TABS_SIZE } from '../../constants/tabs-size';
+import { TABS_VARIANT } from '../../constants/tabs-variant';
 import { TabsProvider, type TabsRootProp } from '../../contexts/useTabs';
 
-/**
- * @inheritDoc TabsRootProp
- */
 interface TabsProp extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue'>, TabsRootProp {}
 
 const Tabs: FC<TabsProp> = forwardRef(({
@@ -12,7 +11,9 @@ const Tabs: FC<TabsProp> = forwardRef(({
   className,
   defaultValue,
   onValueChange,
+  size = TABS_SIZE.md,
   value,
+  variant = TABS_VARIANT.default,
   withArrows,
   ...props
 }, ref): JSX.Element => {
@@ -23,7 +24,10 @@ const Tabs: FC<TabsProp> = forwardRef(({
   }, [value, defaultValue]);
 
   return (
-    <TabsProvider withArrows={ withArrows }>
+    <TabsProvider
+      size={ size }
+      variant={ variant }
+      withArrows={ withArrows }>
       <VendorTabs.Root
         className={ className }
         data-ods="tabs"
diff --git a/packages/ods-react/src/components/tabs/src/constants/tabs-size.ts b/packages/ods-react/src/components/tabs/src/constants/tabs-size.ts
new file mode 100644
index 000000000..a284028bb
--- /dev/null
+++ b/packages/ods-react/src/components/tabs/src/constants/tabs-size.ts
@@ -0,0 +1,15 @@
+enum TABS_SIZE {
+  md = 'md',
+  sm = 'sm',
+  xs = 'xs',
+}
+
+type TabsSize =`${TABS_SIZE}`;
+
+const TABS_SIZES = Object.freeze(Object.values(TABS_SIZE));
+
+export {
+  TABS_SIZE,
+  TABS_SIZES,
+  type TabsSize,
+};
diff --git a/packages/ods-react/src/components/tabs/src/constants/tabs-variant.ts b/packages/ods-react/src/components/tabs/src/constants/tabs-variant.ts
new file mode 100644
index 000000000..bab5d69f4
--- /dev/null
+++ b/packages/ods-react/src/components/tabs/src/constants/tabs-variant.ts
@@ -0,0 +1,14 @@
+enum TABS_VARIANT {
+  default = 'default',
+  switch = 'switch',
+}
+
+type TabsVariant =`${TABS_VARIANT}`;
+
+const TABS_VARIANTS = Object.freeze(Object.values(TABS_VARIANT));
+
+export {
+  TABS_VARIANT,
+  TABS_VARIANTS,
+  type TabsVariant,
+};
diff --git a/packages/ods-react/src/components/tabs/src/contexts/useTabs.tsx b/packages/ods-react/src/components/tabs/src/contexts/useTabs.tsx
index a57888d09..edf85ae3e 100644
--- a/packages/ods-react/src/components/tabs/src/contexts/useTabs.tsx
+++ b/packages/ods-react/src/components/tabs/src/contexts/useTabs.tsx
@@ -1,4 +1,6 @@
 import { type JSX, type ReactNode, type RefObject, createContext, useContext, useState } from 'react';
+import { type TabsSize } from '../constants/tabs-size';
+import { type TabsVariant } from '../constants/tabs-variant';
 
 interface TabsValueChangeEvent {
   value: string,
@@ -13,32 +15,51 @@ interface TabsRootProp {
    * Callback fired when the state of selected tab changes.
    */
   onValueChange?: (event: TabsValueChangeEvent) => void,
+  /**
+   * The size preset to use.
+   */
+  size?: TabsSize,
   /**
    * The controlled value of the selected tab.
    */
   value?: string,
+  /**
+   * The variant preset to use.
+   */
+  variant?: TabsVariant,
   /**
    * Whether the component displays navigation arrows around the tabs.
    */
   withArrows?: boolean,
 }
 
+interface TabsProviderProp extends Pick<TabsRootProp, 'size' | 'variant' | 'withArrows'> {
+  children: ReactNode;
+}
+
 type TabsContextType = Omit<TabsProviderProp, 'children'> & {
   scrollContainerRef?: RefObject<HTMLElement> | null;
   setScrollContainerRef?: (ref: RefObject<HTMLElement>) => void;
 }
 
-interface TabsProviderProp extends Pick<TabsRootProp, 'withArrows'> {
-  children: ReactNode;
-}
-
 const TabsContext = createContext<TabsContextType>({});
 
-function TabsProvider({ children, withArrows }: TabsProviderProp): JSX.Element {
+function TabsProvider({
+  children,
+  size,
+  variant,
+  withArrows,
+}: TabsProviderProp): JSX.Element {
   const [scrollContainerRef, setScrollContainerRef] = useState<RefObject<HTMLElement> | null>(null);
 
   return (
-    <TabsContext.Provider value={{ scrollContainerRef, setScrollContainerRef, withArrows }}>
+    <TabsContext.Provider value={{
+      scrollContainerRef,
+      setScrollContainerRef,
+      size,
+      variant,
+      withArrows,
+    }}>
       { children }
     </TabsContext.Provider>
   );
diff --git a/packages/ods-react/src/components/tabs/src/dev.stories.tsx b/packages/ods-react/src/components/tabs/src/dev.stories.tsx
index 339e4c79e..e6e583137 100644
--- a/packages/ods-react/src/components/tabs/src/dev.stories.tsx
+++ b/packages/ods-react/src/components/tabs/src/dev.stories.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Tab, TabContent, TabList, Tabs } from '.';
+import { TABS_SIZE, TABS_VARIANT, Tab, TabContent, TabList, Tabs } from '.';
 import style from './dev.module.css';
 
 export default {
@@ -7,6 +7,25 @@ export default {
   title: 'Tabs dev',
 };
 
+export const CustomStyle = () => (
+  <Tabs defaultValue="tab1" className={ style[ 'custom-tabs' ] }>
+    <TabList className={ style[ 'custom-tabs-tablist' ] }>
+      <Tab value="tab1" className={ style[ 'custom-tabs-tablist-tab' ] }>Tab 1</Tab>
+      <Tab value="tab2" className={ style[ 'custom-tabs-tablist-tab' ] }>Tab 2</Tab>
+      <Tab value="tab3" className={ style[ 'custom-tabs-tablist-tab' ] }>Tab 3</Tab>
+    </TabList>
+    <TabContent className={ style[ 'custom-tabs-content' ] } value="tab1">
+      <p>Tab 1 Content</p>
+    </TabContent>
+    <TabContent value="tab2">
+      <p>Tab 2 Content</p>
+    </TabContent>
+    <TabContent value="tab3">
+      <p>Tab 3 Content</p>
+    </TabContent>
+  </Tabs>
+);
+
 export const Default = () => (
   <Tabs defaultValue="tab1">
     <TabList>
@@ -78,23 +97,225 @@ export const OverflowX = () => (
   </div>
 );
 
-export const CustomStyle = () => (
-  <Tabs defaultValue="tab1" className={ style[ 'custom-tabs' ] }>
-    <TabList className={ style[ 'custom-tabs-tablist' ] }>
-      <Tab value="tab1" className={ style[ 'custom-tabs-tablist-tab' ] }>Tab 1</Tab>
-      <Tab value="tab2" className={ style[ 'custom-tabs-tablist-tab' ] }>Tab 2</Tab>
-      <Tab value="tab3" className={ style[ 'custom-tabs-tablist-tab' ] }>Tab 3</Tab>
-    </TabList>
-    <TabContent className={ style[ 'custom-tabs-content' ] } value="tab1">
-      <p>Tab 1 Content</p>
-    </TabContent>
-    <TabContent value="tab2">
-      <p>Tab 2 Content</p>
-    </TabContent>
-    <TabContent value="tab3">
-      <p>Tab 3 Content</p>
-    </TabContent>
-  </Tabs>
+export const Size = () => (
+  <>
+    <p>MD</p>
+    <Tabs defaultValue="tab1" size={ TABS_SIZE.md } withArrows>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+        <Tab value="tab4">Tab 4</Tab>
+        <Tab value="tab5">Tab 5</Tab>
+        <Tab value="tab6">Tab 6</Tab>
+        <Tab value="tab7">Tab 7</Tab>
+        <Tab value="tab8">Tab 8</Tab>
+        <Tab value="tab9">Tab 9</Tab>
+        <Tab value="tab10">Tab 10</Tab>
+        <Tab value="tab11">Tab 11</Tab>
+        <Tab value="tab12">Tab 12</Tab>
+        <Tab value="tab13">Tab 13</Tab>
+        <Tab value="tab14">Tab 14</Tab>
+        <Tab value="tab15">Tab 15</Tab>
+      </TabList>
+    </Tabs>
+
+    <br /><br />
+
+    <Tabs defaultValue="tab1" size={ TABS_SIZE.md } variant={ TABS_VARIANT.switch } withArrows>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+        <Tab value="tab4">Tab 4</Tab>
+        <Tab value="tab5">Tab 5</Tab>
+        <Tab value="tab6">Tab 6</Tab>
+        <Tab value="tab7">Tab 7</Tab>
+        <Tab value="tab8">Tab 8</Tab>
+        <Tab value="tab9">Tab 9</Tab>
+        <Tab value="tab10">Tab 10</Tab>
+        <Tab value="tab11">Tab 11</Tab>
+        <Tab value="tab12">Tab 12</Tab>
+        <Tab value="tab13">Tab 13</Tab>
+        <Tab value="tab14">Tab 14</Tab>
+        <Tab value="tab15">Tab 15</Tab>
+      </TabList>
+    </Tabs>
+
+    <p>SM</p>
+    <Tabs defaultValue="tab1" size={ TABS_SIZE.sm } withArrows>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+        <Tab value="tab4">Tab 4</Tab>
+        <Tab value="tab5">Tab 5</Tab>
+        <Tab value="tab6">Tab 6</Tab>
+        <Tab value="tab7">Tab 7</Tab>
+        <Tab value="tab8">Tab 8</Tab>
+        <Tab value="tab9">Tab 9</Tab>
+        <Tab value="tab10">Tab 10</Tab>
+        <Tab value="tab11">Tab 11</Tab>
+        <Tab value="tab12">Tab 12</Tab>
+        <Tab value="tab13">Tab 13</Tab>
+        <Tab value="tab14">Tab 14</Tab>
+        <Tab value="tab15">Tab 15</Tab>
+      </TabList>
+    </Tabs>
+
+    <br /><br />
+
+    <Tabs defaultValue="tab1" size={ TABS_SIZE.sm } variant={ TABS_VARIANT.switch } withArrows>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+        <Tab value="tab4">Tab 4</Tab>
+        <Tab value="tab5">Tab 5</Tab>
+        <Tab value="tab6">Tab 6</Tab>
+        <Tab value="tab7">Tab 7</Tab>
+        <Tab value="tab8">Tab 8</Tab>
+        <Tab value="tab9">Tab 9</Tab>
+        <Tab value="tab10">Tab 10</Tab>
+        <Tab value="tab11">Tab 11</Tab>
+        <Tab value="tab12">Tab 12</Tab>
+        <Tab value="tab13">Tab 13</Tab>
+        <Tab value="tab14">Tab 14</Tab>
+        <Tab value="tab15">Tab 15</Tab>
+      </TabList>
+    </Tabs>
+
+    <p>XS</p>
+    <Tabs defaultValue="tab1" size={ TABS_SIZE.xs } withArrows>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+        <Tab value="tab4">Tab 4</Tab>
+        <Tab value="tab5">Tab 5</Tab>
+        <Tab value="tab6">Tab 6</Tab>
+        <Tab value="tab7">Tab 7</Tab>
+        <Tab value="tab8">Tab 8</Tab>
+        <Tab value="tab9">Tab 9</Tab>
+        <Tab value="tab10">Tab 10</Tab>
+        <Tab value="tab11">Tab 11</Tab>
+        <Tab value="tab12">Tab 12</Tab>
+        <Tab value="tab13">Tab 13</Tab>
+        <Tab value="tab14">Tab 14</Tab>
+        <Tab value="tab15">Tab 15</Tab>
+      </TabList>
+    </Tabs>
+
+    <br /><br />
+
+    <Tabs defaultValue="tab1" size={ TABS_SIZE.xs } variant={ TABS_VARIANT.switch } withArrows>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+        <Tab value="tab4">Tab 4</Tab>
+        <Tab value="tab5">Tab 5</Tab>
+        <Tab value="tab6">Tab 6</Tab>
+        <Tab value="tab7">Tab 7</Tab>
+        <Tab value="tab8">Tab 8</Tab>
+        <Tab value="tab9">Tab 9</Tab>
+        <Tab value="tab10">Tab 10</Tab>
+        <Tab value="tab11">Tab 11</Tab>
+        <Tab value="tab12">Tab 12</Tab>
+        <Tab value="tab13">Tab 13</Tab>
+        <Tab value="tab14">Tab 14</Tab>
+        <Tab value="tab15">Tab 15</Tab>
+      </TabList>
+    </Tabs>
+  </>
+);
+
+export const Variant = () => (
+  <>
+    <p>Default rendering</p>
+
+    <Tabs defaultValue="tab1" variant={ TABS_VARIANT.default }>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+      </TabList>
+    </Tabs>
+
+    <br /><br />
+
+    <Tabs defaultValue="tab1" variant={ TABS_VARIANT.switch }>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+      </TabList>
+    </Tabs>
+
+    <p>With arrows</p>
+
+    <Tabs defaultValue="tab1" variant={ TABS_VARIANT.default } withArrows>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+        <Tab value="tab4">Tab 4</Tab>
+        <Tab value="tab5">Tab 5</Tab>
+        <Tab value="tab6">Tab 6</Tab>
+        <Tab value="tab7">Tab 7</Tab>
+        <Tab value="tab8">Tab 8</Tab>
+        <Tab value="tab9">Tab 9</Tab>
+        <Tab value="tab10">Tab 10</Tab>
+        <Tab value="tab11">Tab 11</Tab>
+        <Tab value="tab12">Tab 12</Tab>
+        <Tab value="tab13">Tab 13</Tab>
+        <Tab value="tab14">Tab 14</Tab>
+        <Tab value="tab15">Tab 15</Tab>
+      </TabList>
+    </Tabs>
+
+    <br /><br />
+
+    <Tabs defaultValue="tab1" variant={ TABS_VARIANT.switch } withArrows>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+        <Tab value="tab4">Tab 4</Tab>
+        <Tab value="tab5">Tab 5</Tab>
+        <Tab value="tab6">Tab 6</Tab>
+        <Tab value="tab7">Tab 7</Tab>
+        <Tab value="tab8">Tab 8</Tab>
+        <Tab value="tab9">Tab 9</Tab>
+        <Tab value="tab10">Tab 10</Tab>
+        <Tab value="tab11">Tab 11</Tab>
+        <Tab value="tab12">Tab 12</Tab>
+        <Tab value="tab13">Tab 13</Tab>
+        <Tab value="tab14">Tab 14</Tab>
+        <Tab value="tab15">Tab 15</Tab>
+      </TabList>
+    </Tabs>
+
+    <p>Disabled</p>
+
+    <Tabs defaultValue="tab1" variant={ TABS_VARIANT.default }>
+      <TabList>
+        <Tab value="tab1" disabled>Tab 1</Tab>
+        <Tab value="tab2" disabled>Tab 2</Tab>
+        <Tab value="tab3" disabled>Tab 3</Tab>
+      </TabList>
+    </Tabs>
+
+    <br /><br />
+
+    <Tabs defaultValue="tab1" variant={ TABS_VARIANT.switch }>
+      <TabList>
+        <Tab value="tab1" disabled>Tab 1</Tab>
+        <Tab value="tab2" disabled>Tab 2</Tab>
+        <Tab value="tab3" disabled>Tab 3</Tab>
+      </TabList>
+    </Tabs>
+  </>
 );
 
 export const WithArrows = () => (
diff --git a/packages/ods-react/src/components/tabs/src/index.ts b/packages/ods-react/src/components/tabs/src/index.ts
index 555c9062f..7dafb1b05 100644
--- a/packages/ods-react/src/components/tabs/src/index.ts
+++ b/packages/ods-react/src/components/tabs/src/index.ts
@@ -2,4 +2,6 @@ export { Tabs, type TabsProp } from './components/tabs/Tabs';
 export { TabList, type TabListProp } from './components/tab-list/TabList';
 export { Tab, type TabProp } from './components/tab/Tab';
 export { TabContent, type TabContentProp } from './components/tab-content/TabContent';
+export { TABS_SIZE, TABS_SIZES, type TabsSize } from './constants/tabs-size';
+export { TABS_VARIANT, TABS_VARIANTS, type TabsVariant } from './constants/tabs-variant';
 export { type TabsValueChangeEvent } from './contexts/useTabs';
diff --git a/packages/storybook/.storybook/manager.tsx b/packages/storybook/.storybook/manager.tsx
index c63431061..1eb4bf827 100644
--- a/packages/storybook/.storybook/manager.tsx
+++ b/packages/storybook/.storybook/manager.tsx
@@ -1,4 +1,4 @@
-import { type BADGE_COLOR, Badge } from '@ovhcloud/ods-react';
+import { BADGE_COLOR, Badge } from '@ovhcloud/ods-react';
 import { addons } from '@storybook/manager-api';
 import classNames from 'classnames';
 import React from 'react';
@@ -10,12 +10,23 @@ import { light } from './ods.theme';
 import styles from './manager.module.css';
 
 function renderLabel(name: string, tags: string[], isDoc: boolean) {
-  let badge = '';
+  let badge;
 
   if (tags.indexOf('beta') > -1) {
-    badge = 'beta';
+    badge = {
+      color: BADGE_COLOR.beta,
+      label: 'beta',
+    }
   } else if (tags.indexOf('new') > -1) {
-    badge = 'new';
+    badge = {
+      color: BADGE_COLOR.new,
+      label: 'new',
+    }
+  } else if (tags.indexOf('deprecated') > -1) {
+    badge = {
+      color: BADGE_COLOR.warning,
+      label: 'deprecated',
+    }
   }
 
   if (!badge) {
@@ -33,9 +44,9 @@ function renderLabel(name: string, tags: string[], isDoc: boolean) {
 
       <Badge
         className={ styles['label__badge'] }
-        color={ badge as BADGE_COLOR }
+        color={ badge.color }
         size="sm">
-        { badge.toUpperCase() }
+        { badge.label.toUpperCase() }
       </Badge>
     </div>
   );
diff --git a/packages/storybook/stories/components/switch/Deprecated.tsx b/packages/storybook/stories/components/switch/Deprecated.tsx
new file mode 100644
index 000000000..e50247e0d
--- /dev/null
+++ b/packages/storybook/stories/components/switch/Deprecated.tsx
@@ -0,0 +1,27 @@
+import { ICON_NAME, MESSAGE_COLOR, Message, MessageBody, MessageIcon } from '@ovhcloud/ods-react';
+import React from 'react';
+import { StorybookLink } from '../../../src/components/storybookLink/StorybookLink';
+import { REACT_COMPONENTS_TITLE, STORY } from '../../../src/constants/meta';
+
+const Deprecated = () => (
+  <Message
+    color={ MESSAGE_COLOR.warning }
+    dismissible={ false }
+    style={{ width: '100%' }}>
+    <MessageIcon name={ ICON_NAME.triangleExclamation } />
+
+    <MessageBody>
+      Component is now deprecated and will be removed in a future major release.
+      You can use different components instead depending on your use-case:
+      <ul>
+        <li>managing navigation: move to <StorybookLink kind={ REACT_COMPONENTS_TITLE.tabs } story={ STORY.documentation }>Tabs</StorybookLink> using the switch variant.</li>
+        <li>managing option activation: move to a <StorybookLink kind={ REACT_COMPONENTS_TITLE.buttonGroup } story={ STORY.documentation }>Button Group</StorybookLink>.</li>
+        <li>as a form element: move to a <StorybookLink kind={ REACT_COMPONENTS_TITLE.radioGroup } story={ STORY.documentation }>Radio Group</StorybookLink>.</li>
+      </ul>
+    </MessageBody>
+  </Message>
+);
+
+export {
+  Deprecated,
+};
diff --git a/packages/storybook/stories/components/switch/documentation.mdx b/packages/storybook/stories/components/switch/documentation.mdx
index 48452e246..96de8e4db 100644
--- a/packages/storybook/stories/components/switch/documentation.mdx
+++ b/packages/storybook/stories/components/switch/documentation.mdx
@@ -8,6 +8,7 @@ import { Canvas } from '../../../src/components/canvas/Canvas';
 import { ExternalLink } from '../../../src/components/externalLink/ExternalLink';
 import { Heading } from '../../../src/components/heading/Heading';
 import { IdentityCard } from '../../../src/components/identityCard/IdentityCard';
+import { Deprecated } from './Deprecated';
 
 <Meta of={ SwitchStories } name="Documentation" />
 
@@ -17,6 +18,8 @@ _A **Switch** allows users to quickly and easily switch between several states,
 
 <Canvas of={ SwitchStories.Overview } sourceState="none" />
 
+<Deprecated />
+
 <Heading label="Overview" level={ 2 } />
 
 <IdentityCard aliases={ ['Button group', 'Segmented control', 'Toggle group'] }
diff --git a/packages/storybook/stories/components/switch/switch.stories.tsx b/packages/storybook/stories/components/switch/switch.stories.tsx
index b6e7694b8..1564defbf 100644
--- a/packages/storybook/stories/components/switch/switch.stories.tsx
+++ b/packages/storybook/stories/components/switch/switch.stories.tsx
@@ -11,6 +11,7 @@ const meta: Meta<SwitchProp> = {
   argTypes: excludeFromDemoControls(['defaultValue', 'onValueChange', 'value']),
   component: Switch,
   subcomponents: { SwitchItem },
+  tags: ['deprecated'],
   title: 'React Components/Switch',
 };
 
diff --git a/packages/storybook/stories/components/switch/technical-information.mdx b/packages/storybook/stories/components/switch/technical-information.mdx
index 1cd77efa3..20f719f2c 100644
--- a/packages/storybook/stories/components/switch/technical-information.mdx
+++ b/packages/storybook/stories/components/switch/technical-information.mdx
@@ -6,6 +6,7 @@ import { Banner } from '../../../src/components/banner/Banner';
 import { Canvas } from '../../../src/components/canvas/Canvas';
 import { Heading } from '../../../src/components/heading/Heading';
 import { TechnicalSpecification } from '../../../src/components/technicalSpecification/TechnicalSpecification';
+import { Deprecated } from './Deprecated';
 import * as SwitchStories from './switch.stories';
 
 <Meta of={ SwitchStories } name="Technical information" />
@@ -16,6 +17,8 @@ import * as SwitchStories from './switch.stories';
 
 <Canvas of={ SwitchStories.Overview } sourceState="none" />
 
+<Deprecated />
+
 <Heading label="Anatomy" level={ 2 } />
 
 <Anatomy src="components/switch/anatomy-tech.png" />
diff --git a/packages/storybook/stories/components/tabs/documentation.mdx b/packages/storybook/stories/components/tabs/documentation.mdx
index 86ee4cf4f..1c036ce95 100644
--- a/packages/storybook/stories/components/tabs/documentation.mdx
+++ b/packages/storybook/stories/components/tabs/documentation.mdx
@@ -41,11 +41,14 @@ They can also be used to filter content via some common denominator.
     '- Don\'t overload the interface with too many tabs. Use dropdowns if you need more than 5 tabs',
     '- Don\'t use long or verbose labels',
     '- Don\'t use external links or actions as tab triggers, Tabs should only control the visibility of in-page content',
+    '- Avoid using the switch variant for main navigation or complex page segmentation. Prefer the default Tabs for those cases instead',
   ]}
   dos={[
     '- Use Tabs to group related content under the same page when it fits in a shared context',
     '- Keep Tab labels short, clear, and scannable, use nouns or very short phrases (1–3 words max)',
     '- Use Tabs for horizontal navigation, not hierarchical structure or progressive steps',
+    '- Do use default Tabs for main navigation',
+    '- Do use switch variant when Tabs act as a mode selector or view switcher (e.g., toggling between "List" and "Grid" views)',
   ]}
 />
 
@@ -86,6 +89,19 @@ When at the last tab, the right button is displayed but disabled.
 
 Scroll buttons do not affect tab selection. They only change the visible portion of the **Tabs** list.
 
+<Heading label="Variation" level={ 2 } />
+
+<Heading label="Default (standard Tabs)" level={ 3 } />
+
+Used for displaying and organizing related content within the same page or view.
+The default **Tabs** variant follows the standard horizontal layout, with a clear underline or border to indicate the active state.
+It is ideal for primary navigation within a section or module.
+
+<Heading label="Switch (sub-navigation)" level={ 3 } />
+
+The switch variant is visually distinct of **Tabs**, designed for switching between sub-views or modes within the same context.
+It behaves as a lightweight navigation switch between views.
+
 <Heading label="Navigation" level={ 2 } />
 
 <Heading label="Focus Management" level={ 3 } />
diff --git a/packages/storybook/stories/components/tabs/tabs.stories.tsx b/packages/storybook/stories/components/tabs/tabs.stories.tsx
index be28e382f..80511a3b6 100644
--- a/packages/storybook/stories/components/tabs/tabs.stories.tsx
+++ b/packages/storybook/stories/components/tabs/tabs.stories.tsx
@@ -1,12 +1,11 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import { Tabs, TabList, Tab, TabContent, type TabsProp, type TabsValueChangeEvent } from '../../../../ods-react/src/components/tabs/src';
+import { TABS_SIZE, TABS_SIZES, TABS_VARIANT, TABS_VARIANTS, Tabs, TabList, Tab, TabContent, type TabsProp, type TabsValueChangeEvent } from '../../../../ods-react/src/components/tabs/src';
 import { excludeFromDemoControls, orderControls } from '../../../src/helpers/controls';
 import { staticSourceRenderConfig } from '../../../src/helpers/source';
 import { CONTROL_CATEGORY } from '../../../src/constants/controls';
 
 type Story = StoryObj<TabsProp>;
-// type DemoArg = Partial<TabListProp>;
 
 const meta: Meta<TabsProp> = {
   component: Tabs,
@@ -20,8 +19,8 @@ export default meta;
 export const Demo: Story = {
   render: (arg) => (
     <Tabs
-      defaultValue='tab1'
-      withArrows={ arg.withArrows }>
+      defaultValue="tab1"
+      { ...arg }>
       <TabList >
         <Tab value="tab1">Tab 1</Tab>
         <Tab value="tab2">Tab 2</Tab>
@@ -57,6 +56,22 @@ export const Demo: Story = {
     </Tabs>
   ),
   argTypes: orderControls({
+    size: {
+      table: {
+        category: CONTROL_CATEGORY.design,
+        type: { summary: 'TABS_SIZE' }
+      },
+      control: { type: 'select' },
+      options: TABS_SIZES,
+    },
+    variant: {
+      table: {
+        category: CONTROL_CATEGORY.design,
+        type: { summary: 'TABS_VARIANT' }
+      },
+      control: { type: 'select' },
+      options: TABS_VARIANTS,
+    },
     withArrows: {
       table: {
         category: CONTROL_CATEGORY.design,
@@ -120,7 +135,7 @@ export const Default: Story = {
   },
   tags: ['!dev'],
   render: ({}) => (
-    <Tabs defaultValue='tab1'>
+    <Tabs defaultValue="tab1">
       <TabList>
         <Tab value="tab1">Tab 1</Tab>
         <Tab value="tab2">Tab 2</Tab>
@@ -167,6 +182,70 @@ export const Overflow: Story = {
   ),
 };
 
+export const Size: Story = {
+  globals: {
+    imports: `import { TABS_SIZE, TABS_VARIANT, Tabs, TabList, Tab } from '@ovhcloud/ods-react';`,
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <>
+      <p>MD</p>
+      <Tabs
+        defaultValue="tab1"
+        size={ TABS_SIZE.md }
+        variant={ TABS_VARIANT.switch }>
+        <TabList>
+          <Tab value="tab1">Tab 1</Tab>
+          <Tab value="tab2">Tab 2</Tab>
+          <Tab value="tab3">Tab 3</Tab>
+        </TabList>
+      </Tabs>
+
+      <p>SM</p>
+      <Tabs
+        defaultValue="tab1"
+        size={ TABS_SIZE.sm }
+        variant={ TABS_VARIANT.switch }>
+        <TabList>
+          <Tab value="tab1">Tab 1</Tab>
+          <Tab value="tab2">Tab 2</Tab>
+          <Tab value="tab3">Tab 3</Tab>
+        </TabList>
+      </Tabs>
+
+      <p>XS</p>
+      <Tabs
+        defaultValue="tab1"
+        size={ TABS_SIZE.xs }
+        variant={ TABS_VARIANT.switch }>
+        <TabList>
+          <Tab value="tab1">Tab 1</Tab>
+          <Tab value="tab2">Tab 2</Tab>
+          <Tab value="tab3">Tab 3</Tab>
+        </TabList>
+      </Tabs>
+    </>
+  ),
+};
+
+export const Variant: Story = {
+  globals: {
+    imports: `import { TABS_VARIANT, Tabs, TabList, Tab } from '@ovhcloud/ods-react';`,
+  },
+  tags: ['!dev'],
+  render: ({}) => (
+    <Tabs
+      defaultValue="tab1"
+      variant={ TABS_VARIANT.switch }>
+      <TabList>
+        <Tab value="tab1">Tab 1</Tab>
+        <Tab value="tab2">Tab 2</Tab>
+        <Tab value="tab3">Tab 3</Tab>
+      </TabList>
+    </Tabs>
+  ),
+};
+
 export const WithArrows: Story = {
   globals: {
     imports: `import { Tabs, TabList, Tab } from '@ovhcloud/ods-react';`,
diff --git a/packages/storybook/stories/components/tabs/technical-information.mdx b/packages/storybook/stories/components/tabs/technical-information.mdx
index efead480e..cb821a8eb 100644
--- a/packages/storybook/stories/components/tabs/technical-information.mdx
+++ b/packages/storybook/stories/components/tabs/technical-information.mdx
@@ -62,6 +62,14 @@ import * as TabsStories from './tabs.stories';
 
 <Canvas of={ TabsStories.Default } sourceState="shown" />
 
+<Heading label="Variant" level={ 3 } />
+
+<Canvas of={ TabsStories.Variant } sourceState="shown" />
+
+<Heading label="Size" level={ 3 } />
+
+<Canvas of={ TabsStories.Size } sourceState="shown" />
+
 <Heading label="Disabled tab" level={ 3 } />
 
 <Canvas of={ TabsStories.Disabled } sourceState="shown" />