diff --git a/src/v2/components/ui/ToggleGroup.stories.tsx b/src/v2/components/ui/ToggleGroup.stories.tsx
index e606954379..17b84fdcd1 100644
--- a/src/v2/components/ui/ToggleGroup.stories.tsx
+++ b/src/v2/components/ui/ToggleGroup.stories.tsx
@@ -1,18 +1,15 @@
-import type { Meta, StoryFn } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { ComponentProps, FunctionComponent } from "react"
 import { Toggle } from "./Toggle"
 import { ToggleGroup } from "./ToggleGroup"
 
-const meta: Meta = {
-  title: "Design system/ToggleGroup",
-}
-
 const items = ["Alpha", "Beta", "Gamma", "Delta"] as const
 
-export default meta
-
-export const Static: StoryFn = () => {
+const ToggleGroupStory: FunctionComponent<ComponentProps<typeof ToggleGroup>> = (
+  props
+) => {
   return (
-    <ToggleGroup type="single">
+    <ToggleGroup {...props}>
       {items.map((item, _) => (
         <Toggle value={item} key={item}>
           {item}
@@ -21,3 +18,44 @@ export const Static: StoryFn = () => {
     </ToggleGroup>
   )
 }
+
+const meta: Meta<typeof ToggleGroupStory> = {
+  title: "Design system/ToggleGroup",
+  component: ToggleGroupStory,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ToggleGroupStory>
+type ToggleGroupProps = Parameters<typeof ToggleGroupStory>[0]
+
+export const Default: Story = {
+  args: {
+    type: "single",
+    variant: "primary",
+    size: "md",
+  },
+  argTypes: {
+    type: {
+      type: "string",
+      control: "select",
+      options: ["multiple", "single"] satisfies ToggleGroupProps["type"][],
+    },
+    variant: {
+      type: "string",
+      control: "select",
+      options: [
+        "secondary",
+        "primary",
+        "primary-ghost",
+        "mono",
+        "outline",
+      ] satisfies ToggleGroupProps["variant"][],
+    },
+    size: {
+      type: "string",
+      control: "select",
+      options: ["sm", "md", "lg", "icon"] satisfies ToggleGroupProps["size"][],
+    },
+  },
+}