diff --git a/pages/theming/themed-stroke-width.page.tsx b/pages/theming/themed-stroke-width.page.tsx
index b794609c4f..86e296da6b 100644
--- a/pages/theming/themed-stroke-width.page.tsx
+++ b/pages/theming/themed-stroke-width.page.tsx
@@ -18,6 +18,8 @@ import {
SelectProps,
SpaceBetween,
StatusIndicator,
+ Tabs,
+ TabsProps,
} from '~components';
import Icon, { IconProps } from '~components/icon';
import icons from '~components/icon/generated/icons';
@@ -45,6 +47,34 @@ const createStrokeHandler = (setter: (value: string) => void) => {
};
};
+function TabsExample() {
+ const tabs: TabsProps.Tab[] = [
+ {
+ id: 'first',
+ label: 'First tab',
+ content: 'First tab content area',
+ dismissible: true,
+ dismissLabel: 'Dismiss first tab',
+ },
+ {
+ id: 'second',
+ label: 'Second tab',
+ content: 'Second tab content area',
+ dismissible: true,
+ dismissLabel: 'Dismiss second tab',
+ },
+ { id: 'third', label: 'Third tab', content: 'Third tab content area' },
+ { id: 'fourth', label: 'Fourth tab', disabled: true, content: 'Fourth tab content area' },
+ ];
+
+ return (
+
+
+
+
+ );
+}
+
export default function ThemedStrokeWidthPage() {
const [themed, setThemed] = useState(false);
const [strokeSmall, setStrokeSmall] = useState('2');
@@ -74,6 +104,11 @@ export default function ThemedStrokeWidthPage() {
borderWidthIconBig: strokeBig ? `${strokeBig}px` : '1.5px',
borderWidthIconLarge: strokeLarge ? `${strokeLarge}px` : '2px',
borderRadiusButton: '8px',
+ fontSizeTabs: '14px',
+ lineHeightTabs: '16px',
+ fontWeightTabs: '700',
+ fontWeightTabsDisabled: '700',
+ spaceTabsVertical: { comfortable: '2px', compact: '0px' },
},
};
@@ -269,6 +304,10 @@ export default function ThemedStrokeWidthPage() {
Warning
Info
+
+
+
+