finish custom class and improved options overhaul

src/lib/Button.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { MouseEventHandler } from 'svelte/elements';
+	import type { ClassValue, MouseEventHandler } from 'svelte/elements';
 	import Spinner from './Spinner.svelte';
 
-	let {
-		icon,
-		animate = true,
-		loading,
-		children,
-		onclick
-	}: {
+	interface Props {
 		icon?: string;
 		animate?: boolean;
 		loading?: boolean;
+		class?: ClassValue | null | undefined;
 		children: Snippet;
 		onclick?: MouseEventHandler<HTMLButtonElement>;
-	} = $props();
+	}
+
+	let { icon, animate = true, loading, class: classValue, children, onclick }: Props = $props();
 
 	let iconElement = $state<HTMLSpanElement | null>(null);
 
@@ -68,7 +65,8 @@
 	class={[
 		'button group relative flex gap-3 overflow-hidden rounded-sm px-5',
 		'text-background cursor-pointer py-3 font-medium transition-colors',
-		!loading ? ' bg-primary hover:bg-secondary' : 'bg-primary/50 cursor-not-allowed '
+		!loading ? ' bg-primary hover:bg-secondary' : 'bg-primary/50 cursor-not-allowed ',
+		classValue
 	]}
 	onclick={handleButtonClick}
 >