alanbsmith · Oct 12, 2026 · Sep 15, 2026 · Sep 15, 2026 · Sep 15, 2026 · Sep 17, 2026
@@ -399,7 +399,7 @@ functional shortcuts, refer to the storybook documentation and our example stori
 **PR:** [#4062](https://github.com/Workday/canvas-kit/pull/4062)
 
 A new `Tabs` component has been added to `@workday/canvas-kit-preview-react`, aligned with the Sana
-Canvas visual language. It supports `filled` and `outlined` variants.
+Canvas visual language. It supports `filled` and `outlined` variants, with `outlined` variant as default.
 
 ```tsx
 import {Tabs} from '@workday/canvas-kit-preview-react/tabs';

@@ -404,7 +404,7 @@ functional shortcuts, refer to the storybook documentation and our example stori
 **PR:** [#4062](https://github.com/Workday/canvas-kit/pull/4062)
 
 A new `Tabs` component has been added to `@workday/canvas-kit-preview-react`, aligned with the Sana
-Canvas visual language. It supports `filled` and `outlined` variants.
+Canvas visual language. It supports `filled` and `outlined` variants, with `outlined` variant as default.
 
 ```tsx
 import {Tabs} from '@workday/canvas-kit-preview-react/tabs';

@@ -81,11 +81,6 @@ export interface TabsItemProps
    * set while all inactive tabs should have a `tabIndex={-1}`
    */
   tabIndex?: number;
-  /**
-   * The variant of the TabsItem.
-   * @default 'filled'
-   */
-  variant?: 'filled' | 'outlined';
 }
 
 const tabItemStencil = createStencil({
@@ -219,7 +214,9 @@ const tabItemStencil = createStencil({
   },
 });
 
-export const StyledTabItem = createComponent('button')<TabsItemProps>({
+export const StyledTabItem = createComponent('button')<
+  TabsItemProps & {variant?: 'filled' | 'outlined'}
+>({
   displayName: 'StyledTabItem',
   Component: ({children, variant, ...elemProps}, ref, Element) => {
     return (

@@ -53,9 +53,9 @@ export const useTabsModel = createModelHook({
     orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
     /**
      * The variant of the Tabs.
-     * @default 'filled'
+     * @default 'outlined'
      */
-    variant: 'filled' as 'filled' | 'outlined',
+    variant: 'outlined' as 'filled' | 'outlined',
     menuConfig: {} as typeof useMenuModel.TConfig,
   },
   requiredConfig: useOverflowListModel.requiredConfig,
@@ -229,7 +229,7 @@ export const useTabsModel = createModelHook({
      * state setting phase.
      */
     panelIndexRef: panels.state.indexRef,
-    variant: config.variant || 'filled',
+    variant: config.variant,
   };
 
   const overflowItems = React.useMemo(

@@ -10,7 +10,7 @@ import {DynamicTabs} from './examples/DynamicTabs';
 import {HoistedModel} from './examples/HoistedModel';
 import {Icons} from './examples/Icons';
 import {NamedTabs} from './examples/NamedTabs';
-import {OutlinedTabs} from './examples/OutlinedTabs';
+import {FilledTabs} from './examples/FilledTabs';
 import {OverflowTabs} from './examples/OverflowTabs';
 import {RightToLeft} from './examples/RightToLeft';
 import {SinglePanel} from './examples/SinglePanel';
@@ -44,11 +44,11 @@ that does not support overflow.
 
 <ExampleCodeBlock code={Basic} />
 
-### Outlined Tabs
+### Filled Tabs
 
-Set the `variant` prop of `Tabs` to `outlined` to render an outlined style of tabs.
+Set the `variant` prop of `Tabs` to `filled` to render a filled style of tabs.
 
-<ExampleCodeBlock code={OutlinedTabs} />
+<ExampleCodeBlock code={FilledTabs} />
 
 ### Overflow Tabs
 

@@ -7,10 +7,10 @@ import {AlternativeTabStop as AlternativeTabStopExample} from './examples/Altern
 import {Basic as BasicExample} from './examples/Basic';
 import {DisabledTab as DisabledTabExample} from './examples/DisabledTab';
 import {DynamicTabs as DynamicTabsExample} from './examples/DynamicTabs';
+import {FilledTabs as FilledTabsExample} from './examples/FilledTabs';
 import {HoistedModel as HoistedModelExample} from './examples/HoistedModel';
 import {Icons as IconsExample} from './examples/Icons';
 import {NamedTabs as NamedTabsExample} from './examples/NamedTabs';
-import {OutlinedTabs as OutlinedTabsExample} from './examples/OutlinedTabs';
 import {OverflowTabs as OverflowTabsExample} from './examples/OverflowTabs';
 import {RightToLeft as RightToLeftExample} from './examples/RightToLeft';
 import {SinglePanel as SinglePanelExample} from './examples/SinglePanel';
@@ -31,8 +31,8 @@ type Story = StoryObj<typeof Tabs>;
 export const Basic: Story = {
   render: BasicExample,
 };
-export const OutlinedTabs: Story = {
-  render: OutlinedTabsExample,
+export const FilledTabs: Story = {
+  render: FilledTabsExample,
 };
 export const NamedTabs: Story = {
   render: NamedTabsExample,

@@ -2,9 +2,9 @@ import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
 import {cssVar} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-export const OutlinedTabs = () => {
+export const FilledTabs = () => {
   return (
-    <Tabs variant="outlined">
+    <Tabs variant="filled">
       <Tabs.List>
         <Tabs.Item>First Tab</Tabs.Item>
         <Tabs.Item>Second Tab</Tabs.Item>

@@ -22,7 +22,7 @@ export const RightToLeft = () => {
           <Tabs.Panel>תוכן החמישי</Tabs.Panel>
         </div>
       </Tabs>
-      <Tabs variant="outlined">
+      <Tabs variant="filled">
         <Tabs.List>
           <Tabs.Item>ראשון</Tabs.Item>
           <Tabs.Item>שְׁנִיָה</Tabs.Item>

@@ -127,7 +127,7 @@ const OverflowTabs = () => {
           )}
         </Tabs.Panels>
       </Tabs>
-      <Tabs variant="outlined" items={items}>
+      <Tabs variant="filled" items={items}>
         <Tabs.List
           overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}
           cs={{marginBlockStart: system.gap.lg}}