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 };
7
8 let { children, class: className, ...props }: Props = $props();
9</script>
10
11<button
12 class={[
13 'bg-base-300 dark:bg-base-700 dark:text-base-50 dark:hover:bg-base-600 hover:bg-base-200 focus-visible:outline-base-600 text-black transition-colors duration-100',
14 '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',
15 className
16 ]}
17 {...props}
18>
19 {@render children()}
20</button>