src/lib/components/Actions/Button.stories.svelte

@@ -8,9 +8,11 @@
 		title: 'Actions/Button',
 		component: Button,
 		args: {
-			onClick: fn(),
+			onclick: fn(),
 		},
 		argTypes: {
+			active: { control: 'boolean' },
+			animation: { control: 'boolean' },
 			block: { control: 'boolean' },
 			color: {
 				control: 'select',
@@ -20,28 +22,25 @@
 					'secondary',
 					'accent',
 					'ghost',
-					'link',
 					'info',
 					'success',
 					'warning',
 					'error',
 				],
 			},
+			disabled: { control: 'boolean' },
 			full: { control: 'boolean' },
 			glass: { control: 'boolean' },
-			outline: {
+			shape: {
-				control: 'boolean',
+				control: 'select',
+				options: ['circle', 'square'],
 			},
-			responsive: { control: 'boolean' },
 			size: {
 				control: 'select',
-				options: ['Default', 'xs', 'sm', 'lg'],
+				options: ['xs', 'sm', '-', 'lg'],
 				defaultValue: 'Default',
 			},
-			type: {
+			variant: { control: 'select', options: ['link', 'outline'] },
-				control: 'select',
-				options: ['button', 'reset', 'submit'],
-			},
 			wide: { control: 'boolean' },
 		},
 	});

src/lib/components/Actions/Button.svelte

@@ -3,57 +3,70 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props {
+	interface Props extends HTMLButtonAttributes {
+		active?: boolean;
+		animation?: boolean;
 		block?: boolean;
 		children: Snippet;
 		color?: DaisyColor;
+		disabled?: boolean;
 		full?: boolean;
 		glass?: boolean;
-		outline?: boolean;
+		onclick?: () => void;
-		onClick?: () => void;
+		shape?: 'circle' | 'square';
-		responsive?: boolean;
 		size?: DaisySize;
 		type?: HTMLButtonAttributes['type'];
+		variant?: 'link' | 'outline';
 		wide?: boolean;
 	}
 
 	let {
+		active = false,
+		animation = true,
 		block = false,
 		children,
 		color,
+		disabled = false,
 		full = false,
 		glass = false,
-		outline = false,
+		onclick: onClick,
-		onClick,
+		shape,
-		responsive = false,
 		size,
 		type = 'button',
 		wide = false,
+		variant,
+		...props
 	}: Props = $props();
 </script>
 
 <button
-	{type}
 	onclick={onClick}
-	class:btn-outline={outline}
+	class:btn-active={active}
+	class:no-animation={!animation}
 	class:btn-block={block}
-	class:btn-wide={wide}
-	class:w-full={full}
-	class:glass
-	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'}`}
+	class:btn-disabled={disabled}
+	class:w-full={full}
+	class:glass
+	class:btn-circle={shape === 'circle'}
+	class:btn-square={shape === 'square'}
+	class:btn-xs={size === 'xs'}
+	class:btn-sm={size === 'sm'}
+	class:btn-lg={size === 'lg'}
+	class:btn-link={variant === 'link'}
+	class:btn-outline={variant === 'outline'}
+	class:btn-wide={wide}
+	{disabled}
+	{type}
+	{...props}
 >
 	{@render children()}
 </button>

src/lib/types/daisy-colors.ts

@@ -1,11 +1,9 @@
 export type DaisyColor =
-	| 'default'
 	| 'neutral'
 	| 'primary'
 	| 'secondary'
 	| 'accent'
 	| 'ghost'
-	| 'link'
 	| 'info'
 	| 'success'
 	| 'warning'