button: disabled state

src/lib/Button.svelte

@@ -19,6 +19,7 @@
 		icon,
 		animate = true,
 		loading,
+		disabled,
 		class: classValue,
 		ref = $bindable<HTMLButtonElement | null>(null),
 		children,
@@ -35,12 +36,12 @@
 	});
 
 	const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => {
-		if (animate) {
+		if (animate && !loading && !disabled) {
 			animateLoop();
 			animateRipple(event);
 		}
 
-		if (loading) return;
+		if (loading || disabled) return;
 
 		onclick?.(event);
 	};
@@ -87,8 +88,10 @@
 	bind:this={ref}
 	class={[
 		'button group relative flex items-center gap-3 overflow-hidden rounded-sm px-5',
-		'text-sui-background cursor-pointer py-3 font-medium transition-colors',
-		!loading ? ' bg-sui-primary hover:bg-sui-secondary' : 'bg-sui-primary/50 cursor-not-allowed ',
+		'text-sui-background py-3 font-medium transition-colors',
+		!loading && !disabled
+			? ' bg-sui-primary hover:bg-sui-secondary cursor-pointer'
+			: 'bg-sui-primary/50 cursor-not-allowed ',
 		classValue
 	]}
 	onclick={handleButtonClick}