47 lines
1.2 KiB
Svelte
47 lines
1.2 KiB
Svelte
<style lang="scss">
|
|
@import "./ButtonCircle";
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { cx } from 'classix'
|
|
|
|
export let tag = 'button'
|
|
export let url: string = undefined
|
|
export let color: string = undefined
|
|
export let size: string = undefined
|
|
export let type: 'button' | 'reset' | 'submit' = undefined
|
|
export let clone = false
|
|
export let disabled: boolean = undefined
|
|
export let label: string = undefined
|
|
|
|
const className = 'button-circle'
|
|
$: classes = cx(
|
|
className,
|
|
...[color, size].map(variant => variant && `${className}--${variant}`),
|
|
clone ? 'has-clone' : null,
|
|
$$props.class
|
|
)
|
|
</script>
|
|
|
|
{#if tag === 'a'}
|
|
<a href={url} class={classes} tabindex="0" aria-label={label} on:click>
|
|
{#if clone}
|
|
{#each Array(2) as _}
|
|
<slot />
|
|
{/each}
|
|
{:else}
|
|
<slot />
|
|
{/if}
|
|
</a>
|
|
{:else}
|
|
<button {type} class={classes} disabled={disabled} tabindex="0" aria-label={label} on:click>
|
|
{#if clone}
|
|
{#each Array(2) as _}
|
|
<slot />
|
|
{/each}
|
|
{:else}
|
|
<slot />
|
|
{/if}
|
|
</button>
|
|
{/if}
|