Introduce a reusable button

src/lib/components/Button.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	export let primary = false;
+	export let filled = false;
+	export let small = false;
+	export let label: string;
+</script>
+
+<!--
+@component
+This is the only button we should be using in the app. 
+It emits a click event like any self respecting button should.
+
+It takes the following required props:
+- `label` - string - the text to display on the button
+
+And the following optional props:
+- `primary` - boolean - whether the button should be primary or not
+- `filled` - boolean - whether the button should be filled or not
+- `small` - boolean - whether the button should be small or not
+
+- Usage:
+  ```tsx
+<Button label="OK" on:click={yourFunction}/>
+  ```
+-->
+
+<button
+	class="
+    base
+    {primary
+		? filled
+			? 'primary-filled'
+			: 'primary-nofill'
+		: filled
+		? 'default-filled'
+		: 'default-nofill'}
+    {small ? 'size-small' : 'size-normal'}
+        "
+	type="button"
+	on:click
+>
+	<span class="overflow-hidden text-ellipsis">{label}</span>
+</button>
+
+<style>
+	.base {
+		@apply flex items-center justify-center rounded text-base text-white;
+	}
+	.base:hover {
+		/* @apply bg-gray-100; */
+	}
+	.base:disabled {
+		@apply opacity-40;
+	}
+	.primary-nofill {
+		border: 1px solid #3662e3;
+	}
+	.primary-filled {
+		background: #3662e3;
+	}
+	.default-nofill {
+		background: #71717a;
+	}
+	.default-filled {
+		border: 1px solid #71717a;
+	}
+	.size-normal {
+		width: 66px;
+		height: 36px;
+	}
+	.size-small {
+		width: 66px;
+		height: 24px;
+	}
+</style>

src/lib/components/index.ts

@@ -4,3 +4,4 @@ export { default as Breadcrumbs } from './Breadcrumbs.svelte';
 export { default as CodeViewer } from './CodeViewer';
 export { default as CommandPalette } from './CommandPalette';
 export { default as Modal } from './Modal.svelte';
+export { default as Button } from './Button.svelte';

src/stories/Button.stories.ts

@@ -1,18 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
 
-import Button from './Button.svelte';
+import Button from '$lib/components/Button.svelte';
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
 const meta: Meta<Button> = {
-	title: 'Example/Button',
+	title: 'GitButler/Button',
 	component: Button,
 	tags: ['autodocs'],
 	argTypes: {
-		backgroundColor: { control: 'color' },
-		size: {
-			control: { type: 'select' },
-			options: ['small', 'medium', 'large']
-		}
+		primary: { control: 'boolean' },
+		filled: { control: 'boolean' },
+		small: { control: 'boolean' },
+		label: { control: 'text' }
 	}
 };
 
@@ -26,23 +25,58 @@ export const Primary: Story = {
 		label: 'Button'
 	}
 };
-
-export const Secondary: Story = {
+export const PrimaryFilled: Story = {
 	args: {
+		primary: true,
+		filled: true,
+		label: 'Button'
+	}
+};
+export const PrimarySmall: Story = {
+	args: {
+		primary: true,
+		small: true,
 		label: 'Button'
 	}
 };
 
-export const Large: Story = {
+export const PrimaryFilledSmall: Story = {
 	args: {
-		size: 'large',
+		primary: true,
+		filled: true,
+		small: true,
 		label: 'Button'
 	}
 };
 
-export const Small: Story = {
+export const Default: Story = {
 	args: {
-		size: 'small',
+		primary: false,
+		label: 'Button'
+	}
+};
+
+export const DefaultFilled: Story = {
+	args: {
+		primary: false,
+		filled: true,
+		label: 'Button'
+	}
+};
+
+export const DefaultSmall: Story = {
+	args: {
+		primary: false,
+		small: true,
+		label: 'Button'
+	}
+};
+
+export const DefaultFilledSmall: Story = {
+	args: {
+		primary: false,
+		filled: true,
+		small: true,
 		label: 'Button'
 	}
 };