62 lines
1.5 KiB
Svelte
62 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
import type { MouseEventHandler } from "svelte/elements";
|
|
|
|
interface Props {
|
|
type?: "button" | "submit" | "reset" | null | undefined;
|
|
icon?: string;
|
|
extraClasses?: string;
|
|
primary?: boolean;
|
|
secondary?: boolean;
|
|
large?: boolean;
|
|
loading?: boolean;
|
|
disabled?: boolean;
|
|
tooltip?: string | undefined;
|
|
form?: string;
|
|
id?: string | undefined;
|
|
children?: Snippet;
|
|
onclick?: MouseEventHandler<HTMLButtonElement>;
|
|
}
|
|
|
|
let {
|
|
type = undefined,
|
|
icon = "",
|
|
extraClasses = "",
|
|
primary = false,
|
|
secondary = false,
|
|
large = false,
|
|
loading = false,
|
|
disabled = false,
|
|
tooltip = undefined,
|
|
id = undefined,
|
|
form,
|
|
children,
|
|
onclick = undefined,
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<button
|
|
class="relative {extraClasses} flex items-center justify-center"
|
|
class:btn-primary={primary}
|
|
class:btn-secondary={secondary}
|
|
class:btn-large={large}
|
|
class:btn-disabled={disabled || loading}
|
|
disabled={disabled || loading}
|
|
class:tooltip={(tooltip?.length ?? 0) > 0}
|
|
data-title={tooltip}
|
|
{form}
|
|
{onclick}
|
|
{type}
|
|
{id}
|
|
>
|
|
<div class:invisible={loading}>
|
|
{#if icon}
|
|
<i class="fa fa-{icon} mr-2"></i>
|
|
{/if}
|
|
{@render children?.()}
|
|
</div>
|
|
{#if loading}
|
|
<div class="absolute aspect-square spinner"></div>
|
|
{/if}
|
|
</button>
|