diff --git a/src/lib/components/Actions/Button.svelte b/src/lib/components/Actions/Button.svelte
index 6a3dfad..905dcfd 100644
--- a/src/lib/components/Actions/Button.svelte
+++ b/src/lib/components/Actions/Button.svelte
@@ -1,38 +1,33 @@
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
 
-	interface Props extends HTMLButtonAttributes {
+	type Props = {
 		active?: boolean;
 		animation?: boolean;
 		block?: boolean;
-		children: Snippet;
 		color?: DaisyColor;
-		disabled?: boolean;
 		full?: boolean;
 		glass?: boolean;
-		onclick?: () => void;
 		shape?: 'circle' | 'square';
 		size?: DaisySize;
-		type?: HTMLButtonAttributes['type'];
 		variant?: 'link' | 'outline';
 		wide?: boolean;
-	}
+	} & SvelteHTMLElements['button'];
 
 	let {
 		active = false,
 		animation = true,
 		block = false,
 		children,
+		class: className,
 		color,
-		disabled = false,
+		disabled,
 		full = false,
 		glass = false,
-		onclick: onClick,
 		shape,
 		size,
-		type = 'button',
 		wide = false,
 		variant,
 		...props
@@ -40,8 +35,9 @@
 </script>
 
 <button
-	onclick={onClick}
-	class="btn"
+	{...props}
+	{disabled}
+	class={twMerge('btn', className)}
 	class:btn-active={active}
 	class:no-animation={!animation}
 	class:btn-block={block}
@@ -65,11 +61,8 @@
 	class:btn-link={variant === 'link'}
 	class:btn-outline={variant === 'outline'}
 	class:btn-wide={wide}
-	{disabled}
-	{type}
-	{...props}
 >
-	{@render children()}
+	{@render children?.()}
 </button>
 
 <style></style>