diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
index 42a3d6f1..1b60b8c7 100644
--- a/src/components/Alert/Alert.stories.tsx
+++ b/src/components/Alert/Alert.stories.tsx
@@ -15,12 +15,12 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Button } from "../Button/Button";
 
 import { Alert as AlertComponent } from "./Alert";
 
-export default {
+const meta = {
   title: "Alert",
   component: AlertComponent,
   tags: ["autodocs"],
@@ -43,27 +43,30 @@ export default {
       url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=795-7802&mode=design&t=g71gv6nZdJA7QSGB-0",
     },
   },
-} as Meta<typeof AlertComponent>;
+} satisfies Meta<typeof AlertComponent>;
+export default meta;
 
-export const Success = {
+type Story = StoryObj<typeof meta>;
+
+export const Success: Story = {
   args: {
     type: "success",
   },
 };
 
-export const Critical = {
+export const Critical: Story = {
   args: {
     type: "critical",
   },
 };
 
-export const Info = {
+export const Info: Story = {
   args: {
     type: "info",
   },
 };
 
-export const WithActions = {
+export const WithActions: Story = {
   args: {
     type: "info",
     title:
@@ -79,7 +82,7 @@ export const WithActions = {
   },
 };
 
-export const WithoutClose = {
+export const WithoutClose: Story = {
   ...Success,
   args: {
     ...Success.args,
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
index a68c97de..9c41b1ff 100644
--- a/src/components/Avatar/Avatar.stories.tsx
+++ b/src/components/Avatar/Avatar.stories.tsx
@@ -15,11 +15,11 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { Avatar as AvatarComponent } from "./Avatar";
 
-export default {
+const meta = {
   title: "Avatar",
   component: AvatarComponent,
   tags: ["autodocs"],
@@ -31,58 +31,62 @@ export default {
     src: "/images/__test__/kitten.jpg",
     type: "round",
   },
-} as Meta<typeof AvatarComponent>;
+} satisfies Meta<typeof AvatarComponent>;
+export default meta;
 
-const Template: StoryFn<typeof AvatarComponent> = (args) => (
-  <AvatarComponent {...args} />
-);
+type Story = StoryObj<typeof meta>;
 
-export const Round = Template.bind({});
-Round.args = {
-  type: "round",
+export const Round: Story = {
+  args: {
+    type: "round",
+  },
 };
 
-export const Square = Template.bind({});
-Square.args = {
-  type: "square",
+export const Square: Story = {
+  args: {
+    type: "square",
+  },
 };
 
-export const Button = Template.bind({});
-Button.args = {
-  type: "round",
-  onClick: () => console.log("clicked!"),
+export const Button: Story = {
+  args: {
+    type: "round",
+    onClick: () => console.log("clicked!"),
+  },
 };
 
-export const NoImageFallback = Template.bind({});
-NoImageFallback.args = {
-  src: "",
+export const NoImageFallback: Story = {
+  args: {
+    src: "",
+  },
 };
 
-export const LargeNoImageFallback = Template.bind({});
-LargeNoImageFallback.args = {
-  src: "",
-  size: "128px",
+export const LargeNoImageFallback: Story = {
+  args: {
+    src: "",
+    size: "128px",
+  },
 };
 
-const ImageLessCollection: StoryFn<typeof AvatarComponent> = (args) => (
-  <>
-    <AvatarComponent {...args} id="1" />
-    &nbsp;
-    <AvatarComponent {...args} id="2" />
-    &nbsp;
-    <AvatarComponent {...args} id="3" />
-    &nbsp;
-    <AvatarComponent {...args} id="4" />
-    &nbsp;
-    <AvatarComponent {...args} id="5" />
-    &nbsp;
-    <AvatarComponent {...args} id="6" />
-    &nbsp;
-  </>
-);
-
-export const AllAvatars = ImageLessCollection.bind({});
-AllAvatars.args = {
-  src: "",
-  size: "36px",
+export const AllAvatars: Story = {
+  args: {
+    src: "",
+    size: "36px",
+  },
+  render: (args: React.ComponentProps<typeof AvatarComponent>) => (
+    <>
+      <AvatarComponent {...args} id="1" />
+      &nbsp;
+      <AvatarComponent {...args} id="2" />
+      &nbsp;
+      <AvatarComponent {...args} id="3" />
+      &nbsp;
+      <AvatarComponent {...args} id="4" />
+      &nbsp;
+      <AvatarComponent {...args} id="5" />
+      &nbsp;
+      <AvatarComponent {...args} id="6" />
+      &nbsp;
+    </>
+  ),
 };
diff --git a/src/components/Avatar/AvatarStack.stories.tsx b/src/components/Avatar/AvatarStack.stories.tsx
index 371f3c55..ddc04735 100644
--- a/src/components/Avatar/AvatarStack.stories.tsx
+++ b/src/components/Avatar/AvatarStack.stories.tsx
@@ -15,37 +15,37 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { AvatarStack as AvatarStackComponent } from "./AvatarStack";
 import { Avatar } from "./Avatar";
 
-export default {
+const meta = {
   title: "Avatar/StackedAvatar",
   component: AvatarStackComponent,
   tags: ["autodocs"],
   argTypes: {},
   args: {
-    size: "64px",
+    children: (
+      <>
+        <Avatar
+          name="Alice"
+          id="@alice:example.org"
+          size="200px"
+          src="/images/__test__/kitten.jpg"
+        />
+        <Avatar
+          name="Bob"
+          id="@bob:example.org"
+          size="200px"
+          src="/images/__test__/kitten2.jpg"
+        />
+      </>
+    ),
   },
-} as Meta<typeof AvatarStackComponent>;
-
-const Template: StoryFn<typeof AvatarStackComponent> = (args) => (
-  <AvatarStackComponent {...args}>
-    <Avatar
-      name="Alice"
-      id="@alice:example.org"
-      size="200px"
-      src="/images/__test__/kitten.jpg"
-    />
-    <Avatar
-      name="Bob"
-      id="@bob:example.org"
-      size="200px"
-      src="/images/__test__/kitten2.jpg"
-    />
-  </AvatarStackComponent>
-);
-
-export const AvatarStack = Template.bind({});
-AvatarStack.args = {};
+} satisfies Meta<typeof AvatarStackComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AvatarStack: Story = { args: {} };
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 67de8c24..1851de5a 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -15,42 +15,43 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { Badge as BadgeComponent } from "./Badge";
 
-export default {
+const meta = {
   title: "Badge",
   component: BadgeComponent,
   argTypes: {},
   args: {},
-} as Meta<typeof BadgeComponent>;
-
-const Template: StoryFn<typeof BadgeComponent> = () => (
-  <div>
-    <div>
-      <BadgeComponent kind="green">Trusted</BadgeComponent>
-      &nbsp;
-      <BadgeComponent kind="red">Not trusted</BadgeComponent>
-      &nbsp;
-      <BadgeComponent kind="grey">Public room</BadgeComponent>
-    </div>
-    <br />
+  render: () => (
     <div>
-      <BadgeComponent kind="default">Default</BadgeComponent>
-      &nbsp;
-      <BadgeComponent kind="grey">Grey</BadgeComponent>
-      &nbsp;
-      <BadgeComponent kind="on-solid">On Solid</BadgeComponent>
-      &nbsp;
-      <BadgeComponent kind="blue">Blue</BadgeComponent>
-      &nbsp;
-      <BadgeComponent kind="green">Green</BadgeComponent>
-      &nbsp;
-      <BadgeComponent kind="red">Red</BadgeComponent>
+      <div>
+        <BadgeComponent kind="green">Trusted</BadgeComponent>
+        &nbsp;
+        <BadgeComponent kind="red">Not trusted</BadgeComponent>
+        &nbsp;
+        <BadgeComponent kind="grey">Public room</BadgeComponent>
+      </div>
+      <br />
+      <div>
+        <BadgeComponent kind="default">Default</BadgeComponent>
+        &nbsp;
+        <BadgeComponent kind="grey">Grey</BadgeComponent>
+        &nbsp;
+        <BadgeComponent kind="on-solid">On Solid</BadgeComponent>
+        &nbsp;
+        <BadgeComponent kind="blue">Blue</BadgeComponent>
+        &nbsp;
+        <BadgeComponent kind="green">Green</BadgeComponent>
+        &nbsp;
+        <BadgeComponent kind="red">Red</BadgeComponent>
+      </div>
     </div>
-  </div>
-);
+  ),
+} satisfies Meta<typeof BadgeComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Badge = Template.bind({});
-Badge.args = {};
+export const Badge: Story = { args: {} };
diff --git a/src/components/Button/ActionButton.stories.tsx b/src/components/Button/ActionButton.stories.tsx
index 017c8b92..659682c0 100644
--- a/src/components/Button/ActionButton.stories.tsx
+++ b/src/components/Button/ActionButton.stories.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import * as icons from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -25,7 +25,9 @@ import { Tooltip } from "../Tooltip/Tooltip";
 import { TooltipProvider } from "../Tooltip/TooltipProvider";
 
 const Template: React.FC<
-  { label: string } & React.ComponentProps<typeof ButtonComponent>
+  { label: string; as: "button" | "a" } & React.ComponentProps<
+    typeof ButtonComponent
+  >
 > = ({ label, ...args }) => (
   <TooltipProvider>
     <Tooltip label={label}>
@@ -34,7 +36,7 @@ const Template: React.FC<
   </TooltipProvider>
 );
 
-export default {
+const meta = {
   title: "Button/Actions",
   component: Template,
   tags: ["autodocs"],
@@ -73,12 +75,17 @@ export default {
     disabled: false,
     onClick: fn(),
   },
-  controls: {
-    exclude: ["children"],
+  parameters: {
+    controls: {
+      exclude: ["children"],
+    },
   },
-} as Meta<typeof Template>;
+} satisfies Meta<typeof Template>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Settings = {
+export const Settings: Story = {
   args: {
     label: "Settings",
     kind: "secondary",
@@ -86,7 +93,7 @@ export const Settings = {
   },
 };
 
-export const ShareLink = {
+export const ShareLink: Story = {
   args: {
     label: "Copy link",
     kind: "secondary",
@@ -94,7 +101,7 @@ export const ShareLink = {
   },
 };
 
-export const VideoOn = {
+export const VideoOn: Story = {
   args: {
     label: "Turn video off",
     kind: "secondary",
@@ -102,7 +109,7 @@ export const VideoOn = {
   },
 };
 
-export const VideoOff = {
+export const VideoOff: Story = {
   args: {
     label: "Turn video on",
     kind: "primary",
@@ -110,7 +117,7 @@ export const VideoOff = {
   },
 };
 
-export const MicOn = {
+export const MicOn: Story = {
   args: {
     label: "Turn mic off",
     kind: "secondary",
@@ -118,7 +125,7 @@ export const MicOn = {
   },
 };
 
-export const MicOff = {
+export const MicOff: Story = {
   args: {
     label: "Turn mic on",
     kind: "primary",
@@ -126,7 +133,7 @@ export const MicOff = {
   },
 };
 
-export const ShareScreen = {
+export const ShareScreen: Story = {
   args: {
     label: "Share screen",
     kind: "secondary",
@@ -134,7 +141,7 @@ export const ShareScreen = {
   },
 };
 
-export const SharingScreen = {
+export const SharingScreen: Story = {
   args: {
     label: "Stop sharing screen",
     kind: "primary",
@@ -142,7 +149,7 @@ export const SharingScreen = {
   },
 };
 
-export const Fullscreen = {
+export const Fullscreen: Story = {
   args: {
     label: "Full screen",
     kind: "secondary",
@@ -150,7 +157,7 @@ export const Fullscreen = {
   },
 };
 
-export const EndCall = {
+export const EndCall: Story = {
   args: {
     label: "End call",
     kind: "primary",
@@ -159,7 +166,7 @@ export const EndCall = {
   },
 };
 
-export const Invite = {
+export const Invite: Story = {
   args: {
     label: "Invite",
     kind: "primary",
@@ -168,7 +175,7 @@ export const Invite = {
   },
 };
 
-export const Edit = {
+export const Edit: Story = {
   args: {
     label: "Edit",
     kind: "primary",
@@ -177,7 +184,7 @@ export const Edit = {
   },
 };
 
-export const Search = {
+export const Search: Story = {
   args: {
     label: "Search",
     kind: "secondary",
@@ -186,7 +193,7 @@ export const Search = {
   },
 };
 
-export const Save = {
+export const Save: Story = {
   args: {
     label: "Save",
     kind: "primary",
@@ -195,7 +202,7 @@ export const Save = {
   },
 };
 
-export const SaveDisabled = {
+export const SaveDisabled: Story = {
   args: {
     label: "Save",
     kind: "primary",
@@ -205,7 +212,7 @@ export const SaveDisabled = {
   },
 };
 
-export const Cancel = {
+export const Cancel: Story = {
   args: {
     label: "Cancel",
     kind: "secondary",
@@ -214,7 +221,7 @@ export const Cancel = {
   },
 };
 
-export const Close = {
+export const Close: Story = {
   args: {
     label: "Close",
     kind: "secondary",
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index e424fb8a..10289bac 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -14,16 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { Button as ButtonComponent } from "./Button";
 
 import * as icons from "@vector-im/compound-design-tokens/assets/web/icons";
 
-export default {
+// The type of ButtonComponent is a little hard to work with, so we'll just redefined the props we need
+type Props = React.ComponentProps<typeof ButtonComponent> & {
+  as: "a" | "button";
+  href?: string;
+};
+
+const meta = {
   title: "Button",
-  component: ButtonComponent,
+  component: ButtonComponent as React.FC<Props>,
   tags: ["autodocs"],
   argTypes: {
     size: {
@@ -52,15 +58,18 @@ export default {
   },
   args: {
     size: "lg",
-    as: undefined,
+    as: "button",
     destructive: false,
     disabled: false,
     children: "Click me!",
     onClick: fn(),
   },
-} as Meta<typeof ButtonComponent>;
+} satisfies Meta<Props>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     // test component defaults
     kind: undefined,
@@ -68,7 +77,7 @@ export const Default = {
   },
 };
 
-export const Small = {
+export const Small: Story = {
   args: {
     // test component defaults
     kind: undefined,
@@ -76,53 +85,53 @@ export const Small = {
   },
 };
 
-export const Primary = {
+export const Primary: Story = {
   args: {
     kind: "primary",
   },
 };
 
-export const PrimaryDestructive = {
+export const PrimaryDestructive: Story = {
   args: {
     kind: "primary",
     destructive: true,
   },
 };
 
-export const Secondary = {
+export const Secondary: Story = {
   args: {
     kind: "secondary",
   },
 };
 
-export const SecondaryDestructive = {
+export const SecondaryDestructive: Story = {
   args: {
     kind: "secondary",
     destructive: true,
   },
 };
 
-export const Tertiary = {
+export const Tertiary: Story = {
   args: {
     kind: "tertiary",
   },
 };
 
-export const TertiaryDestructive = {
+export const TertiaryDestructive: Story = {
   args: {
     kind: "tertiary",
     destructive: true,
   },
 };
 
-export const WithIcon = {
+export const WithIcon: Story = {
   args: {
     ...Primary.args,
     Icon: icons.VisibilityOnIcon,
   },
 };
 
-export const SmallWithIcon = {
+export const SmallWithIcon: Story = {
   args: {
     ...Primary.args,
     size: "sm",
@@ -130,14 +139,14 @@ export const SmallWithIcon = {
   },
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   args: {
     ...Primary.args,
     disabled: true,
   },
 };
 
-export const Link = {
+export const Link: Story = {
   args: {
     ...Primary.args,
     as: "a",
@@ -145,7 +154,7 @@ export const Link = {
   },
 };
 
-export const LinkDisabled = {
+export const LinkDisabled: Story = {
   args: {
     ...Link.args,
     disabled: true,
diff --git a/src/components/Button/IconButton/IconButton.stories.tsx b/src/components/Button/IconButton/IconButton.stories.tsx
index 94f9f52d..a3c63b3a 100644
--- a/src/components/Button/IconButton/IconButton.stories.tsx
+++ b/src/components/Button/IconButton/IconButton.stories.tsx
@@ -15,19 +15,19 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { IconButton as IconButtonComponent } from "./IconButton";
 
 import UserIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 
-export default {
+const meta = {
   title: "Button/IconButton",
   component: IconButtonComponent,
   tags: ["autodocs"],
   argTypes: {
-    control: { type: "boolean" },
+    disabled: { type: "boolean" },
     onClick: { action: "onClick" },
   },
   args: {
@@ -36,67 +36,76 @@ export default {
     children: <UserIcon />,
     onClick: fn(),
   },
-} as Meta<typeof IconButtonComponent>;
+} satisfies Meta<typeof IconButtonComponent>;
+export default meta;
 
-const Template: StoryFn<typeof IconButtonComponent> = (args) => (
-  <>
-    <IconButtonComponent {...args} size="32px">
-      <UserIcon />
-    </IconButtonComponent>
+type Story = StoryObj<typeof meta>;
 
-    <IconButtonComponent {...args} size="48px">
-      <UserIcon />
-    </IconButtonComponent>
+export const Demo: Story = {
+  render: (args: React.ComponentProps<typeof IconButtonComponent>) => (
+    <>
+      <IconButtonComponent {...args} size="32px">
+        <UserIcon />
+      </IconButtonComponent>
 
-    <IconButtonComponent {...args} size="64px">
-      <UserIcon />
-    </IconButtonComponent>
-  </>
-);
+      <IconButtonComponent {...args} size="48px">
+        <UserIcon />
+      </IconButtonComponent>
 
-export const Demo = Template.bind({});
+      <IconButtonComponent {...args} size="64px">
+        <UserIcon />
+      </IconButtonComponent>
+    </>
+  ),
+};
+
+export const Default: Story = { args: {} };
 
-export const Default = { args: {} };
-export const DefaultDisabled = {
+export const DefaultDisabled: Story = {
   args: {
     disabled: true,
   },
 };
-export const WithIndicator = {
+
+export const WithIndicator: Story = {
   args: {
     indicator: "default",
   },
 };
-export const WithIndicatorDisabled = {
+
+export const WithIndicatorDisabled: Story = {
   args: {
     indicator: "default",
     disabled: true,
   },
 };
-export const WithSuccessIndicator = {
+
+export const WithSuccessIndicator: Story = {
   args: {
     indicator: "success",
   },
 };
-export const WithCriticalIndicator = {
+
+export const WithCriticalIndicator: Story = {
   args: {
     indicator: "critical",
   },
 };
-export const WithSubtleBackground = {
+
+export const WithSubtleBackground: Story = {
   args: {
     subtleBackground: true,
   },
 };
 
-export const WithLabel = {
+export const WithLabel: Story = {
   args: {
     label: "label",
   },
 };
 
-export const Destructive = {
+export const Destructive: Story = {
   args: {
-    destructive: "true",
+    destructive: true,
   },
 };
diff --git a/src/components/Button/IconButton/IconButton.tsx b/src/components/Button/IconButton/IconButton.tsx
index 4c8f7840..49e71298 100644
--- a/src/components/Button/IconButton/IconButton.tsx
+++ b/src/components/Button/IconButton/IconButton.tsx
@@ -23,38 +23,38 @@ import { UnstyledButtonPropsFor } from "../UnstyledButton";
 import { IndicatorIcon } from "../../Icon/IndicatorIcon/IndicatorIcon";
 import { Tooltip } from "../../Tooltip/Tooltip";
 
-type IconButtonProps = UnstyledButtonPropsFor<"button"> &
-  JSX.IntrinsicElements["button"] & {
-    /**
-     * The CSS class name.
-     */
-    className?: string;
-    /**
-     * The size of the button in CSS units, e.g. `"24px"`.
-     * Note that this is the size of the *button* itself: the icon will be 0.75 * this size
-     * @default 32px
-     */
-    size?: CSSStyleDeclaration["height"];
-    /**
-     * The icon button indicator dot displayed on the top right
-     * As in IndicatorIcon
-     */
-    indicator?: "default" | "success" | "critical";
-    /**
-     * Whether the button is interactable
-     */
-    disabled?: boolean;
-    /**
-     * Whether this button triggers a destructive action.
-     * @default false
-     */
-    destructive?: boolean;
-    /**
-     * Optional tooltip for the button
-     */
-    tooltip?: string;
-    subtleBackground?: boolean;
-  };
+type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
+  /**
+   * The CSS class name.
+   */
+  className?: string;
+  /**
+   * The size of the button in CSS units, e.g. `"24px"`.
+   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size
+   * @default 32px
+   */
+  size?: CSSStyleDeclaration["height"];
+  /**
+   * The icon button indicator dot displayed on the top right
+   * As in IndicatorIcon
+   */
+  indicator?: "default" | "success" | "critical";
+  /**
+   * Whether the button is interactable
+   */
+  disabled?: boolean;
+  /**
+   * Whether this button triggers a destructive action.
+   * @default false
+   */
+  destructive?: boolean;
+  /**
+   * Optional tooltip for the button
+   */
+  tooltip?: string;
+  subtleBackground?: boolean;
+  label?: string;
+};
 
 /**
  * Display an icon as a button. Can render an indicator
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
index 8b0ca71e..f6231b39 100644
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -15,10 +15,10 @@ limitations under the License.
 */
 import { Dropdown } from "./Dropdown";
 import { fn } from "@storybook/test";
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { ComponentProps } from "react";
 
-export default {
+const meta = {
   title: "Dropdown",
   component: Dropdown,
   tags: ["autodocs"],
@@ -52,8 +52,11 @@ export default {
     ],
   },
 } satisfies Meta<ComponentProps<typeof Dropdown>>;
+export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   parameters: {
     design: {
       type: "figma",
@@ -61,7 +64,8 @@ export const Default = {
     },
   },
 };
-export const WithHelpLabel = {
+
+export const WithHelpLabel: Story = {
   args: {
     helpLabel: "Optional help text.",
   },
@@ -72,7 +76,8 @@ export const WithHelpLabel = {
     },
   },
 };
-export const WithError = {
+
+export const WithError: Story = {
   args: {
     error: "Select an option",
   },
@@ -83,7 +88,8 @@ export const WithError = {
     },
   },
 };
-export const WithDefaultValue = {
+
+export const WithDefaultValue: Story = {
   args: {
     defaultValue: "Option2",
   },
diff --git a/src/components/Form/Controls/Action/Action.stories.tsx b/src/components/Form/Controls/Action/Action.stories.tsx
index f786e856..1ea51712 100644
--- a/src/components/Form/Controls/Action/Action.stories.tsx
+++ b/src/components/Form/Controls/Action/Action.stories.tsx
@@ -18,6 +18,7 @@ limitations under the License.
 import React from "react";
 
 import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import * as icons from "@vector-im/compound-design-tokens/assets/web/icons";
 
@@ -26,7 +27,7 @@ import { TooltipProvider } from "../../../Tooltip/TooltipProvider";
 
 type Props = { invalid?: boolean } & React.ComponentProps<typeof ActionInput>;
 
-export default {
+const meta = {
   title: "Form/Controls/Action",
   component: ActionInput,
   tags: ["autodocs"],
@@ -91,11 +92,13 @@ export default {
     readOnly: false,
     invalid: false,
     actionLabel: "Action",
+    onActionClick: fn(),
     Icon: icons.CheckIcon,
   },
 } satisfies Meta<Props>;
+export default meta;
 
-type Story = StoryObj<Props>;
+type Story = StoryObj<typeof meta>;
 
 export const Empty: Story = {
   parameters: {
diff --git a/src/components/Form/Controls/Checkbox/Checkbox.stories.tsx b/src/components/Form/Controls/Checkbox/Checkbox.stories.tsx
index 59722c79..b3ce8383 100644
--- a/src/components/Form/Controls/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Form/Controls/Checkbox/Checkbox.stories.tsx
@@ -24,7 +24,7 @@ type Props = React.ComponentProps<typeof CheckboxInput> & {
   invalid?: boolean;
 };
 
-export default {
+const meta = {
   title: "Form/Controls/Checkbox",
   component: CheckboxInput,
   render: ({ invalid, ...props }) => (
@@ -53,8 +53,9 @@ export default {
     invalid: false,
   },
 } satisfies Meta<Props>;
+export default meta;
 
-type Story = StoryObj<Props>;
+type Story = StoryObj<typeof meta>;
 
 export const Unchecked: Story = {
   parameters: {
diff --git a/src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx b/src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx
index 4c9a9c6f..973eb063 100644
--- a/src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx
+++ b/src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx
@@ -24,7 +24,7 @@ import { TooltipProvider } from "../../../Tooltip/TooltipProvider";
 
 type Props = { invalid?: boolean } & React.ComponentProps<typeof EditInPlace>;
 
-export default {
+const meta = {
   title: "Form/Controls/EditInPlace",
   component: EditInPlace,
   tags: ["autodocs"],
@@ -102,8 +102,9 @@ export default {
     savingLabel: "Saving…",
   },
 } satisfies Meta<Props>;
+export default meta;
 
-type Story = StoryObj<Props>;
+type Story = StoryObj<typeof meta>;
 
 export const Empty: Story = {};
 
diff --git a/src/components/Form/Controls/MFA/MFA.stories.tsx b/src/components/Form/Controls/MFA/MFA.stories.tsx
index e0a7011c..379ce7a7 100644
--- a/src/components/Form/Controls/MFA/MFA.stories.tsx
+++ b/src/components/Form/Controls/MFA/MFA.stories.tsx
@@ -25,7 +25,7 @@ type Props = React.ComponentProps<typeof MFAInput> & {
   invalid?: boolean;
 };
 
-export default {
+const meta = {
   title: "Form/Controls/MFA",
   component: MFAInput,
   render: ({ invalid, ...props }) => (
@@ -59,8 +59,9 @@ export default {
     invalid: false,
   },
 } satisfies Meta<Props>;
+export default meta;
 
-type Story = StoryObj<Props>;
+type Story = StoryObj<typeof meta>;
 
 export const Empty: Story = {
   parameters: {
diff --git a/src/components/Form/Controls/Password/Password.stories.tsx b/src/components/Form/Controls/Password/Password.stories.tsx
index f772297e..ce7d3216 100644
--- a/src/components/Form/Controls/Password/Password.stories.tsx
+++ b/src/components/Form/Controls/Password/Password.stories.tsx
@@ -26,7 +26,7 @@ import { userEvent } from "@storybook/test";
 
 type Props = { invalid?: boolean } & React.ComponentProps<typeof PasswordInput>;
 
-export default {
+const meta = {
   title: "Form/Controls/Password",
   component: PasswordInput,
   tags: ["autodocs"],
@@ -75,8 +75,9 @@ export default {
     invalid: false,
   },
 } satisfies Meta<Props>;
+export default meta;
 
-type Story = StoryObj<Props>;
+type Story = StoryObj<typeof meta>;
 
 export const Empty: Story = {
   parameters: {
diff --git a/src/components/Form/Controls/Radio/Radio.stories.tsx b/src/components/Form/Controls/Radio/Radio.stories.tsx
index 50de2156..6f5b1b8f 100644
--- a/src/components/Form/Controls/Radio/Radio.stories.tsx
+++ b/src/components/Form/Controls/Radio/Radio.stories.tsx
@@ -24,7 +24,7 @@ type Props = React.ComponentProps<typeof RadioInput> & {
   invalid?: boolean;
 };
 
-export default {
+const meta = {
   title: "Form/Controls/Radio",
   component: RadioInput,
   render: ({ invalid, ...props }) => (
@@ -53,8 +53,9 @@ export default {
     invalid: false,
   },
 } satisfies Meta<Props>;
+export default meta;
 
-type Story = StoryObj<Props>;
+type Story = StoryObj<typeof meta>;
 
 export const Unchecked: Story = {
   parameters: {
diff --git a/src/components/Form/Controls/Text/Text.stories.tsx b/src/components/Form/Controls/Text/Text.stories.tsx
index 06b9e2f4..4036004b 100644
--- a/src/components/Form/Controls/Text/Text.stories.tsx
+++ b/src/components/Form/Controls/Text/Text.stories.tsx
@@ -23,7 +23,7 @@ import { TextInput } from "./";
 
 type Props = { invalid?: boolean } & React.ComponentProps<typeof TextInput>;
 
-export default {
+const meta = {
   title: "Form/Controls/Text",
   component: TextInput,
   tags: ["autodocs"],
@@ -75,8 +75,9 @@ export default {
     enableLigatures: undefined,
   },
 } satisfies Meta<Props>;
+export default meta;
 
-type Story = StoryObj<Props>;
+type Story = StoryObj<typeof meta>;
 
 export const Empty: Story = {
   parameters: {
diff --git a/src/components/Form/Controls/Toggle/Toggle.stories.tsx b/src/components/Form/Controls/Toggle/Toggle.stories.tsx
index 00091f26..52f89ac0 100644
--- a/src/components/Form/Controls/Toggle/Toggle.stories.tsx
+++ b/src/components/Form/Controls/Toggle/Toggle.stories.tsx
@@ -19,15 +19,16 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import { ToggleInput } from "./Toggle";
 
-export default {
+const meta = {
   title: "Form/Controls/Toggle",
   component: ToggleInput,
   tags: ["autodocs"],
   argTypes: {},
   args: {},
 } satisfies Meta<typeof ToggleInput>;
+export default meta;
 
-type Story = StoryObj<typeof ToggleInput>;
+type Story = StoryObj<typeof meta>;
 
 export const Unchecked: Story = {
   args: {
diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
index f4972304..d9f895df 100644
--- a/src/components/Form/Form.stories.tsx
+++ b/src/components/Form/Form.stories.tsx
@@ -153,7 +153,7 @@ const KitchenSink = ({ disabled, invalid, readOnly }: Props) => (
   </TooltipProvider>
 );
 
-export default {
+const meta = {
   title: "Form/Kitchen Sink",
   component: KitchenSink,
   argTypes: {
@@ -172,9 +172,10 @@ export default {
     readOnly: false,
     invalid: false,
   },
-} as Meta<typeof KitchenSink>;
+} satisfies Meta<typeof KitchenSink>;
+export default meta;
 
-type Story = StoryObj<typeof KitchenSink>;
+type Story = StoryObj<typeof meta>;
 
 export const Normal: Story = {};
 export const Disabled: Story = { args: { disabled: true } };
diff --git a/src/components/Form/PasswordForm.stories.tsx b/src/components/Form/PasswordForm.stories.tsx
index 98d43ddd..f21ab130 100644
--- a/src/components/Form/PasswordForm.stories.tsx
+++ b/src/components/Form/PasswordForm.stories.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import WarningIcon from "@vector-im/compound-design-tokens/assets/web/icons/warning";
 
 import {
@@ -29,13 +29,12 @@ import {
 import { Progress } from "../Progress/Progress";
 import { TooltipProvider } from "../Tooltip/TooltipProvider";
 
-export default {
+const meta = {
   title: "Form/Password form",
   component: Root,
   tags: ["autodocs"],
-  subcomponents: { Progress, PasswordControl, Label, Field },
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <TooltipProvider>
         <div style={{ maxWidth: "378px" }}>
           <Story />
@@ -43,7 +42,8 @@ export default {
       </TooltipProvider>
     ),
   ],
-} as Meta<typeof Root>;
+} satisfies Meta<typeof Root>;
+export default meta;
 
 const getValueLabel = (value: number) => {
   switch (value) {
@@ -60,7 +60,7 @@ const getValueLabel = (value: number) => {
   }
 };
 
-export const Empty: React.FC = () => {
+export const Empty = () => {
   return (
     <Root>
       <Field name="password">
diff --git a/src/components/Glass/Glass.stories.tsx b/src/components/Glass/Glass.stories.tsx
index 58cede00..3b5020ea 100644
--- a/src/components/Glass/Glass.stories.tsx
+++ b/src/components/Glass/Glass.stories.tsx
@@ -15,37 +15,23 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { Glass as GlassComponent } from "./Glass";
 import { Text } from "../Typography/Text";
 
-export default {
+const meta = {
   title: "Glass",
   component: GlassComponent,
   tags: ["autodocs"],
   argTypes: {},
-  args: {},
-} as Meta<typeof GlassComponent>;
+  args: {
+    style: {
+      inlineSize: 250,
+      blockSize: 150,
+    },
 
-const Template: StoryFn<typeof GlassComponent> = (args) => (
-  // Use an image as the background to really show off the glass effect
-  <div
-    style={{
-      background: "url('/images/__test__/kitten2.jpg')",
-      backgroundSize: "cover",
-      inlineSize: "fit-content",
-      blockSize: "fit-content",
-      padding: 16,
-    }}
-  >
-    <GlassComponent
-      style={{
-        inlineSize: 250,
-        blockSize: 150,
-      }}
-      {...args}
-    >
+    children: (
       <div
         style={{
           background: "var(--cpd-color-bg-canvas-default)",
@@ -56,9 +42,27 @@ const Template: StoryFn<typeof GlassComponent> = (args) => (
       >
         <Text style={{ textAlign: "center" }}>Your content here</Text>
       </div>
-    </GlassComponent>
-  </div>
-);
+    ),
+  },
 
-export const Glass = Template.bind({});
-Glass.args = {};
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          background: "url('/images/__test__/kitten2.jpg')",
+          backgroundSize: "cover",
+          inlineSize: "fit-content",
+          blockSize: "fit-content",
+          padding: 16,
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof GlassComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Glass: Story = { args: {} };
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index a965ae47..4194d540 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -14,18 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import ThreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
 
-export default {
+const meta = {
   title: "Icon",
   component: ThreadIcon,
   argTypes: {},
-} as Meta<typeof ThreadIcon>;
+} satisfies Meta<typeof ThreadIcon>;
+export default meta;
 
-const Template: StoryFn<typeof ThreadIcon> = () => <ThreadIcon />;
+type Story = StoryObj<typeof meta>;
 
-export const Icon = Template.bind({});
-Icon.args = {};
+export const Icon: Story = { args: {} };
diff --git a/src/components/Icon/IndicatorIcon/IndicatorIcon.stories.tsx b/src/components/Icon/IndicatorIcon/IndicatorIcon.stories.tsx
index bab0050d..28f38f62 100644
--- a/src/components/Icon/IndicatorIcon/IndicatorIcon.stories.tsx
+++ b/src/components/Icon/IndicatorIcon/IndicatorIcon.stories.tsx
@@ -15,71 +15,70 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { IndicatorIcon as IndicatorIconComponent } from "./IndicatorIcon";
 
 import ThreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads";
 
-export default {
+const meta = {
   title: "Icon/IndicatorIcon",
   component: IndicatorIconComponent,
   tags: ["autodocs"],
-  argTypes: {
-    control: { type: "boolean" },
-    onClick: { action: "onClick" },
-  },
   args: {
     size: "32px",
-    disabled: false,
     children: <ThreadIcon />,
-    onClick: fn(),
   },
-} as Meta<typeof IndicatorIconComponent>;
+} satisfies Meta<typeof IndicatorIconComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-const Template: StoryFn<typeof IndicatorIconComponent> = (args) => (
-  <>
-    <IndicatorIconComponent {...args} size="32px">
-      <ThreadIcon />
-    </IndicatorIconComponent>
+export const Demo: Story = {
+  render: (args) => (
+    <>
+      <IndicatorIconComponent {...args} size="32px">
+        <ThreadIcon />
+      </IndicatorIconComponent>
 
-    <IndicatorIconComponent {...args} size="48px">
-      <ThreadIcon />
-    </IndicatorIconComponent>
+      <IndicatorIconComponent {...args} size="48px">
+        <ThreadIcon />
+      </IndicatorIconComponent>
 
-    <IndicatorIconComponent {...args} size="64px">
-      <ThreadIcon />
-    </IndicatorIconComponent>
+      <IndicatorIconComponent {...args} size="64px">
+        <ThreadIcon />
+      </IndicatorIconComponent>
 
-    <IndicatorIconComponent {...args} size="32px" indicator="default">
-      <ThreadIcon />
-    </IndicatorIconComponent>
+      <IndicatorIconComponent {...args} size="32px" indicator="default">
+        <ThreadIcon />
+      </IndicatorIconComponent>
 
-    <IndicatorIconComponent {...args} size="48px" indicator="default">
-      <ThreadIcon />
-    </IndicatorIconComponent>
+      <IndicatorIconComponent {...args} size="48px" indicator="default">
+        <ThreadIcon />
+      </IndicatorIconComponent>
 
-    <IndicatorIconComponent {...args} size="64px" indicator="default">
-      <ThreadIcon />
-    </IndicatorIconComponent>
-  </>
-);
+      <IndicatorIconComponent {...args} size="64px" indicator="default">
+        <ThreadIcon />
+      </IndicatorIconComponent>
+    </>
+  ),
+};
 
-export const Demo = Template.bind({});
+export const Default: Story = { args: {} };
 
-export const Default = { args: {} };
-export const WithIndicator = {
+export const WithIndicator: Story = {
   args: {
     indicator: "default",
   },
 };
-export const WithSuccessIndicator = {
+
+export const WithSuccessIndicator: Story = {
   args: {
     indicator: "success",
   },
 };
-export const WithCriticalIndicator = {
+
+export const WithCriticalIndicator: Story = {
   args: {
     indicator: "critical",
   },
diff --git a/src/components/InlineSpinner/InlineSpinner.stories.tsx b/src/components/InlineSpinner/InlineSpinner.stories.tsx
index a98849c3..bbe2b497 100644
--- a/src/components/InlineSpinner/InlineSpinner.stories.tsx
+++ b/src/components/InlineSpinner/InlineSpinner.stories.tsx
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { InlineSpinner as InlineSpinnerComponent } from "./InlineSpinner";
 
-export default {
+const meta = {
   title: "InlineSpinner",
   component: InlineSpinnerComponent,
   tags: ["autodocs"],
@@ -28,9 +28,12 @@ export default {
     },
   },
   args: {},
-} as Meta<typeof InlineSpinnerComponent>;
+} satisfies Meta<typeof InlineSpinnerComponent>;
+export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {},
   parameters: {},
 };
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
index c32c62d0..b0619119 100644
--- a/src/components/Link/Link.stories.tsx
+++ b/src/components/Link/Link.stories.tsx
@@ -14,29 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { Link as LinkComponent } from "./Link";
 
-export default {
+const meta = {
   title: "Link",
   component: LinkComponent,
   tags: ["autodocs"],
   argTypes: {},
   args: {
     size: "medium",
+    children: "Text link",
   },
-} as Meta<typeof LinkComponent>;
+} satisfies Meta<typeof LinkComponent>;
+export default meta;
 
-const Template: StoryFn<typeof LinkComponent> = (args) => (
-  <LinkComponent {...args}>Text link</LinkComponent>
-);
+type Story = StoryObj<typeof meta>;
 
-export const Round = Template.bind({});
-Round.args = {};
+export const Round: Story = { args: {} };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: "small",
-};
+export const Small: Story = { args: { size: "small" } };
diff --git a/src/components/Menu/ContextMenu.stories.tsx b/src/components/Menu/ContextMenu.stories.tsx
index a9bf308f..2cee9a36 100644
--- a/src/components/Menu/ContextMenu.stories.tsx
+++ b/src/components/Menu/ContextMenu.stories.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
 import ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem";
@@ -25,15 +25,12 @@ import { ContextMenu as ContextMenuComponent } from "./ContextMenu";
 import { MenuItem } from "./MenuItem";
 import { Separator } from "../Separator/Separator";
 
-export default {
-  title: "Menu/ContextMenu",
-  component: ContextMenuComponent,
-  tags: ["autodocs"],
-  argTypes: {},
-  args: {},
-} as Meta<typeof ContextMenuComponent>;
+type Props = Omit<
+  React.ComponentProps<typeof ContextMenuComponent>,
+  "trigger" | "title" | "hasAccessibleAlternative" | "children"
+>;
 
-const Template: StoryFn<typeof ContextMenuComponent> = (args) => {
+const Template: React.FC<Props> = (args) => {
   return (
     <ContextMenuComponent
       {...args}
@@ -76,5 +73,15 @@ const Template: StoryFn<typeof ContextMenuComponent> = (args) => {
   );
 };
 
-export const ContextMenu = Template.bind({});
-ContextMenu.args = {};
+const meta = {
+  title: "Menu/ContextMenu",
+  component: Template,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof Template>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ContextMenu: Story = { args: {} };
diff --git a/src/components/Menu/DrawerMenu.stories.tsx b/src/components/Menu/DrawerMenu.stories.tsx
index 045f1913..ee7872d2 100644
--- a/src/components/Menu/DrawerMenu.stories.tsx
+++ b/src/components/Menu/DrawerMenu.stories.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
 import ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem";
@@ -26,14 +26,12 @@ import drawerStyles from "./DrawerMenu.module.css";
 import { MenuItem } from "./MenuItem";
 import { Separator } from "../Separator/Separator";
 
-export default {
-  title: "Menu/DrawerMenu",
-  component: DrawerMenuComponent,
-  argTypes: {},
-  args: {},
-} as Meta<typeof DrawerMenuComponent>;
+type Props = Omit<
+  React.ComponentProps<typeof DrawerMenuComponent>,
+  "title" | "children"
+>;
 
-const Template: StoryFn<typeof DrawerMenuComponent> = (args) => (
+const Template: React.FC<Props> = (args) => (
   <>
     <div className={drawerStyles.bg} />
     <DrawerMenuComponent {...args} title="Settings">
@@ -55,5 +53,14 @@ const Template: StoryFn<typeof DrawerMenuComponent> = (args) => (
   </>
 );
 
-export const DrawerMenu = Template.bind({});
-DrawerMenu.args = {};
+const meta = {
+  title: "Menu/DrawerMenu",
+  component: Template,
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof Template>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DrawerMenu: Story = { args: {} };
diff --git a/src/components/Menu/FloatingMenu.stories.tsx b/src/components/Menu/FloatingMenu.stories.tsx
index 3ca674b9..71d31192 100644
--- a/src/components/Menu/FloatingMenu.stories.tsx
+++ b/src/components/Menu/FloatingMenu.stories.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
 import ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem";
@@ -25,14 +25,12 @@ import { FloatingMenu as FloatingMenuComponent } from "./FloatingMenu";
 import { MenuItem } from "./MenuItem";
 import { Separator } from "../Separator/Separator";
 
-export default {
-  title: "Menu/FloatingMenu",
-  component: FloatingMenuComponent,
-  argTypes: {},
-  args: {},
-} as Meta<typeof FloatingMenuComponent>;
+type Props = Omit<
+  React.ComponentProps<typeof FloatingMenuComponent>,
+  "title" | "children"
+>;
 
-const Template: StoryFn<typeof FloatingMenuComponent> = (args) => (
+const Template: React.FC<Props> = (args) => (
   <FloatingMenuComponent {...args} title="Settings">
     <MenuItem Icon={UserProfileIcon} label="Profile" onSelect={() => {}} />
     {/* Extra long label to demonstrate word breaking */}
@@ -52,5 +50,14 @@ const Template: StoryFn<typeof FloatingMenuComponent> = (args) => (
   </FloatingMenuComponent>
 );
 
-export const FloatingMenu = Template.bind({});
-FloatingMenu.args = {};
+const meta = {
+  title: "Menu/FloatingMenu",
+  component: Template,
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof Template>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const FloatingMenu: Story = { args: {} };
diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
index 5db67ebc..15f53ae2 100644
--- a/src/components/Menu/Menu.stories.tsx
+++ b/src/components/Menu/Menu.stories.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { useState } from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
 import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
 import ChatProblemIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat-problem";
@@ -26,15 +26,12 @@ import { MenuItem } from "./MenuItem";
 import { Separator } from "../Separator/Separator";
 import { Button } from "../Button/Button";
 
-export default {
-  title: "Menu",
-  component: MenuComponent,
-  tags: ["autodocs"],
-  argTypes: {},
-  args: {},
-} as Meta<typeof MenuComponent>;
+type Props = Omit<
+  React.ComponentProps<typeof MenuComponent>,
+  "open" | "onOpenChange" | "trigger" | "align" | "children"
+>;
 
-const Template: StoryFn<typeof MenuComponent> = (args) => {
+const Template: React.FC<Props> = (args) => {
   const [open, setOpen] = useState(true);
 
   return (
@@ -63,13 +60,19 @@ const Template: StoryFn<typeof MenuComponent> = (args) => {
   );
 };
 
-export const Menu = Template.bind({});
-Menu.args = {
-  title: "Today's Menu",
-};
+const meta = {
+  title: "Menu",
+  component: Template,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof Template>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Menu: Story = { args: { title: "Today's Menu" } };
 
-export const WithoutTitle = Template.bind({});
-WithoutTitle.args = {
-  title: "Untitled Menu",
-  showTitle: false,
+export const WithoutTitle = {
+  args: { title: "Untitled Menu", showTitle: false },
 };
diff --git a/src/components/Menu/MenuItem.stories.tsx b/src/components/Menu/MenuItem.stories.tsx
index e9fc915f..64ed4427 100644
--- a/src/components/Menu/MenuItem.stories.tsx
+++ b/src/components/Menu/MenuItem.stories.tsx
@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import SettingsLabel from "@vector-im/compound-design-tokens/assets/web/icons/settings";
@@ -23,13 +24,10 @@ import SettingsLabel from "@vector-im/compound-design-tokens/assets/web/icons/se
 import { MenuItem as MenuItemComponent } from "./MenuItem";
 import { Text } from "../Typography/Text";
 
-export default {
+const meta = {
   title: "Menu/MenuItem",
   component: MenuItemComponent,
   tags: ["autodocs"],
-  argTypes: {
-    onClick: { action: "clicked!" },
-  },
   args: {
     label: "Menu item",
     children: (
@@ -38,17 +36,21 @@ export default {
       </Text>
     ),
     Icon: ChatIcon,
+    onSelect: fn(),
   },
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <div style={{ width: 300 }}>
         <Story />
       </div>
     ),
   ],
-} as Meta<typeof MenuItemComponent>;
+} satisfies Meta<typeof MenuItemComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Example = {
+export const Example: Story = {
   render: () => (
     <div style={{ width: 300 }}>
       <MenuItemComponent Icon={ChatIcon} label="First item" onSelect={() => {}}>
@@ -70,56 +72,52 @@ export const Example = {
   ),
 };
 
-export const Primary = {
+export const Primary: Story = {
   args: {
     kind: "primary",
   },
 };
 
-export const Critical = {
+export const Critical: Story = {
   args: {
     kind: "critical",
   },
 };
 
-export const PrimaryDisabled = {
+export const PrimaryDisabled: Story = {
   args: {
     ...Primary.args,
     disabled: true,
   },
 };
 
-export const CriticalDisabled = {
+export const CriticalDisabled: Story = {
   args: {
     ...Critical.args,
     disabled: true,
   },
 };
 
-function SimpleComponent(props: object) {
-  return (
-    <div
-      style={{ height: 24, width: 48, backgroundColor: "teal" }}
-      {...props}
-    />
-  );
-}
+const SimpleComponent: React.FC<React.ComponentProps<"div">> = (props) => (
+  <div style={{ height: 24, width: 48, backgroundColor: "teal" }} {...props} />
+);
 
-export const IconIsComponent = {
+export const IconIsComponent: Story = {
   args: {
     ...Primary.args,
+    // @ts-expect-error: For some reason, this isn't liking the type here
     Icon: <SimpleComponent />,
   },
 };
 
-export const WithoutLabel = {
+export const WithoutLabel: Story = {
   args: {
     ...Primary.args,
     label: undefined,
   },
 };
 
-export const WithALongLabel = {
+export const WithALongLabel: Story = {
   args: {
     ...Primary.args,
     label:
@@ -127,7 +125,7 @@ export const WithALongLabel = {
   },
 };
 
-export const WithALongLabelAndChildren = {
+export const WithALongLabelAndChildren: Story = {
   args: {
     ...Primary.args,
     label:
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
index 969e8875..132075e0 100644
--- a/src/components/Menu/MenuItem.tsx
+++ b/src/components/Menu/MenuItem.tsx
@@ -20,7 +20,7 @@ import React, {
   ComponentType,
   ElementType,
   isValidElement,
-  ReactNode,
+  ReactElement,
   SVGAttributes,
   useCallback,
   useContext,
@@ -45,9 +45,9 @@ type Props<C extends MenuItemElement> = {
   className?: string;
   /**
    * The icon to show on this menu item.
-   * When `Icon` is a ReactNode, it should spread the props
+   * When `Icon` is a ReactElement, it should spread the props
    */
-  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactNode;
+  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactElement;
   /**
    * The label to show on this menu item.
    */
@@ -111,7 +111,7 @@ export const MenuItem = <C extends MenuItemElement = "button">({
   );
 
   const iconIsReactElement = isValidElement(Icon);
-  const componentIcon = Icon as ReactNode;
+  const componentIcon = Icon as ReactElement;
   const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;
 
   const content = (
diff --git a/src/components/Menu/ToggleMenuItem.stories.tsx b/src/components/Menu/ToggleMenuItem.stories.tsx
index c9425607..c6022a35 100644
--- a/src/components/Menu/ToggleMenuItem.stories.tsx
+++ b/src/components/Menu/ToggleMenuItem.stories.tsx
@@ -15,27 +15,23 @@ limitations under the License.
 */
 
 import React, { useState } from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 
 import { ToggleMenuItem as ToggleMenuItemComponent } from "./ToggleMenuItem";
 
-export default {
-  title: "Menu/ToggleMenuItem",
-  component: ToggleMenuItemComponent,
-  tags: ["autodocs"],
-  argTypes: {},
-  args: {},
-} as Meta<typeof ToggleMenuItemComponent>;
+type Props = Omit<
+  React.ComponentProps<typeof ToggleMenuItemComponent>,
+  "Icon" | "label" | "checked" | "onSelect"
+>;
 
-const Template: StoryFn<typeof ToggleMenuItemComponent> = (args) => {
+const Template: React.FC<Props> = (props: Props) => {
   const [firstChecked, setFirstChecked] = useState(false);
-
   return (
     <div style={{ width: 300 }}>
       <ToggleMenuItemComponent
-        {...args}
+        {...props}
         Icon={ChatIcon}
         label="First item"
         checked={firstChecked}
@@ -45,15 +41,26 @@ const Template: StoryFn<typeof ToggleMenuItemComponent> = (args) => {
         }}
       />
       <ToggleMenuItemComponent
-        {...args}
+        {...props}
         Icon={ExtensionsIcon}
         label="Second item with a name that's quite long"
         checked
         disabled
+        onSelect={() => {}}
       />
     </div>
   );
 };
 
-export const Primary = Template.bind({});
-Primary.args = {};
+const meta = {
+  title: "Menu/ToggleMenuItem",
+  component: Template,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof Template>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = { args: {} };
diff --git a/src/components/Nav/NavBar.stories.tsx b/src/components/Nav/NavBar.stories.tsx
index 94fedd04..f3a3b0c8 100644
--- a/src/components/Nav/NavBar.stories.tsx
+++ b/src/components/Nav/NavBar.stories.tsx
@@ -13,9 +13,10 @@
 // limitations under the License.
 
 import React, { useEffect, useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { NavBar, NavItem } from ".";
 
-export default {
+const meta = {
   title: "Nav",
   component: NavBar,
   tags: ["autodocs"],
@@ -31,9 +32,12 @@ export default {
   args: {
     "aria-label": "Main",
   },
-};
+} satisfies Meta<typeof NavBar>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     children: (
       <>
@@ -50,7 +54,7 @@ export const Default = {
   },
 };
 
-export const TabRole = {
+export const TabRole: Story = {
   render: function Component() {
     // An example tab implementation
     const [activePanelId, setActivePanelId] = useState("panel-2");
diff --git a/src/components/Nav/NavItem.stories.tsx b/src/components/Nav/NavItem.stories.tsx
index 829e8799..af889b0e 100644
--- a/src/components/Nav/NavItem.stories.tsx
+++ b/src/components/Nav/NavItem.stories.tsx
@@ -16,22 +16,22 @@ limitations under the License.
 */
 
 import React from "react";
+import { StoryObj, Meta } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { NavItem } from "./NavItem";
 import { NavBar } from ".";
-import { StoryFn } from "@storybook/react";
 
-export default {
+const meta = {
   title: "Nav/Nav Item",
   component: NavItem,
   tags: ["autodocs"],
-  argTypes: {
-    onClick: {
-      action: "clicked",
-    },
+  args: {
+    onClick: fn(),
+    href: undefined,
   },
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <NavBar aria-label="Testing">
         <Story />
       </NavBar>
@@ -43,43 +43,46 @@ export default {
       url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=669-2723&mode=design&t=9Hy0h7BBDH0kJ2Ow-0",
     },
   },
-};
+} satisfies Meta<typeof NavItem>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     children: "Sessions",
   },
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   args: {
     children: "Sessions",
     disabled: true,
   },
 };
 
-export const Link = {
+export const Link: Story = {
   args: {
     children: "Sessions",
     href: "https://example.org",
   },
 };
 
-export const Active = {
+export const Active: Story = {
   args: {
     children: "Sessions",
     active: true,
   },
 };
 
-export const ActiveLink = {
+export const ActiveLink: Story = {
   args: {
     ...Link.args,
     active: true,
   },
 };
 
-export const ActiveDisabled = {
+export const ActiveDisabled: Story = {
   args: {
     children: "Sessions",
     active: true,
diff --git a/src/components/Nav/NavItem.tsx b/src/components/Nav/NavItem.tsx
index e222104c..453cfb43 100644
--- a/src/components/Nav/NavItem.tsx
+++ b/src/components/Nav/NavItem.tsx
@@ -22,7 +22,6 @@ import React, {
   MouseEventHandler,
   forwardRef,
 } from "react";
-import type { XOR } from "ts-xor";
 
 import styles from "./Nav.module.css";
 
@@ -90,15 +89,16 @@ const NavItemButton = forwardRef(function NavItemButton(
 });
 
 const renderAsLink = (
-  props: React.PropsWithChildren<XOR<NavItemLinkProps, NavItemButtonProps>>,
-): props is React.PropsWithChildren<NavItemLinkProps> => !!props.href;
+  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,
+): props is React.PropsWithChildren<NavItemLinkProps> =>
+  "href" in props && !!props.href;
 
 /**
  * A navigation item component to be used with a navigation bar.
  * Will render an anchor when href is provided, otherwise a button element.
  */
 export const NavItem = forwardRef(function NavItem(
-  props: React.PropsWithChildren<XOR<NavItemLinkProps, NavItemButtonProps>>,
+  props: React.PropsWithChildren<NavItemLinkProps | NavItemButtonProps>,
   ref:
     | ForwardedRef<HTMLButtonElement | null>
     | ForwardedRef<HTMLAnchorElement | null>,
diff --git a/src/components/Progress/Progress.stories.tsx b/src/components/Progress/Progress.stories.tsx
index 2654f983..e9d3bc24 100644
--- a/src/components/Progress/Progress.stories.tsx
+++ b/src/components/Progress/Progress.stories.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { Progress as ProgressComponent } from "./Progress";
 
@@ -32,7 +32,7 @@ function getValueLabel(value: number) {
   }
 }
 
-export default {
+const meta = {
   title: "Progress",
   component: ProgressComponent,
   tags: ["autodocs"],
@@ -50,9 +50,12 @@ export default {
     max: 100,
     value: 50,
   },
-} as Meta<typeof ProgressComponent>;
+} satisfies Meta<typeof ProgressComponent>;
+export default meta;
 
-export const LargeHalf = {
+type Story = StoryObj<typeof meta>;
+
+export const LargeHalf: Story = {
   args: {
     tint: "green",
     size: "lg",
@@ -60,7 +63,7 @@ export const LargeHalf = {
   },
 };
 
-export const SmallHalf = {
+export const SmallHalf: Story = {
   args: {
     tint: "green",
     size: "sm",
@@ -68,7 +71,7 @@ export const SmallHalf = {
   },
 };
 
-export const LargeFull = {
+export const LargeFull: Story = {
   args: {
     tint: "green",
     size: "lg",
@@ -76,7 +79,7 @@ export const LargeFull = {
   },
 };
 
-export const SmallFull = {
+export const SmallFull: Story = {
   args: {
     tint: "green",
     size: "sm",
@@ -84,7 +87,7 @@ export const SmallFull = {
   },
 };
 
-export const Empty = {
+export const Empty: Story = {
   args: {
     value: 0,
   },
diff --git a/src/components/ReleaseAnnouncement/ReleaseAnnouncement.stories.tsx b/src/components/ReleaseAnnouncement/ReleaseAnnouncement.stories.tsx
index d46caed1..c97f417d 100644
--- a/src/components/ReleaseAnnouncement/ReleaseAnnouncement.stories.tsx
+++ b/src/components/ReleaseAnnouncement/ReleaseAnnouncement.stories.tsx
@@ -14,25 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Button } from "../Button";
 import { ReleaseAnnouncement as ReleaseAnnouncementComponent } from "./ReleaseAnnouncement";
 
-export default {
-  title: "Release Announcement",
-  component: ReleaseAnnouncementComponent,
-  tags: ["autodocs"],
-  argTypes: {},
-  args: {
-    header: "Notifications have moved",
-    description: "From now on, click the icon here to view your notifications.",
-    placement: "right",
-    closeLabel: "Ok",
-  },
-} as Meta<typeof ReleaseAnnouncementComponent>;
+type Props = Omit<
+  React.ComponentProps<typeof ReleaseAnnouncementComponent>,
+  "open" | "children" | "onClick"
+>;
 
-const Template: StoryFn<typeof ReleaseAnnouncementComponent> = (args) => {
+const Template: React.FC<Props> = (args) => {
   const [open, setOpen] = useState(true);
 
   return (
@@ -41,27 +33,45 @@ const Template: StoryFn<typeof ReleaseAnnouncementComponent> = (args) => {
       open={open}
       onClick={() => setOpen(false)}
     >
-      <Button onClick={() => setOpen((_open) => !_open)}>Open menu</Button>
+      <Button onClick={() => setOpen((open) => !open)}>Open menu</Button>
     </ReleaseAnnouncementComponent>
   );
 };
 
-export const Default = Template.bind({});
-Default.args = {};
+const meta = {
+  title: "Release Announcement",
+  component: Template,
+  tags: ["autodocs"],
+  argTypes: {},
+  args: {
+    header: "Notifications have moved",
+    description: "From now on, click the icon here to view your notifications.",
+    placement: "right",
+    closeLabel: "Ok",
+  },
+} satisfies Meta<typeof Template>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: {} };
 
-export const MultiLinesContent = Template.bind({});
-MultiLinesContent.args = {
-  header: "A multi line header which is taking multiple lines",
-  description:
-    "A multi line description which is taking multiple lines. The OK button should be vertically centred.",
+export const MultiLinesContent: Story = {
+  args: {
+    header: "A multi line header which is taking multiple lines",
+    description:
+      "A multi line description which is taking multiple lines. The OK button should be vertically centred.",
+  },
 };
 
-export const BottomPlacement = Template.bind({});
-BottomPlacement.args = {
-  placement: "bottom",
+export const BottomPlacement: Story = {
+  args: {
+    placement: "bottom",
+  },
 };
 
-export const NoArrow = Template.bind({});
-NoArrow.args = {
-  displayArrow: false,
+export const NoArrow: Story = {
+  args: {
+    displayArrow: false,
+  },
 };
diff --git a/src/components/Search/Search.stories.tsx b/src/components/Search/Search.stories.tsx
index 5bd1cb7d..d39672a3 100644
--- a/src/components/Search/Search.stories.tsx
+++ b/src/components/Search/Search.stories.tsx
@@ -15,24 +15,29 @@ limitations under the License.
 */
 
 import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
+import { Form } from "@radix-ui/react-form";
 
 import { Search as SearchComponent } from "./Search";
-import { Form } from "@radix-ui/react-form";
 
-export default {
+const meta = {
   title: "Search",
   component: SearchComponent,
   tags: ["autodocs"],
   argTypes: {},
-  args: {},
-} as Meta<typeof SearchComponent>;
-
-const Template: StoryFn<typeof SearchComponent> = (args) => (
-  <Form>
-    <SearchComponent {...args} />
-  </Form>
-);
-
-export const Search = Template.bind({});
-Search.args = {};
+  args: {
+    name: "search",
+  },
+  decorators: [
+    (Story) => (
+      <Form>
+        <Story />
+      </Form>
+    ),
+  ],
+} satisfies Meta<typeof SearchComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Search: Story = { args: {} };
diff --git a/src/components/Separator/Separator.stories.tsx b/src/components/Separator/Separator.stories.tsx
index 28e99c2b..5353b7d6 100644
--- a/src/components/Separator/Separator.stories.tsx
+++ b/src/components/Separator/Separator.stories.tsx
@@ -14,20 +14,23 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { Separator as SeparatorComponent } from "./Separator";
 
-export default {
+const meta = {
   title: "Separator",
   component: SeparatorComponent,
   tags: ["autodocs"],
   argTypes: {},
   args: {},
-} as Meta<typeof SeparatorComponent>;
+} satisfies Meta<typeof SeparatorComponent>;
+export default meta;
 
-export const Primary = { args: { kind: "primary" } };
+type Story = StoryObj<typeof meta>;
 
-export const Secondary = { args: { kind: "secondary" } };
+export const Primary: Story = { args: { kind: "primary" } };
 
-export const Section = { args: { kind: "section" } };
+export const Secondary: Story = { args: { kind: "secondary" } };
+
+export const Section: Story = { args: { kind: "section" } };
diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
index 2754829e..21408a22 100644
--- a/src/components/Toast/Toast.stories.tsx
+++ b/src/components/Toast/Toast.stories.tsx
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { Toast as ToastComponent } from "./Toast";
 
-export default {
+const meta = {
   title: "Toast",
   component: ToastComponent,
   tags: ["autodocs"],
@@ -26,13 +26,18 @@ export default {
   args: {
     children: "Would you like some toast?",
   },
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=3627-42633&t=m0RMwUTXkukgU29g-0",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=3627-42633&t=m0RMwUTXkukgU29g-0",
+    },
   },
-} as Meta<typeof ToastComponent>;
+} satisfies Meta<typeof ToastComponent>;
+export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {},
   parameters: {},
 };
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index a90bff88..f086c6b6 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -18,16 +18,24 @@ import { Placement as PlacementType } from "@floating-ui/react";
 import { Tooltip as TooltipComponent } from "./Tooltip";
 import { IconButton } from "../Button";
 import UserIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { FC, ReactNode } from "react";
 import { TooltipProvider } from "./TooltipProvider";
 
-export default {
+const meta = {
   title: "Tooltip",
   component: TooltipComponent,
   tags: ["autodocs"],
-  controls: {
-    include: ["placement", "open", "label", "caption", "isTriggerInteractive"],
+  parameters: {
+    controls: {
+      include: [
+        "placement",
+        "open",
+        "label",
+        "caption",
+        "isTriggerInteractive",
+      ],
+    },
   },
   argTypes: {
     placement: {
@@ -68,7 +76,10 @@ export default {
       </div>
     ),
   ],
-} as Meta<typeof TooltipComponent>;
+} satisfies Meta<typeof TooltipComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 interface LayoutProps {
   children: ReactNode;
@@ -87,7 +98,7 @@ const Layout: FC<LayoutProps> = ({ children }) => (
   </div>
 );
 
-const TemplatePlacement: StoryFn<typeof TooltipComponent> = () => (
+const TemplatePlacement: StoryFn<typeof meta> = () => (
   <Layout>
     {(
       [
@@ -118,20 +129,20 @@ const TemplatePlacement: StoryFn<typeof TooltipComponent> = () => (
 export const Placement = TemplatePlacement.bind({});
 Placement.args = {};
 
-export const Default = {
+export const Default: Story = {
   args: {
     label: "@bob:example.org",
   },
 };
 
-export const WithStringCaption = {
+export const WithStringCaption: Story = {
   args: {
     label: "I can have a caption",
     caption: "My beautiful caption",
   },
 };
 
-export const WithComponentCaption = {
+export const WithComponentCaption: Story = {
   args: {
     label: "Copy",
     caption: (
@@ -142,14 +153,14 @@ export const WithComponentCaption = {
   },
 };
 
-export const ForcedOpen = {
+export const ForcedOpen: Story = {
   args: {
     open: true,
     label: "I'm always open",
   },
 };
 
-export const ForcedClose = {
+export const ForcedClose: Story = {
   args: {
     open: false,
     description: "You can't see me",
@@ -157,7 +168,7 @@ export const ForcedClose = {
   },
 };
 
-export const ForcedDisabled = {
+export const ForcedDisabled: Story = {
   args: {
     disabled: true,
     description: "You can't see me",
@@ -165,7 +176,7 @@ export const ForcedDisabled = {
   },
 };
 
-export const InteractiveTrigger = {
+export const InteractiveTrigger: Story = {
   args: {
     isTriggerInteractive: true,
     description: "Shown with delay",
@@ -173,7 +184,7 @@ export const InteractiveTrigger = {
   },
 };
 
-export const NonInteractiveTrigger = {
+export const NonInteractiveTrigger: Story = {
   args: {
     isTriggerInteractive: false,
     description: "Shown without delay",
@@ -181,7 +192,7 @@ export const NonInteractiveTrigger = {
   },
 };
 
-export const Descriptive = {
+export const Descriptive: Story = {
   args: {
     open: true,
     description: "Employer Identification Number",
diff --git a/src/components/Typography/Heading.stories.tsx b/src/components/Typography/Heading.stories.tsx
index 4f8dbf68..80945527 100644
--- a/src/components/Typography/Heading.stories.tsx
+++ b/src/components/Typography/Heading.stories.tsx
@@ -15,12 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { Heading as HeadingComponent } from "./Heading";
 
-export default {
+const meta = {
   title: "Typography",
   component: HeadingComponent,
   argTypes: {
@@ -33,16 +32,15 @@ export default {
       control: { type: "inline-radio" },
     },
   },
-} as Meta<typeof HeadingComponent>;
-
-const Template: StoryFn<typeof HeadingComponent> = (args) => (
-  <HeadingComponent size={args.size} weight={args.weight}>
-    The quick brown fox jumps over the lazy dog
-  </HeadingComponent>
-);
-
-export const Heading = Template.bind({});
-Heading.args = {
-  size: "md",
-  weight: "regular",
+} satisfies Meta<typeof HeadingComponent>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Heading: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog",
+    size: "md",
+    weight: "regular",
+  },
 };
diff --git a/src/components/Typography/Text.stories.tsx b/src/components/Typography/Text.stories.tsx
index 2e37d3cb..8707aee2 100644
--- a/src/components/Typography/Text.stories.tsx
+++ b/src/components/Typography/Text.stories.tsx
@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { Text as TextComponent } from "./Text";
 
-export default {
+const meta = {
   title: "Typography",
   component: TextComponent,
   argTypes: {
@@ -39,10 +39,13 @@ export default {
     size: "md",
     weight: "regular",
   },
-} as Meta<typeof TextComponent>;
+} satisfies Meta<typeof TextComponent>;
+export default meta;
 
-export const Text = {};
-export const Ligatures = {
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {};
+export const Ligatures: Story = {
   args: {
     children: "-> 1x2x3",
   },
diff --git a/src/utils/__ComponentTemplate__/__ComponentTemplate__.stories.tsx b/src/utils/__ComponentTemplate__/__ComponentTemplate__.stories.tsx
index 94f86b0d..82163c8f 100644
--- a/src/utils/__ComponentTemplate__/__ComponentTemplate__.stories.tsx
+++ b/src/utils/__ComponentTemplate__/__ComponentTemplate__.stories.tsx
@@ -14,19 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import { __ComponentTemplate__ as __ComponentTemplate__Component } from "./__ComponentTemplate__";
 
-export default {
+const meta = {
   title: "__ComponentTemplate__",
   component: __ComponentTemplate__Component,
   tags: ["autodocs"],
   argTypes: {},
   args: {},
-} as Meta<typeof __ComponentTemplate__Component>;
+} satisfies Meta<typeof __ComponentTemplate__Component>;
+export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {},
   parameters: {},
 };