boredgame/src/lib/components/ui/button/Button.svelte

<script lang="ts">
	import type { VariantProps } from "class-variance-authority";
	import type {
		HTMLAnchorAttributes,
		HTMLButtonAttributes
	} from "svelte/elements";
	import { cn } from "$lib/utils";
	import { buttonVariants } from ".";

	let className: string | undefined | null = undefined;
	export { className as class };
	export let href: HTMLAnchorAttributes["href"] = undefined;
	export let type: HTMLButtonAttributes["type"] = undefined;
	export let variant: VariantProps<typeof buttonVariants>["variant"] =
		"default";
	export let size: VariantProps<typeof buttonVariants>["size"] = "default";

	type Props = {
		class?: string | null;
		variant?: VariantProps<typeof buttonVariants>["variant"];
		size?: VariantProps<typeof buttonVariants>["size"];
	};

	interface AnchorElement extends Props, HTMLAnchorAttributes {
		href?: HTMLAnchorAttributes["href"];
		type?: never;
	}

	interface ButtonElement extends Props, HTMLButtonAttributes {
		type?: HTMLButtonAttributes["type"];
		href?: never;
	}

	type $$Props = AnchorElement | ButtonElement;
</script>

<svelte:element
	this={href ? "a" : "button"}
	type={href ? undefined : type}
	{href}
	class={cn(buttonVariants({ variant, size, className }))}
	{...$$restProps}
	on:click
	on:change
	on:keydown
	on:keyup
	on:mouseenter
	on:mouseleave
>
	<slot />
</svelte:element>