Refactored the button component woerjowier

src/lib/components/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let primary = false;
-	export let filled = true;
+	export let outlined = true;
 	export let small = false;
 	export let wide = false;
 	export let label: string;
@@ -16,27 +16,27 @@ It takes the following required props:
 
 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
+- `outlined` - boolean - whether the button should be outlined or not
 - `small` - boolean - whether the button should be small or not
 
 - Usage:
   ```tsx
-<Button label="OK" on:click={yourFunction}/>
+<Button label="Label" on:click={yourFunction}/>
   ```
 -->
 
 <button
 	class="
-    base
+    btn-base
     {primary
-		? filled
+		? outlined
-			? 'primary-filled'
+			? 'btn-primary-outline'
-			: 'primary-nofill'
+			: 'btn-primary'
-		: filled
+		: outlined
-		? 'default-filled'
+		? 'btn-basic-outline'
-		: 'default-nofill'}
+		: 'btn-basic'}
-    {small ? 'height-small' : 'height-normal'}
+    {small ? 'btn-height-small' : 'btn-height-normal'}
-	{wide ? 'width-normal' : 'width-small'}
+	{wide ? 'btn-width-normal' : 'btn-width-small'}
         "
 	type="button"
 	on:click
@@ -45,65 +45,65 @@ And the following optional props:
 </button>
 
 <style>
-	.base {
+	.btn-base {
 		@apply flex items-center justify-center rounded text-base text-zinc-50 shadow transition ease-in-out;
 	}
-	.base:disabled {
+	.btn-base:disabled {
 		@apply opacity-40;
 	}
 
 	/* Primary */
-	.primary-filled {
+	.btn-primary {
 		border: 1px solid #3662e3;
 		background: #3662e3;
 	}
-	.primary-filled:hover {
+	.btn-primary:hover {
 		border: 1px solid #1c48c9;
 		background: #1c48c9;
 		@apply transition ease-in-out;
 	}
-	.primary-nofill {
+	.btn-primary-outline {
 		background: rgba(28, 72, 201, 0);
 		border: 1px solid #3662e3;
 		@apply transition ease-in-out;
 	}
-	.primary-nofill:hover {
+	.btn-primary-outline:hover {
 		background: rgba(28, 72, 201, 0.3);
 		border: 1px solid #3662e3;
 		@apply transition ease-in-out;
 	}
 
-	/* Default */
+	/* Basic */
-	.default-filled {
+	.btn-basic {
 		border: 1px solid #71717a;
 		background: #71717a;
 		@apply transition ease-in-out;
 	}
-	.default-filled:hover {
+	.btn-basic:hover {
 		@apply border-zinc-600 bg-zinc-600;
 	}
-	.default-nofill {
+	.btn-basic-outline {
 		background: rgba(113, 113, 122, 0);
 		border: 1px solid #71717a;
 		@apply transition ease-in-out;
 	}
-	.default-nofill:hover {
+	.btn-basic-outline:hover {
 		background: rgba(113, 113, 122, 0.4);
 		border: 1px solid #71717a;
 		@apply transition ease-in-out;
 	}
 
 	/* Size */
-	.height-normal {
+	.btn-height-normal {
 		@apply py-2;
 	}
-	.height-small {
+	.btn-height-small {
 		@apply py-1;
 	}
-	.width-normal {
+	.btn-width-normal {
 		@apply px-[42.75px];
 	}
-	.width-small {
+	.btn-width-small {
 		@apply px-[16px];
 	}
 </style>

src/lib/components/ButtonGroup.svelte

@@ -11,12 +11,12 @@
 </script>
 
 {#if !middleLabel}
-	<div class="flex gap-3">
+	<div class="btn-group">
-		<Button label={leftLabel} on:click={leftAction} filled={false} {wide} />
+		<Button label={leftLabel} on:click={leftAction} outlined={true} {wide} />
-		<Button label={rightLabel} on:click={rightAction} primary={true} filled={true} {wide} />
+		<Button label={rightLabel} on:click={rightAction} primary={true} outlined={false} {wide} />
 	</div>
 {:else}
-	<div class="flex">
+	<div class="btn-group btn-group--segmented">
 		<button class="joined-base rounded-l-lg border-l border-t border-b" on:click={leftAction}>
 			<span class="my-2 {wide ? 'mx-[31.5px]' : 'mx-[16px]'}">{leftLabel}</span>
 		</button>
@@ -33,4 +33,10 @@
 	.joined-base {
 		@apply flex items-center justify-center border-[#71717a] text-base text-white;
 	}
+	.btn-group {
+		@apply flex gap-3;
+	}
+	.btn-group--segmented {
+		@apply flex gap-0;
+	}
 </style>

src/stories/Button.stories.ts

@@ -9,7 +9,7 @@ const meta: Meta<Button> = {
 	tags: ['autodocs'],
 	argTypes: {
 		primary: { control: 'boolean' },
-		filled: { control: 'boolean' },
+		outlined: { control: 'boolean' },
 		small: { control: 'boolean' },
 		label: { control: 'text' }
 	}
@@ -22,66 +22,66 @@ type Story = StoryObj<Button>;
 export const Primary: Story = {
 	args: {
 		primary: true,
-		filled: false,
+		outlined: false,
-		label: 'Button'
+		label: 'Label'
 	}
 };
-export const PrimaryFilled: Story = {
+export const PrimaryOutlined: Story = {
 	args: {
 		primary: true,
-		filled: true,
+		outlined: true,
-		label: 'Button'
+		label: 'Label'
 	}
 };
 export const PrimarySmall: Story = {
 	args: {
 		primary: true,
-		filled: false,
+		outlined: false,
 		small: true,
-		label: 'Button'
+		label: 'Label'
 	}
 };
 
 export const PrimaryWide: Story = {
 	args: {
 		primary: true,
-		filled: false,
+		outlined: false,
 		wide: true,
-		label: 'Button'
+		label: 'Label'
 	}
 };
 
 export const PrimarySmallWide: Story = {
 	args: {
 		primary: true,
-		filled: false,
+		outlined: false,
 		wide: true,
 		small: true,
-		label: 'Button'
+		label: 'Label'
 	}
 };
 
-export const PrimaryFilledSmall: Story = {
+export const PrimaryOutlinedSmall: Story = {
 	args: {
 		primary: true,
-		filled: true,
+		outlined: true,
 		small: true,
-		label: 'Button'
+		label: 'Label'
 	}
 };
 
 export const Default: Story = {
 	args: {
 		primary: false,
-		filled: false,
+		outlined: false,
-		label: 'Button'
+		label: 'Label'
 	}
 };
 
-export const DefaultFilled: Story = {
+export const DefaultOutlined: Story = {
 	args: {
 		primary: false,
-		filled: true,
+		outlined: true,
 		label: 'Button'
 	}
 };
@@ -89,16 +89,16 @@ export const DefaultFilled: Story = {
 export const DefaultSmall: Story = {
 	args: {
 		primary: false,
-		filled: false,
+		outlined: false,
 		small: true,
 		label: 'Button'
 	}
 };
 
-export const DefaultFilledSmall: Story = {
+export const DefaultOutlinedSmall: Story = {
 	args: {
 		primary: false,
-		filled: true,
+		outlined: true,
 		small: true,
 		label: 'Button'
 	}