src/lib/components/Actions/Button.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
+	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	interface Props {
 		block?: boolean;
+		children: Snippet;
 		color?: DaisyColor;
 		glass?: boolean;
-		label: string;
 		outline?: boolean;
 		onClick?: () => void;
 		responsive?: boolean;
@@ -17,9 +18,9 @@
 
 	let {
 		block = false,
+		children,
 		color,
 		glass = false,
-		label,
 		outline = false,
 		onClick,
 		responsive = false,
@@ -51,7 +52,7 @@
 	class:btn-error={color === 'error'}
 	class={`btn ${responsive && 'btn-xs sm:btn-sm md:btn-md lg:btn-lg'}`}
 >
-	{label}
+	{@render children()}
 </button>
 
 <style></style>

src/routes/login/+page.svelte

@@ -54,7 +54,7 @@
 			{/if}
 		</div>
 		<div class="card-actions px-4">
-			<Button block type="submit" label={messages.login_button_submit()} outline />
+			<Button block type="submit" outline>{messages.login_button_submit()}</Button>
 		</div>
 	</form>
 {/snippet}