51 lines
No EOL
1,016 B
Svelte
51 lines
No EOL
1,016 B
Svelte
<script lang="ts">
|
|
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
|
|
let {
|
|
type = 'button',
|
|
onClick,
|
|
label,
|
|
size = 'normal',
|
|
backgroundColor,
|
|
primary = false
|
|
}: {
|
|
type: HTMLButtonAttributes['type'];
|
|
onClick: () => void;
|
|
label: string;
|
|
size: 'small' | 'normal' | 'large';
|
|
backgroundColor: string;
|
|
primary: boolean;
|
|
} = $props();
|
|
</script>
|
|
|
|
<button
|
|
{type}
|
|
onclick={onClick}
|
|
class={`button button--${size}`}
|
|
style:background-color={backgroundColor}
|
|
class:button--primary={primary}
|
|
class:button--secondary={!primary}
|
|
>
|
|
{label}
|
|
</button>
|
|
|
|
<style>
|
|
.button {
|
|
@apply inline-block cursor-pointer rounded-full border-0 font-semibold leading-none transition-colors hover:opacity-80 hover:shadow-lg;
|
|
}
|
|
.button--small {
|
|
@apply px-2 py-0.5 text-sm;
|
|
}
|
|
.button--normal {
|
|
@apply px-2 py-1 text-base;
|
|
}
|
|
.button--large {
|
|
@apply px-2.5 py-1 text-xl;
|
|
}
|
|
.button--primary {
|
|
@apply bg-red-600 text-white;
|
|
}
|
|
.button--secondary {
|
|
@apply bg-blue-600 text-white;
|
|
}
|
|
</style> |