50 lines
1.0 KiB
Svelte
50 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import type { ClassValue, MouseEventHandler } from 'svelte/elements';
|
|
import { defaultIconProps, type IconDef } from './util';
|
|
|
|
interface Props {
|
|
icon?: IconDef;
|
|
iconPosition?: 'left' | 'right';
|
|
disabled?: boolean;
|
|
class?: ClassValue | null | undefined;
|
|
children: Snippet;
|
|
onclick?: MouseEventHandler<HTMLButtonElement>;
|
|
}
|
|
|
|
let {
|
|
icon,
|
|
iconPosition = 'right',
|
|
disabled = false,
|
|
class: classValue,
|
|
children,
|
|
onclick
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
{#snippet iconSnippet()}
|
|
{#if icon}
|
|
<icon.component {...icon.props || defaultIconProps} />
|
|
{/if}
|
|
{/snippet}
|
|
|
|
<button
|
|
type="button"
|
|
class={[
|
|
'text-sui-accent hover:text-sui-primary inline-flex cursor-pointer items-center gap-1.5 transition-colors',
|
|
disabled && 'pointer-events-none cursor-not-allowed opacity-50',
|
|
classValue
|
|
]}
|
|
{onclick}
|
|
>
|
|
{#if icon && iconPosition === 'left'}
|
|
{@render iconSnippet()}
|
|
{/if}
|
|
|
|
{@render children()}
|
|
|
|
{#if icon && iconPosition === 'right'}
|
|
{@render iconSnippet()}
|
|
{/if}
|
|
</button>
|