1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<script lang="ts">
import type { HTMLButtonAttributes } from "svelte/elements";
import { Spinner } from "phosphor-svelte";
let { children, loading, type = "button", ...restProps }: Props = $props();
type Props = {
loading?: boolean;
} & HTMLButtonAttributes;
</script>
<button {...restProps} {type}>
{@render children?.()}
{#if loading}
<Spinner />
{/if}
</button>
<style>
button {
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.1);
align-items: center;
border-radius: 3px;
padding: 2px 4px;
cursor: pointer;
display: flex;
gap: 3px;
transition: 0.1s all ease;
height: fit-content;
&:hover,
&:focus {
background-color: rgba(0, 0, 0, 0.15);
}
&:active {
background-color: rgba(0, 0, 0, 0.2);
transform: scale(0.96);
transition: 0.2s all ease;
}
}
</style>
|
