diff --git a/docs-ui/src/content/toggle-button-group.mdx b/docs-ui/src/content/toggle-button-group.mdx
index de5ac6fcee..cc9110189c 100644
--- a/docs-ui/src/content/toggle-button-group.mdx
+++ b/docs-ui/src/content/toggle-button-group.mdx
@@ -11,6 +11,7 @@ import {
toggleButtonGroupDisallowEmptySnippet,
toggleButtonGroupIconsSnippet,
toggleButtonGroupIconsOnlySnippet,
+ toggleButtonGroupVariantsSnippet,
} from './toggle-button-group.props';
import { ToggleButtonGroupSnippet } from '@/snippets/stories-snippets';
import { PageTitle } from '@/components/PageTitle';
@@ -40,6 +41,16 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
## Examples
+### Variants
+
+}
+ code={toggleButtonGroupVariantsSnippet}
+/>
+
### Single Selection
Cats
`;
-export const toggleButtonGroupSingleSnippet = `
- Apples
- Oranges
- Bananas
+export const toggleButtonGroupSingleSnippet = `
+ Dogs
+ Cats
+ Birds
`;
export const toggleButtonGroupMultipleSnippet = `
@@ -73,3 +73,81 @@ export const toggleButtonGroupIconsOnlySnippet = `
`;
+
+export const toggleButtonGroupVariantsSnippet = `
+
+ Default
+
+
+ Primary 1
+ Option 2
+ Option 3
+
+
+ Secondary 1
+ Option 2
+ Option 3
+
+
+
+
+ On Surface 0
+
+
+ Primary 1
+ Option 2
+ Option 3
+
+
+ Secondary 1
+ Option 2
+ Option 3
+
+
+
+
+ On Surface 1
+
+
+ Primary 1
+ Option 2
+ Option 3
+
+
+ Secondary 1
+ Option 2
+ Option 3
+
+
+
+
+ On Surface 2
+
+
+ Primary 1
+ Option 2
+ Option 3
+
+
+ Secondary 1
+ Option 2
+ Option 3
+
+
+
+
+ On Surface 3
+
+
+ Primary 1
+ Option 2
+ Option 3
+
+
+ Secondary 1
+ Option 2
+ Option 3
+
+
+
+`;
diff --git a/docs-ui/src/content/toggle-button.props.ts b/docs-ui/src/content/toggle-button.props.ts
index 31acd558c7..596b7af71b 100644
--- a/docs-ui/src/content/toggle-button.props.ts
+++ b/docs-ui/src/content/toggle-button.props.ts
@@ -38,9 +38,42 @@ export const toggleButtonUsageSnippet = `import { ToggleButton } from '@backstag
Toggle`;
-export const toggleButtonVariantsSnippet = `
- Primary
- Secondary
+export const toggleButtonVariantsSnippet = `
+
+ Default
+
+ Primary
+ Secondary
+
+
+
+ On Surface 0
+
+ Primary
+ Secondary
+
+
+
+ On Surface 1
+
+ Primary
+ Secondary
+
+
+
+ On Surface 2
+
+ Primary
+ Secondary
+
+
+
+ On Surface 3
+
+ Primary
+ Secondary
+
+
`;
export const toggleButtonSizesSnippet = `
diff --git a/packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx b/packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx
index 55395542e3..36fa774ab5 100644
--- a/packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx
+++ b/packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx
@@ -62,9 +62,42 @@ export const Variants = meta.story({
},
},
render: () => (
-
- Primary
- Secondary
+
+
+ Default
+
+ Primary
+ Secondary
+
+
+
+ On Surface 0
+
+ Primary
+ Secondary
+
+
+
+ On Surface 1
+
+ Primary
+ Secondary
+
+
+
+ On Surface 2
+
+ Primary
+ Secondary
+
+
+
+ On Surface 3
+
+ Primary
+ Secondary
+
+
),
});
diff --git a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx
index 69e48d5789..f023757cca 100644
--- a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx
+++ b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx
@@ -72,6 +72,189 @@ export const MultipleSelection = meta.story({
),
});
+export const Variants = meta.story({
+ args: {
+ selectionMode: 'single',
+ defaultSelectedKeys: ['option1'],
+ },
+ parameters: {
+ argTypes: {
+ selectionMode: {
+ control: false,
+ },
+ },
+ },
+ render: () => (
+
+
+ Default
+
+
+
+ Primary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+ Secondary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+
+ On Surface 0
+
+
+
+ Primary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+ Secondary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+
+ On Surface 1
+
+
+
+ Primary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+ Secondary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+
+ On Surface 2
+
+
+
+ Primary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+ Secondary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+
+ On Surface 3
+
+
+
+ Primary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+ Secondary 1
+
+
+ Option 2
+
+
+ Option 3
+
+
+
+
+
+ ),
+});
+
export const DisabledGroup = meta.story({
args: {
selectionMode: 'single',