41 lines
838 B
Svelte
41 lines
838 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import type { MouseEventHandler } from 'svelte/elements';
|
|
|
|
let {
|
|
icon,
|
|
iconPosition = 'right',
|
|
disabled = false,
|
|
children,
|
|
onclick
|
|
}: {
|
|
icon?: string;
|
|
iconPosition?: 'left' | 'right';
|
|
disabled?: boolean;
|
|
children: Snippet;
|
|
onclick?: MouseEventHandler<HTMLButtonElement>;
|
|
} = $props();
|
|
</script>
|
|
|
|
{#snippet iconSnippet()}
|
|
<span class="material-symbols-outlined">{icon}</span>
|
|
{/snippet}
|
|
|
|
<button
|
|
class={[
|
|
'text-accent hover:text-primary inline-flex items-center gap-1.5 transition-colors',
|
|
disabled && 'pointer-events-none cursor-not-allowed opacity-50'
|
|
]}
|
|
{onclick}
|
|
>
|
|
{#if icon && iconPosition === 'left'}
|
|
{@render iconSnippet()}
|
|
{/if}
|
|
|
|
{@render children()}
|
|
|
|
{#if icon && iconPosition === 'right'}
|
|
{@render iconSnippet()}
|
|
{/if}
|
|
</button>
|