61 lines
1.3 KiB
Svelte
61 lines
1.3 KiB
Svelte
<style lang="scss" src="./ButtonCircle.scss"></style>
|
|
|
|
<script lang="ts">
|
|
import { cx } from 'classix'
|
|
|
|
let {
|
|
tag = 'button',
|
|
url,
|
|
color,
|
|
size,
|
|
type,
|
|
clone = false,
|
|
disabled,
|
|
label,
|
|
children,
|
|
onclick,
|
|
...props
|
|
}: {
|
|
tag?: string
|
|
url?: string
|
|
color?: string
|
|
size?: string
|
|
type?: 'button' | 'reset' | 'submit'
|
|
clone?: boolean
|
|
disabled?: boolean
|
|
label?: string
|
|
children?: any
|
|
onclick?: any
|
|
class?: string
|
|
} = $props()
|
|
|
|
const buttonClass = 'button-circle'
|
|
const classes = $derived(cx(
|
|
buttonClass,
|
|
...[color, size].map(variant => variant && `${buttonClass}--${variant}`),
|
|
clone ? 'has-clone' : null,
|
|
props.class,
|
|
))
|
|
</script>
|
|
|
|
{#snippet content()}
|
|
{#if clone}
|
|
{#each Array(2) as _}
|
|
{@render children()}
|
|
{/each}
|
|
{:else}
|
|
{@render children()}
|
|
{/if}
|
|
{/snippet}
|
|
|
|
|
|
{#if tag === 'a'}
|
|
<a href={url} class={classes} tabindex="0" aria-label={label} {onclick}>
|
|
{@render content()}
|
|
</a>
|
|
{:else}
|
|
<button {type} class={classes} disabled={disabled} tabindex="0" aria-label={label} {onclick}>
|
|
{@render content()}
|
|
</button>
|
|
{/if}
|