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>