feat: form button component

src/lib/components/button/FormButton.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { useActions, type ActionArray } from 'svelte-component-actions'
+
+	export let use: ActionArray = []
+	export let href: string | null = null
+</script>
+
+{#if href}
+	<a {href} use:useActions={use} class="button" {...$$restProps}>
+		<slot />
+	</a>
+{:else}
+	<button on:click use:useActions={use} class="button" {...$$restProps}>
+		<slot />
+	</button>
+{/if}
+
+<style lang="scss">
+	.button {
+		height: 48px;
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		align-items: center;
+
+		font-size: 16px;
+		font-weight: 500;
+
+		border-radius: 6px;
+		background-color: rgba(255, 255, 255, 0.2);
+
+		transition: background-color ease 0.2s;
+
+		&:hover,
+		&:focus {
+			background-color: rgba(255, 255, 255, 0.4);
+		}
+	}
+</style>

src/lib/index.ts

@@ -25,6 +25,7 @@ export { default as Popover } from './components/Popover.svelte'
 // Buttons
 export { default as RoundedOutlinedButton } from './components/button/RoundedOutlinedButton.svelte'
 export { default as TextButton } from './components/button/TextButton.svelte'
+export { default as FormButton } from './components/button/FormButton.svelte'
 
 // Nav
 export { default as Nav } from './components/nav/Nav.svelte'

src/stories/button/FormButton.stories.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" context="module">
+	import { FormButton } from '$lib/index.js'
+
+	export const meta = {
+		title: 'Components/Button/Form Button',
+		component: FormButton
+	}
+</script>
+
+<script lang="ts">
+	import { TextButton } from '$lib/index.js'
+	import { Story, Template } from '@storybook/addon-svelte-csf'
+</script>
+
+<Template let:args>
+	<FormButton {...args}>Button</FormButton>
+</Template>
+
+<Story name="Default" args={{}} />
+
+<Story name="Link" args={{ href: 'https://adofai.gg' }} />