this repo has no description
lewis.moe
1<script lang="ts">
2 import type { Snippet } from 'svelte'
3 import type { HTMLButtonAttributes } from 'svelte/elements'
4
5 interface Props extends HTMLButtonAttributes {
6 variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost'
7 size?: 'sm' | 'md' | 'lg'
8 loading?: boolean
9 fullWidth?: boolean
10 children: Snippet
11 }
12
13 let {
14 variant = 'primary',
15 size = 'md',
16 loading = false,
17 fullWidth = false,
18 disabled,
19 children,
20 ...rest
21 }: Props = $props()
22</script>
23
24<button
25 class="btn btn-{variant} btn-{size}"
26 class:full-width={fullWidth}
27 disabled={disabled || loading}
28 {...rest}
29>
30 {#if loading}
31 <span class="spinner"></span>
32 {/if}
33 {@render children()}
34</button>
35
36<style>
37 .btn {
38 display: inline-flex;
39 align-items: center;
40 justify-content: center;
41 gap: var(--space-2);
42 }
43
44 .btn-sm {
45 padding: var(--space-2) var(--space-4);
46 font-size: var(--text-sm);
47 }
48
49 .btn-md {
50 padding: var(--space-4) var(--space-6);
51 font-size: var(--text-base);
52 }
53
54 .btn-lg {
55 padding: var(--space-5) var(--space-7);
56 font-size: var(--text-lg);
57 }
58
59 .full-width {
60 width: 100%;
61 }
62
63 .spinner {
64 width: 1em;
65 height: 1em;
66 border: 2px solid currentColor;
67 border-right-color: transparent;
68 border-radius: 50%;
69 animation: spin 0.6s linear infinite;
70 }
71
72 @keyframes spin {
73 to { transform: rotate(360deg); }
74 }
75</style>