slipnote.app
Built for people who think better out loud.
isaaccorbrey.com
1<script lang="ts">
2 import type { HTMLButtonAttributes } from "svelte/elements";
3
4 let {
5 children,
6 class: className = "",
7 ...props
8 }: HTMLButtonAttributes = $props();
9</script>
10
11<button
12 {...props}
13 class="
14 h-11 w-11 shrink-0
15 flex items-center justify-center
16 bg-transparent hover:bg-slate-950/7 active:bg-slate-950/15
17 border-s-slate-950 rounded-full
18 shadow-[1px_1px_3px_rgba(15,23,42,0.75)]
19 border-l border-t border-r-4 border-b-4
20 active:border-l-4 active:border-t-4 active:border-r active:border-b
21 active:shadow-[inset_-1px_-1px_3px_rgba(15,23,42,0.75)]
22 focus-visible:outline-none focus-visible:border-blue-700
23 transition-all motion-reduce:transition-none duration-60
24 {className}
25 "
26>
27 {@render children?.()}
28</button>