adds icons to buttons

2026-06-16 18:46:11 +02:00
parent 0b032b2cd8
commit 52ca2c24f4
2 changed files with 85 additions and 66 deletions
@@ -1,78 +1,89 @@
 <script lang="ts" module>
-	import { ripple } from "$lib/actions/ripple";
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+    import {ripple} from "$lib/actions/ripple";
+    import {cn, type WithElementRef} from "$lib/utils.js";
+    import type {HTMLAnchorAttributes, HTMLButtonAttributes} from "svelte/elements";
+    import {type VariantProps, tv} from "tailwind-variants";
+    import type {Component} from "svelte";

-	export const buttonVariants = tv({
-		base: "relative overflow-hidden font-bold w-fit hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366]",
-		variants: {
-			variant: {
-				primary: "bg-primary text-primary-foreground",
-				secondary: "bg-linear-to-r from-secondary to-[#FF6F6D] text-primary-foreground",
-				bordered: "text-primary border-[#E6E7EA] border-2 bg-white hover:bg-[#122F621A]",
-				tertiary: "text-primary hover:bg-[#122F621A]",
-				success: "text-white bg-[#0FAD80]"
-			},
-			size: {
-				standard: "px-6 h-8 rounded-[16px]",
-				large: "px-8 h-12 rounded-[24px]"
-			},
-		},
-		defaultVariants: {
-			variant: "primary",
-			size: "standard",
-		},
-	});
+    export const buttonVariants = tv({
+        base: "relative overflow-hidden font-bold w-fit min-w-28 hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366] inline-flex items-center justify-center gap-4",
+        variants: {
+            variant: {
+                primary: "bg-primary text-primary-foreground",
+                secondary: "bg-linear-to-r from-secondary to-[#FF6F6D] text-primary-foreground",
+                bordered: "text-primary border-[#E6E7EA] border-2 bg-white hover:bg-[#122F621A]",
+                tertiary: "text-primary hover:bg-[#122F621A]",
+                success: "text-white bg-[#0FAD80]"
+            },
+            size: {
+                standard: "px-6 h-8 rounded-[16px]",
+                large: "px-8 h-12 rounded-[24px]"
+            },
+        },
+        defaultVariants: {
+            variant: "primary",
+            size: "standard",
+        },
+    });

-	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+    export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+    export type ButtonSize = VariantProps<typeof buttonVariants>["size"];

-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-			WithElementRef<HTMLAnchorAttributes> & {
-		variant?: ButtonVariant;
-		size?: ButtonSize;
-	};
+    export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+        WithElementRef<HTMLAnchorAttributes> & {
+        variant?: ButtonVariant;
+        size?: ButtonSize;
+        end?: Component;
+    };
 </script>

 <script lang="ts">
-	let {
-		class: className,
-		variant = "primary",
-		size = "standard",
-		ref = $bindable(null),
-		href = undefined,
-		type = "button",
-		disabled,
-		children,
-		...restProps
-	}: ButtonProps = $props();
+    let {
+        class: className,
+        variant = "primary",
+        size = "standard",
+        end,
+        ref = $bindable(null),
+        href = undefined,
+        type = "button",
+        disabled,
+        children,
+        ...restProps
+    }: ButtonProps = $props();
 </script>

 {#if href}
-	<a
-			use:ripple
-			bind:this={ref}
-			data-slot="button"
-			class={cn(buttonVariants({ variant, size }), className)}
-			href={disabled ? undefined : href}
-			aria-disabled={disabled}
-			role={disabled ? "link" : undefined}
-			tabindex={disabled ? -1 : undefined}
-			{...restProps}
-	>
-		{@render children?.()}
-	</a>
+    <a
+            use:ripple
+            bind:this={ref}
+            data-slot="button"
+            class={cn("", buttonVariants({ variant, size }), className)}
+            href={disabled ? undefined : href}
+            aria-disabled={disabled}
+            role={disabled ? "link" : undefined}
+            tabindex={disabled ? -1 : undefined}
+            {...restProps}
+    >
+        {@render children?.()}
+        {#if end}
+            {@const Icon = end}
+            <Icon/>
+        {/if}
+    </a>
 {:else}
-	<button
-			use:ripple
-			bind:this={ref}
-			data-slot="button"
-			class={" " + cn(buttonVariants({ variant, size }), className)}
-			{type}
-			{disabled}
-			{...restProps}
-	>
-		{@render children?.()}
-	</button>
+    <button
+            use:ripple
+            bind:this={ref}
+            data-slot="button"
+            class={cn("inline-flex items-center justify-center gap-4", buttonVariants({ variant, size }), className)}
+            {type}
+            {disabled}
+            {...restProps}
+    >
+        {@render children?.()}
+        {#if end}
+            {@const Icon = end}
+            <Icon/>
+        {/if}
+    </button>
 {/if}