your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { HTMLButtonAttributes } from 'svelte/elements';
3
4 type Props = HTMLButtonAttributes & {
5 children: () => any;
6 ref?: HTMLButtonElement | null;
7 };
8
9 let { children, ref = $bindable(), class: className, ...props }: Props = $props();
10</script>
11
12<button
13 bind:this={ref}
14 class={[
15 'bg-accent-600 hover:bg-accent-500 focus-visible:outline-accent-600 text-white',
16 'inline-flex cursor-pointer justify-center rounded-full px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
17 className
18 ]}
19 {...props}
20>
21 {@render children()}
22</button>