📝(react) create a stories for all buttons

Previously we were using a deprecated Storybook feature by using
canvas for multiple Stories and it was also rendering buttons not
aligned, so this new story is a better choice.

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'

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",