You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
943 B
32 lines
943 B
<script lang="ts"> |
|
import type { Snippet } from "svelte"; |
|
|
|
interface Props { |
|
href?: string; |
|
disabled?: boolean; |
|
onclick?: () => void; |
|
children: Snippet; |
|
class?: string; |
|
} |
|
|
|
let { |
|
href, |
|
disabled = false, |
|
onclick, |
|
children, |
|
class: className = "", |
|
}: Props = $props(); |
|
|
|
const baseClasses = |
|
"inline-flex items-center justify-center px-6 py-4 bg-kv-blue font-kv-body text-kv-white text-2xl uppercase cursor-pointer transition-opacity hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed kv-shadow-button"; |
|
</script> |
|
|
|
{#if href && !disabled} |
|
<a {href} class="{baseClasses} {className}"> |
|
<span class="kv-shadow-text">{@render children()}</span> |
|
</a> |
|
{:else} |
|
<button class="{baseClasses} {className}" {disabled} {onclick}> |
|
<span class="kv-shadow-text">{@render children()}</span> |
|
</button> |
|
{/if}
|
|
|