ansxor.ca
bluesky client without react native baggage written in sveltekit
1<script lang="ts">
2 import './button.css';
3
4 interface Props {
5 /** Is this the principal call to action on the page? */
6 primary?: boolean;
7 /** What background color to use */
8 backgroundColor?: string;
9 /** How large should the button be? */
10 size?: 'small' | 'medium' | 'large';
11 /** Button contents */
12 label: string;
13 /** The onclick event handler */
14 onclick?: () => void;
15 }
16
17 const { primary = false, backgroundColor, size = 'medium', label, ...props }: Props = $props();
18
19 let mode = $derived(primary ? 'storybook-button--primary' : 'storybook-button--secondary');
20 let style = $derived(backgroundColor ? `background-color: ${backgroundColor}` : '');
21</script>
22
23<button
24 type="button"
25 class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
26 {style}
27 {...props}
28>
29 {label}
30</button>