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