[1/n][Storybook] Badges (#36)

### TL;DR

This PR updates formatting in `Button.stories.tsx`

### What changed?

Pulled the Button heading inside `<h1>` tags onto a new line for readability and consistency.

### How to test?

Check the Button story in Storybook and ensure that the Button title displays correctly.

### Why make this change?

This small change improves the readability and consistency of code in the `Button` story.

packages/frontend/src/components/shared/Badge/index.ts

@@ -1 +1,2 @@
 export * from './Badge';
+export * from './Badge.theme';

packages/frontend/src/stories/Components/Badge.stories.tsx

@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Badge, BadgeTheme } from 'components/shared/Badge';
+
+const badgeVariants: BadgeTheme['variant'][] = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'inset',
+];
+const badgeSizes: BadgeTheme['size'][] = ['xs', 'sm'];
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: badgeVariants,
+    },
+    size: {
+      control: 'select',
+      options: badgeSizes,
+    },
+    children: {
+      control: 'object',
+    },
+  },
+  args: {
+    variant: 'primary',
+    size: 'sm',
+    children: '1',
+  },
+} as Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  render: ({ variant, size, children, ...args }) => (
+    <Badge variant={variant} size={size} {...args}>
+      {children}
+    </Badge>
+  ),
+  args: {
+    variant: 'primary',
+    size: 'sm',
+    children: '1',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    ...Default.args,
+    children: '1',
+  },
+};
+
+export const All: Story = {
+  render: () => (
+    <>
+      {badgeVariants.map((variant, index) => (
+        <div className="flex gap-5" key={index}>
+          {badgeSizes.map((size) => (
+            <Badge key={variant} variant={variant} size={size}>
+              {size}
+            </Badge>
+          ))}
+          {variant}
+        </div>
+      ))}
+    </>
+  ),
+};