diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx
index 6c1f41e95d99..06c4cfec6cc6 100644
--- a/docs/snippets/react/button-story.with-hooks.js.mdx
+++ b/docs/snippets/react/button-story.with-hooks.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|ts|jsx|tsx
+// Button.stories.js|jsx
 
 import React, { useState } from 'react';
 
diff --git a/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
new file mode 100644
index 000000000000..486cc3b59644
--- /dev/null
+++ b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
@@ -0,0 +1,43 @@
+```tsx
+// Button.stories.ts|tsx
+
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/*
+ * Example Button story with React Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
+};
+
+export const Primary = {
+  render: () => <ButtonWithHooks />,
+} satisfies Story;
+```
diff --git a/docs/snippets/react/button-story.with-hooks.ts.mdx b/docs/snippets/react/button-story.with-hooks.ts.mdx
new file mode 100644
index 000000000000..cc5df8a2289d
--- /dev/null
+++ b/docs/snippets/react/button-story.with-hooks.ts.mdx
@@ -0,0 +1,43 @@
+```js
+// Button.stories.ts|tsx
+
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+/*
+ * Example Button story with React Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return <Button primary={isPrimary} onClick={handleOnChange} label={value} />;
+};
+
+export const Primary: Story = {
+  render: () => <ButtonWithHooks />,
+};
+```
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index e48660c8e08f..53d474bfb74c 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -85,6 +85,7 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
 <CodeSnippets
   paths={[
     'react/button-story.with-hooks.js.mdx',
+    'react/button-story.with-hooks.ts.mdx',
   ]}
   usesCsf3
   csf2Path="writing-stories/introduction#snippet-button-story-with-hooks"
@@ -271,7 +272,6 @@ For instance, suppose you wanted to test your Button component against a differe
 
 <!-- prettier-ignore-end -->
 
-
 ![Parameters background color](./parameters-background-colors.png)
 
 This parameter would instruct the backgrounds addon to reconfigure itself whenever a Button story is selected. Most addons are configured via a parameter-based API and can be influenced at a [global](./parameters.md#global-parameters), [component](./parameters.md#component-parameters) and [story](./parameters.md#story-parameters) level.