src/lib/components/Button.stories.svelte

@@ -11,20 +11,35 @@
 			onClick: fn()
 		},
 		argTypes: {
+			color: {
+				control: 'select',
+				options: [
+					'neutral',
+					'primary',
+					'secondary',
+					'accent',
+					'ghost',
+					'link',
+					'info',
+					'success',
+					'warning',
+					'error'
+				]
+			},
+			outline: {
+				control: 'boolean'
+			},
 			size: {
 				control: 'select',
-				options: ['small', 'normal', 'large'],
+				options: ['Default', 'xs', 'sm', 'lg'],
-				defaultValue: 'normal'
+				defaultValue: 'Default'
 			},
-			backgroundColor: {
+			type: {
-				control: 'color'
+				control: 'select',
-			},
+				options: ['button', 'reset', 'submit']
-			primary: {
-				control: 'boolean',
-				defaultValue: true
 			}
 		}
 	});
 </script>
 
-<Story name="Default" args={{ label: 'Button', size: 'normal', primary: true }} />
+<Story name="Default" args={{ label: 'Button', color: 'primary' }} />

src/lib/components/Button.svelte

@@ -1,51 +1,54 @@
 <script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	let {
+	interface Props {
-		type = 'button',
+		color?: DaisyColor;
-		onClick,
+		glass?: boolean;
-		label,
-		size = 'normal',
-		backgroundColor,
-		primary = false
-	}: {
-		type?: HTMLButtonAttributes['type'];
-		onClick?: () => void;
 		label: string;
-		size?: 'small' | 'normal' | 'large';
+		outline?: boolean;
-		backgroundColor?: string;
+		onClick?: () => void;
-		primary?: boolean;
+		responsive?: boolean;
-	} = $props();
+		size?: DaisySize;
+		type?: HTMLButtonAttributes['type'];
+		wide?: boolean;
+	}
+
+	let {
+		color,
+		glass = false,
+		label,
+		outline = false,
+		onClick,
+		responsive = false,
+		size,
+		type = 'button',
+		wide = false
+	}: Props = $props();
 </script>
 
 <button
 	{type}
 	onclick={onClick}
-	class={`button button--${size}`}
+	class:btn-outline={outline}
-	style:background-color={backgroundColor}
+	class:btn-wide={wide}
-	class:button--primary={primary}
+	class:glass
-	class:button--secondary={!primary}
+	class:btn-xs={size === 'xs'}
+	class:btn-sm={size === 'sm'}
+	class:btn-lg={size === 'lg'}
+	class:btn-neutral={color === 'neutral'}
+	class:btn-primary={color === 'primary'}
+	class:btn-secondary={color === 'secondary'}
+	class:btn-accent={color === 'accent'}
+	class:btn-ghost={color === 'ghost'}
+	class:btn-link={color === 'link'}
+	class:btn-info={color === 'info'}
+	class:btn-success={color === 'success'}
+	class:btn-warning={color === 'warning'}
+	class:btn-error={color === 'error'}
+	class={`btn ${responsive && 'btn-xs sm:btn-sm md:btn-md lg:btn-lg'}`}
 >
 	{label}
 </button>
 
-<style>
+<style></style>
-	.button {
-		@apply inline-block cursor-pointer rounded-lg border-0 font-semibold leading-none transition-colors hover:opacity-80 hover:shadow-lg;
-	}
-	.button--small {
-		@apply px-2 py-0.5 text-sm;
-	}
-	.button--normal {
-		@apply px-2 py-1 text-base;
-	}
-	.button--large {
-		@apply px-3 py-1.5 text-lg;
-	}
-	.button--primary {
-		@apply bg-red-600 text-white;
-	}
-	.button--secondary {
-		@apply bg-blue-600 text-white;
-	}
-</style>

src/lib/types/daisy-colors.ts

@@ -0,0 +1,12 @@
+export type DaisyColor =
+	| 'default'
+	| 'neutral'
+	| 'primary'
+	| 'secondary'
+	| 'accent'
+	| 'ghost'
+	| 'link'
+	| 'info'
+	| 'success'
+	| 'warning'
+	| 'error';

src/lib/types/daisy-sizes.ts

@@ -0,0 +1 @@
+export type DaisySize = 'xs' | 'sm' | 'lg';

src/lib/types/index.ts

@@ -0,0 +1,2 @@
+export * from './daisy-colors';
+export * from './daisy-sizes';

src/routes/login/+page.svelte

@@ -24,13 +24,8 @@
 			<TextInput label="Email" name="email" type="email" />
 			<TextInput label="Password" name="password" type="password" />
 			<div class="flex gap-2">
-				<Button
+				<Button onClick={onViewToggle} label={mode === 'login' ? 'Register' : 'Login'} />
-					onClick={onViewToggle}
+				<Button type="submit" label="Submit" />
-					label={mode === 'login' ? 'Register' : 'Login'}
-					size="large"
-					primary
-				/>
-				<Button type="submit" label="Submit" size="large" />
 			</div>
 		</form>
 	</div>