diff --git a/canon-docs/package.json b/canon-docs/package.json
index 8558fac8e3..7bdaa718be 100644
--- a/canon-docs/package.json
+++ b/canon-docs/package.json
@@ -14,7 +14,7 @@
"@mdx-js/loader": "^3.1.0",
"@mdx-js/react": "^3.1.0",
"@next/mdx": "^15.1.4",
- "@storybook/react": "^8.4.7",
+ "@storybook/react": "9.0.0-alpha.8",
"@uiw/codemirror-themes": "^4.23.7",
"@uiw/react-codemirror": "^4.23.7",
"motion": "^12.4.1",
@@ -23,7 +23,7 @@
"react-dom": "^18.0.2",
"react-frame-component": "^5.2.7",
"shiki": "^1.26.1",
- "storybook": "^8.4.7"
+ "storybook": "9.0.0-alpha.8"
},
"devDependencies": {
"@types/mdx": "^2.0.13",
diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx
index a92a6675d1..31d821772a 100644
--- a/canon-docs/src/app/(docs)/components/button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/button/page.mdx
@@ -2,14 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
import { Snippet } from '@/components/Snippet';
import { Tabs } from '@/components/Tabs';
import { CodeBlock } from '@/components/CodeBlock';
-import {
- ButtonPreview,
- ButtonSizes,
- ButtonWithIcons,
- ButtonFullWidth,
- ButtonDisabled,
- ButtonResponsive,
-} from '@/snippets/button';
+import { ButtonSnippet } from '@/snippets/button';
import { buttonVariants } from '@/snippets/_snippets';
import { buttonPropDefs } from './props';
@@ -20,7 +13,7 @@ A button component that can be used to trigger actions.
}
+ preview={}
code={`