diff --git a/packages/react/src/components/Button/index.mdx b/packages/react/src/components/Button/index.mdx
index d775be2..8c0cb13 100644
--- a/packages/react/src/components/Button/index.mdx
+++ b/packages/react/src/components/Button/index.mdx
@@ -8,12 +8,7 @@ import * as Stories from './index.stories';
 
 The Cunningham Button behaves the same as the native html `<button>` element, but with a few extra features.
 
-<Canvas>
-  <Story id="components-button--primary"/>
-  <Story id="components-button--secondary"/>
-  <Story id="components-button--tertiary"/>
-  <Story id="components-button--danger"/>
-</Canvas>
+<Canvas of={Stories.All}/>
 
 <Source
   language='ts'
diff --git a/packages/react/src/components/Button/index.stories.tsx b/packages/react/src/components/Button/index.stories.tsx
index 669929c..00d174b 100644
--- a/packages/react/src/components/Button/index.stories.tsx
+++ b/packages/react/src/components/Button/index.stories.tsx
@@ -10,6 +10,22 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
+export const All: Story = {
+  render: () => {
+    return (
+      <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+        <Button {...Primary.args} />
+        <Button {...PrimaryText.args} />
+        <Button {...Secondary.args} />
+        <Button {...Tertiary.args} />
+        <Button {...TertiaryText.args} />
+        <Button {...Disabled.args} />
+        <Button {...Danger.args} />
+      </div>
+    );
+  },
+};
+
 export const Primary: Story = {
   args: {
     children: "Primary",