diff --git a/packages/react-components/src/App.tsx b/packages/react-components/src/App.tsx
index 10c81c60..b75b6993 100644
--- a/packages/react-components/src/App.tsx
+++ b/packages/react-components/src/App.tsx
@@ -22,6 +22,7 @@ import {
   TextFieldPage,
   SwitchPage,
   TooltipPage,
+  ToggleButtonGroupPage,
 } from "@/pages";
 
 // This icon is available as a plain SVG at src/assets/icon-menu.svg
@@ -169,6 +170,7 @@ function App() {
         <TooltipPage />
         <TextAreaPage />
         <TextFieldPage />
+        <ToggleButtonGroupPage />
       </main>
       <Footer />
       <Footer
diff --git a/packages/react-components/src/components/ToggleButton/ToggleButton.css b/packages/react-components/src/components/ToggleButton/ToggleButton.css
new file mode 100644
index 00000000..fdee048f
--- /dev/null
+++ b/packages/react-components/src/components/ToggleButton/ToggleButton.css
@@ -0,0 +1,83 @@
+.bcds-react-aria-ToggleButton {
+  display: inline-flex;
+  flex-direction: row;
+  flex: 0 1 auto;
+  gap: var(--layout-margin-xsmall);
+  align-items: center;
+  justify-content: center;
+  padding: var(--layout-padding-hair) var(--layout-padding-small);
+  color: var(--typography-color-secondary);
+  background-color: var(--surface-color-secondary-button-disabled);
+  border: none;
+  border-radius: var(--layout-border-radius-medium);
+  box-sizing: content-box;
+  cursor: pointer;
+}
+
+/* Size */
+.bcds-react-aria-ToggleButtonGroup.small > .bcds-react-aria-ToggleButton,
+.bcds-react-aria-ToggleButton.small {
+  font: var(--typography-regular-small-body);
+}
+
+.bcds-react-aria-ToggleButtonGroup.medium > .bcds-react-aria-ToggleButton,
+.bcds-react-aria-ToggleButton.medium {
+  font: var(--typography-regular-body);
+}
+
+/* Icon button */
+.bcds-react-aria-ToggleButton.icon {
+  align-items: center;
+  justify-content: space-around;
+}
+
+.bcds-react-aria-ToggleButton.small.icon {
+  padding: unset;
+  align-self: center;
+  height: var(--icons-size-large);
+  width: var(--icons-size-large);
+  min-width: var(--icons-size-large);
+}
+
+.bcds-react-aria-ToggleButton.medium.icon {
+  padding: unset;
+  height: var(--icons-size-xlarge);
+  width: var(--icons-size-xlarge);
+  min-width: var(--icons-size-xlarge);
+}
+
+/* Pressed */
+.bcds-react-aria-ToggleButton[data-hovered][data-pressed] {
+  background-color: var(--theme-blue-10);
+  border: var(--layout-border-width-small) solid var(--theme-blue-10);
+}
+
+/* Active */
+.bcds-react-aria-ToggleButton[data-selected] {
+  background-color: var(--surface-color-secondary-button-default);
+  color: var(--typography-color-primary);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-secondary-button-default);
+  box-shadow: var(--surface-shadow-small);
+}
+
+/* Hover */
+.bcds-react-aria-ToggleButton[data-hovered] {
+  background-color: var(--surface-color-secondary-button-default);
+  color: var(--typography-color-primary);
+  border: var(--layout-border-width-small) solid
+    var(--surface-color-secondary-button-default);
+  border-radius: var(--layout-border-radius-medium);
+}
+
+/* Focused */
+.bcds-react-aria-ToggleButton[data-focus-visible] {
+  outline: solid var(--layout-border-width-medium)
+    var(--surface-color-border-active);
+}
+
+/* Disabled */
+.bcds-react-aria-ToggleButton[data-disabled] {
+  color: var(--typography-color-disabled);
+  cursor: not-allowed;
+}
diff --git a/packages/react-components/src/components/ToggleButton/ToggleButton.tsx b/packages/react-components/src/components/ToggleButton/ToggleButton.tsx
new file mode 100644
index 00000000..8e5c5725
--- /dev/null
+++ b/packages/react-components/src/components/ToggleButton/ToggleButton.tsx
@@ -0,0 +1,29 @@
+import {
+  ToggleButton as ReactAriaToggleButton,
+  ToggleButtonProps as ReactAriaToggleButtonProps,
+} from "react-aria-components";
+
+import "./ToggleButton.css";
+
+export interface ToggleButtonProps extends ReactAriaToggleButtonProps {
+  size?: "small" | "medium";
+  isIconButton?: boolean;
+}
+
+export default function ToggleButton({
+  size = "medium",
+  children,
+  isIconButton = false,
+  ...props
+}: ToggleButtonProps) {
+  return (
+    <ReactAriaToggleButton
+      className={`bcds-react-aria-ToggleButton ${size} ${
+        isIconButton ? "icon" : null
+      }`}
+      {...props}
+    >
+      {children}
+    </ReactAriaToggleButton>
+  );
+}
diff --git a/packages/react-components/src/components/ToggleButton/index.ts b/packages/react-components/src/components/ToggleButton/index.ts
new file mode 100644
index 00000000..8adc98bb
--- /dev/null
+++ b/packages/react-components/src/components/ToggleButton/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./ToggleButton";
+export type { ToggleButtonProps } from "./ToggleButton";
diff --git a/packages/react-components/src/components/ToggleButtonGroup/ToggleButtonGroup.css b/packages/react-components/src/components/ToggleButtonGroup/ToggleButtonGroup.css
new file mode 100644
index 00000000..7d4f2d81
--- /dev/null
+++ b/packages/react-components/src/components/ToggleButtonGroup/ToggleButtonGroup.css
@@ -0,0 +1,36 @@
+.bcds-react-aria-ToggleButtonGroup {
+  display: inline-flex;
+  gap: var(--layout-margin-small);
+  background-color: var(--surface-color-secondary-button-disabled);
+  border-radius: var(--layout-border-radius-medium);
+  box-sizing: content-box;
+  flex-wrap: wrap;
+  flex-grow: 1;
+}
+
+/* Sizing */
+.bcds-react-aria-ToggleButtonGroup.small {
+  padding: var(--layout-padding-hair) var(--layout-padding-xsmall);
+}
+
+.bcds-react-aria-ToggleButtonGroup.medium {
+  padding: var(--layout-padding-xsmall);
+}
+
+/* Orientation */
+.bcds-react-aria-ToggleButtonGroup[data-orientation="horizontal"] {
+  flex-direction: row;
+  height: var(--layout-margin-xlarge);
+}
+
+.bcds-react-aria-ToggleButtonGroup[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+/* Label */
+.bcds-react-aria-ToggleButtonGroup--Label {
+  display: flex;
+  padding: var(--layout-padding-small) var(--layout-padding-none);
+  font: var(--typography-regular-small-body);
+  color: var(--typography-color-secondary);
+}
diff --git a/packages/react-components/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/react-components/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
new file mode 100644
index 00000000..f9a327b1
--- /dev/null
+++ b/packages/react-components/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -0,0 +1,38 @@
+import {
+  ToggleButtonGroup as ReactAriaToggleButtonGroup,
+  ToggleButtonGroupProps as ReactAriaToggleButtonGroupProps,
+  Text,
+} from "react-aria-components";
+
+import "./ToggleButtonGroup.css";
+
+export interface ToggleButtonGroupProps
+  extends ReactAriaToggleButtonGroupProps {
+  label?: string;
+  size?: "small" | "medium";
+}
+
+export default function ToggleButtonGroup({
+  label,
+  size = "medium",
+  children,
+  ...props
+}: ToggleButtonGroupProps) {
+  return (
+    <>
+      {label && (
+        <Text className="bcds-react-aria-ToggleButtonGroup--Label">
+          {label}
+        </Text>
+      )}
+      <ReactAriaToggleButtonGroup
+        className={`bcds-react-aria-ToggleButtonGroup ${
+          size === "small" ? "small" : "medium"
+        }`}
+        {...props}
+      >
+        {children}
+      </ReactAriaToggleButtonGroup>
+    </>
+  );
+}
diff --git a/packages/react-components/src/components/ToggleButtonGroup/index.ts b/packages/react-components/src/components/ToggleButtonGroup/index.ts
new file mode 100644
index 00000000..7c7a5e9c
--- /dev/null
+++ b/packages/react-components/src/components/ToggleButtonGroup/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./ToggleButtonGroup";
+export type { ToggleButtonGroupProps } from "react-aria-components";
diff --git a/packages/react-components/src/components/index.ts b/packages/react-components/src/components/index.ts
index db0dcff9..752b726e 100644
--- a/packages/react-components/src/components/index.ts
+++ b/packages/react-components/src/components/index.ts
@@ -36,5 +36,7 @@ export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";
 export { default as TextArea } from "./TextArea";
 export { default as TextField } from "./TextField";
+export { default as ToggleButton } from "./ToggleButton";
+export { default as ToggleButtonGroup } from "./ToggleButtonGroup";
 export { default as Switch } from "./Switch";
 export { default as Tooltip, TooltipTrigger } from "./Tooltip";
diff --git a/packages/react-components/src/pages/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/react-components/src/pages/ToggleButtonGroup/ToggleButtonGroup.tsx
new file mode 100644
index 00000000..da1dbba2
--- /dev/null
+++ b/packages/react-components/src/pages/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -0,0 +1,84 @@
+import {
+  ToggleButton,
+  ToggleButtonGroup,
+  SvgCheckCircleIcon,
+  SvgCloseIcon,
+  SvgExclamationCircleIcon,
+} from "@/components";
+
+export default function ToggleButtonGroupPage() {
+  return (
+    <>
+      <h2>Toggle Button Group</h2>
+      <ToggleButtonGroup label="This is a text label">
+        <ToggleButton id="1">
+          <SvgCheckCircleIcon />
+          Button 1
+        </ToggleButton>
+        <ToggleButton id="2">Button 2</ToggleButton>
+        <ToggleButton id="3">Button 3</ToggleButton>
+      </ToggleButtonGroup>
+      <h3>Icon buttons</h3>
+      <ToggleButtonGroup selectionMode="multiple">
+        <ToggleButton id="1" isIconButton aria-label="Yes">
+          <SvgCheckCircleIcon />
+        </ToggleButton>
+        <ToggleButton id="2" isIconButton aria-label="Maybe">
+          <SvgExclamationCircleIcon />
+        </ToggleButton>
+        <ToggleButton id="3" isIconButton aria-label="No">
+          <SvgCloseIcon />
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <h4>Small icon buttons</h4>
+      <ToggleButtonGroup selectionMode="multiple">
+        <ToggleButton id="1" size="small" isIconButton aria-label="Yes">
+          <SvgCheckCircleIcon />
+        </ToggleButton>
+        <ToggleButton id="2" size="small" isIconButton aria-label="Maybe">
+          <SvgExclamationCircleIcon />
+        </ToggleButton>
+        <ToggleButton id="3" size="small" isIconButton aria-label="No">
+          <SvgCloseIcon />
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", width: "30%" }}>
+          <h3>Vertical orientation</h3>
+          <ToggleButtonGroup
+            orientation="vertical"
+            label="This is a text label"
+          >
+            <ToggleButton id="1">Button 1</ToggleButton>
+            <ToggleButton id="2">Button 2</ToggleButton>
+            <ToggleButton id="3">Button 3</ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", width: "30%" }}>
+          <h3>Multiple selection</h3>
+          <ToggleButtonGroup
+            selectionMode="multiple"
+            label="This group allows multiple items to be toggled"
+          >
+            <ToggleButton id="1">Button 1</ToggleButton>
+            <ToggleButton id="2">Button 2</ToggleButton>
+            <ToggleButton id="3">Button 3</ToggleButton>
+            <ToggleButton id="4">Button 4</ToggleButton>
+            <ToggleButton id="5" isDisabled>
+              Button 5 (disabled)
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+        <div
+          style={{ display: "flex", flexDirection: "column", width: "30%" }}
+        ></div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/react-components/src/pages/ToggleButtonGroup/index.ts b/packages/react-components/src/pages/ToggleButtonGroup/index.ts
new file mode 100644
index 00000000..9b0a677f
--- /dev/null
+++ b/packages/react-components/src/pages/ToggleButtonGroup/index.ts
@@ -0,0 +1,3 @@
+import ToggleButtonGroupPage from "./ToggleButtonGroup";
+
+export default ToggleButtonGroupPage;
diff --git a/packages/react-components/src/pages/index.ts b/packages/react-components/src/pages/index.ts
index 196bc8e2..c93d1083 100644
--- a/packages/react-components/src/pages/index.ts
+++ b/packages/react-components/src/pages/index.ts
@@ -11,6 +11,7 @@ import SelectPage from "./Select";
 import TagGroupPage from "./TagGroup";
 import TextAreaPage from "./TextArea";
 import TextFieldPage from "./TextField";
+import ToggleButtonGroupPage from "./ToggleButtonGroup";
 import SwitchPage from "./Switch";
 import TooltipPage from "./Tooltip";
 
@@ -28,6 +29,7 @@ export {
   TagGroupPage,
   TextAreaPage,
   TextFieldPage,
+  ToggleButtonGroupPage,
   SwitchPage,
   TooltipPage,
 };
diff --git a/packages/react-components/src/stories/ToggleButton.stories.tsx b/packages/react-components/src/stories/ToggleButton.stories.tsx
new file mode 100644
index 00000000..b3c217c5
--- /dev/null
+++ b/packages/react-components/src/stories/ToggleButton.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ToggleButton, SvgCheckCircleIcon } from "../components";
+import { ToggleButtonProps } from "../components/ToggleButton";
+
+const meta = {
+  title: "Components/Toggle buttons/Toggle button",
+  component: ToggleButton,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    id: {
+      control: { type: "text" },
+      description: "Unique identifier for the button (required)",
+    },
+    children: {
+      control: { type: "object" },
+      description: "Populates button text",
+    },
+    isIconButton: {
+      control: { type: "boolean" },
+      description: "Must be set if not using a text label",
+    },
+    "aria-label": {
+      control: { type: "text" },
+      description: "Must be set if not using a text label",
+    },
+    type: {
+      control: { type: "radio" },
+      options: ["button", "submit", "reset"],
+      description: "The behavior of the button when used in an HTML form",
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["small", "medium"],
+      description: "Sets button size",
+    },
+    isDisabled: {
+      control: { type: "boolean" },
+      description: "Whether a button is disabled",
+    },
+    autoFocus: {
+      control: { type: "boolean" },
+      description: "Whether the element should receive focus on render",
+    },
+    isSelected: {
+      control: { type: "boolean" },
+      description: "Whether the element should be selected (controlled)",
+    },
+    defaultSelected: {
+      control: { type: "boolean" },
+      description: "Whether the element should be selected (uncontrolled)",
+    },
+  },
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ToggleButtonTemplate: Story = {
+  args: { children: ["Button text"], id: "1", isDisabled: false },
+  render: ({ ...args }: ToggleButtonProps) => <ToggleButton {...args} />,
+};
+
+export const SmallToggleButton: Story = {
+  ...ToggleButtonTemplate,
+  args: {
+    children: [<SvgCheckCircleIcon />, "Button with icon"],
+    size: "small",
+  },
+};
+
+export const ToggleButtonWithIcon: Story = {
+  ...ToggleButtonTemplate,
+  args: {
+    children: [<SvgCheckCircleIcon />, "Button with icon"],
+  },
+};
+
+export const IconOnlyToggleButton: Story = {
+  ...ToggleButtonTemplate,
+  args: {
+    isIconButton: true,
+    "aria-label": "Confirm",
+    children: [<SvgCheckCircleIcon />],
+  },
+};
+
+export const DefaultSelectedToggleButton: Story = {
+  ...ToggleButtonTemplate,
+  args: {
+    children: ["This button is selected by default"],
+    defaultSelected: true,
+  },
+};
+
+export const DisabledToggleButton: Story = {
+  ...ToggleButtonTemplate,
+  args: { children: ["This button is disabled"], isDisabled: true },
+};
diff --git a/packages/react-components/src/stories/ToggleButtonGroup.mdx b/packages/react-components/src/stories/ToggleButtonGroup.mdx
new file mode 100644
index 00000000..2dc0abcd
--- /dev/null
+++ b/packages/react-components/src/stories/ToggleButtonGroup.mdx
@@ -0,0 +1,115 @@
+{/* ToggleButtonGroup.mdx */}
+
+import {
+  Canvas,
+  Controls,
+  Meta,
+  Primary,
+  Source,
+  Story,
+  Subtitle,
+} from "@storybook/blocks";
+
+import * as ToggleButtonGroupStories from "./ToggleButtonGroup.stories";
+import * as ToggleButtonStories from "./ToggleButton.stories";
+
+<Meta title="Components/Toggle buttons" />
+
+# Toggle buttons
+
+<Subtitle>
+  A toggle button sets a setting on or off, and can be used to switch between
+  different modes or states.
+</Subtitle>
+
+<Source
+  code={`import { ToggleButton, ToggleButtonGroup } from "@bcgov/design-system-react-components";`}
+  language="typescript"
+/>
+
+## Usage and resources
+
+Learn more about working with the toggle button and toggle button group components:
+
+- [Usage and best practice guidance](https://www2.gov.bc.ca/gov/content?id=FAE017578EED4A4980E2C1B8BE3415F9)
+- [View the text field component in Figma](https://www2.gov.bc.ca/gov/content?id=8E36BE1D10E04A17B0CD4D913FA7AC43#designers)
+
+This component is based on React Aria [ToggleButton](https://react-spectrum.adobe.com/react-aria/ToggleButton.html) and [ToggleButtonGroup](https://react-spectrum.adobe.com/react-aria/ToggleButtonGroup.html). Consult the React Aria documentation for additional technical information and a full list of supported props.
+
+## Controls
+
+A `ToggleButton` can be used standalone, or multiple can be rendered inside a `ToggleButtonGroup`. `ToggleButton` and `ToggleButtonGroup` each have their own set of props.
+
+### Toggle button
+
+<Primary of={ToggleButtonStories} />
+<Controls of={ToggleButtonStories.ToggleButtonTemplate} />
+
+### Toggle button group
+
+<Primary of={ToggleButtonGroupStories} />
+<Controls of={ToggleButtonGroupStories.ToggleButtonGroupTemplate} />
+
+## Configuration
+
+### Button size
+
+Set the `size` prop to `small` on a button group to render child buttons with less vertical padding:
+
+<Canvas of={ToggleButtonGroupStories.SmallToggleButtonGroup} />
+
+The `size` prop can also be used directly on an individual toggle button:
+
+<Canvas of={ToggleButtonStories.SmallToggleButton} />
+
+### Icon buttons
+
+Use `isIconButton` and pass an icon to the `children` slot to render a button without a text label:
+
+<Canvas of={ToggleButtonStories.IconOnlyToggleButton} />
+
+When using icon-only buttons, you must also set a descriptive label using the `aria-label` prop.
+
+### Orientation
+
+The `orientation` prop (defaults to `horizontal`) sets the visual layout and keyboard navigation direction of a `ToggleButtonGroup`:
+
+#### Horizontal
+
+<Canvas of={ToggleButtonGroupStories.HorizontalToggleButtonGroup} />
+
+#### Vertical
+
+<Canvas of={ToggleButtonGroupStories.VerticalToggleButtonGroup} />
+
+### Selection mode
+
+The `selectionMode` prop controls how many items within a `ToggleButtonGroup` can be selected (or toggled 'on') simultaneously.
+
+Use `selectedKeys` (controlled) or `defaultSelectedKeys` (uncontrolled) to pre-set selected options.
+
+#### Single
+
+By default, `selectionMode` is set to `single`. The active `ToggleButton` will be deactivated if another is selected:
+
+<Canvas of={ToggleButtonGroupStories.SingleSelect} />
+
+Use the `disallowEmptySelection` prop to control whether a selection is required, or if all options can be de-selected:
+
+<Canvas of={ToggleButtonGroupStories.SingleSelectDisallowEmpty} />
+
+#### Multiple
+
+If `selectionMode` is set to `multiple`, the user can toggle each value on or off discretely:
+
+<Canvas of={ToggleButtonGroupStories.MultipleSelect} />
+
+### Disabling items
+
+Set `isDisabled` on a `ToggleButton` to disable an individual option in a group:
+
+<Canvas of={ToggleButtonGroupStories.GroupWithDisabledOption} />
+
+Setting `isDisabled` on a `ToggleButtonGroup` will disable all options:
+
+<Canvas of={ToggleButtonGroupStories.DisabledToggleButtonGroup} />
diff --git a/packages/react-components/src/stories/ToggleButtonGroup.stories.tsx b/packages/react-components/src/stories/ToggleButtonGroup.stories.tsx
new file mode 100644
index 00000000..d2a7e452
--- /dev/null
+++ b/packages/react-components/src/stories/ToggleButtonGroup.stories.tsx
@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ToggleButton, ToggleButtonGroup } from "../components";
+import { ToggleButtonGroupProps } from "../components/ToggleButtonGroup";
+
+const meta = {
+  title: "Components/Toggle buttons/Toggle button group",
+  component: ToggleButtonGroup,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Provides a text label for a button group",
+    },
+    size: {
+      control: { type: "radio" },
+      options: ["small", "medium"],
+      description: "Sets size of toggle buttons",
+    },
+    children: {
+      control: { type: "object" },
+      description: "Expects an array of `ToggleButton` components",
+    },
+    selectionMode: {
+      control: { type: "radio" },
+      options: ["single", "multiple"],
+      description:
+        "Sets whether multiple options can be selected at the same time",
+    },
+    disallowEmptySelection: {
+      control: { type: "boolean" },
+      description: "Whether the collection allows empty selection",
+    },
+    selectedKeys: {
+      control: { type: "object" },
+      description: "The currently selected keys in the collection (controlled)",
+    },
+    defaultSelectedKeys: {
+      control: { type: "object" },
+      description: "The initial selected keys in the collection (uncontrolled)",
+    },
+    orientation: {
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      description: "Sets layout of button group",
+    },
+    isDisabled: {
+      control: { type: "boolean" },
+      description: "Whether all options are disabled",
+    },
+  },
+} satisfies Meta<typeof ToggleButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ToggleButtonGroupTemplate: Story = {
+  args: {
+    children: [
+      <ToggleButton id="1">Button 1</ToggleButton>,
+      <ToggleButton id="2">Button 2</ToggleButton>,
+      <ToggleButton id="3">Button 3</ToggleButton>,
+    ],
+    selectionMode: "single",
+    size: "medium",
+    orientation: "horizontal",
+    disallowEmptySelection: false,
+    isDisabled: false,
+  },
+  render: ({ ...args }: ToggleButtonGroupProps) => (
+    <ToggleButtonGroup {...args} />
+  ),
+};
+
+export const HorizontalToggleButtonGroup: Story = {
+  ...ToggleButtonGroupTemplate,
+  args: {
+    orientation: "horizontal",
+    children: [
+      <ToggleButton id="1">Button 1</ToggleButton>,
+      <ToggleButton id="2">Button 2</ToggleButton>,
+      <ToggleButton id="3">Button 3</ToggleButton>,
+    ],
+  },
+};
+
+export const VerticalToggleButtonGroup: Story = {
+  ...ToggleButtonGroupTemplate,
+  args: {
+    orientation: "vertical",
+    children: [
+      <ToggleButton id="1">Button 1</ToggleButton>,
+      <ToggleButton id="2">Button 2</ToggleButton>,
+      <ToggleButton id="3">Button 3</ToggleButton>,
+    ],
+  },
+};
+
+export const SmallToggleButtonGroup: Story = {
+  ...ToggleButtonGroupTemplate,
+  args: {
+    size: "small",
+    defaultSelectedKeys: "1",
+    children: [
+      <ToggleButton id="1">Button 1</ToggleButton>,
+      <ToggleButton id="2">Button 2</ToggleButton>,
+      <ToggleButton id="3">Button 3</ToggleButton>,
+    ],
+  },
+};
+
+export const SingleSelect: Story = {
+  ...ToggleButtonGroupTemplate,
+  args: {
+    children: [
+      <ToggleButton id="light">Light mode</ToggleButton>,
+      <ToggleButton id="dark">Dark mode</ToggleButton>,
+    ],
+    selectionMode: "single",
+    defaultSelectedKeys: ["dark"],
+  },
+};
+
+export const SingleSelectDisallowEmpty: Story = {
+  ...ToggleButtonGroupTemplate,
+  args: {
+    children: [
+      <ToggleButton id="light">Light mode</ToggleButton>,
+      <ToggleButton id="dark">Dark mode</ToggleButton>,
+    ],
+    selectionMode: "single",
+    defaultSelectedKeys: ["dark"],
+    disallowEmptySelection: true,
+  },
+};
+
+export const MultipleSelect: Story = {
+  ...ToggleButtonGroupTemplate,
+  args: {
+    children: [
+      <ToggleButton id="bold">
+        <b>Bold</b>
+      </ToggleButton>,
+      <ToggleButton id="italic">
+        <i>Italic</i>
+      </ToggleButton>,
+      <ToggleButton id="underline">
+        <u>Underline</u>
+      </ToggleButton>,
+    ],
+    selectionMode: "multiple",
+    defaultSelectedKeys: ["bold", "underline"],
+  },
+};
+
+export const GroupWithDisabledOption: Story = {
+  ...ToggleButtonGroupTemplate,
+  args: {
+    children: [
+      <ToggleButton id="1">Button 1</ToggleButton>,
+      <ToggleButton id="2">Button 2</ToggleButton>,
+      <ToggleButton id="3" isDisabled>
+        Button 3 (disabled)
+      </ToggleButton>,
+    ],
+  },
+};
+
+export const DisabledToggleButtonGroup: Story = {
+  ...ToggleButtonGroupTemplate,
+  args: {
+    label: "This button group is disabled",
+    children: [
+      <ToggleButton id="1">Button 1</ToggleButton>,
+      <ToggleButton id="2">Button 2</ToggleButton>,
+      <ToggleButton id="3">Button 3</ToggleButton>,
+    ],
+    isDisabled: true,
+  },
+};