feat: add Button.Nav

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts

@@ -1,21 +1,24 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
 	title: "Fragments/SettingsNavigationBtn",
 	component: SettingsNavigationBtn,
 	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+	render: (args: {
+ Component: SettingsNavigationBtn;
+ props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
  Component: SettingsNavigationBtn,
  props: args,
 	}),
 };
 
 export const Primary = {
 	args: {
- icon: icon,
+ icon: LanguageSquareIcon,
  label: "Language",
-onClick: () => alert("asdf"),
+href: "#",
 	},
 };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-onClick: () => void;
+href: string;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
  <div class="flex items-center gap-2">
- <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-{@render icon?.()}
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+<HugeiconsIcon {icon} size={30} color="var(--color-black-500)" />
  </div>
  <p class="font-medium!">{label}</p>
  </div>
  <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
+</Button.Nav>

infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte

@@ -1,7 +1,24 @@
 <script context="module">
-export { ButtonText };
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
  Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+ Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+ <div class="flex items-center gap-2">
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+ <HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
+ </div>
+ <h1>Settings</h1>
+ </div>
+ <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import {
+	ButtonNavSettings,
+	ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
+
+export default {
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: ButtonNav;
+ props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+ Component: ButtonNav,
+ props: args,
+	}),
+};
+
+export const Default = {
+	args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+	args: {
+ href: "#",
+ children: ButtonNavSettings,
+ class: "flex items-center justify-between px-3 py-2",
+	},
+};

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+ {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+ import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+ // The content of the button
+</Button.Nav>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts

@@ -1,21 +1,24 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
 	title: "Fragments/SettingsNavigationBtn",
 	component: SettingsNavigationBtn,
 	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+	render: (args: {
+ Component: SettingsNavigationBtn;
+ props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
  Component: SettingsNavigationBtn,
  props: args,
 	}),
 };
 
 export const Primary = {
 	args: {
- icon: icon,
+ icon: LanguageSquareIcon,
  label: "Language",
-onClick: () => alert("asdf"),
+href: "#",
 	},
 };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-onClick: () => void;
+href: string;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
  <div class="flex items-center gap-2">
- <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-{@render icon?.()}
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+<HugeiconsIcon {icon} size={30} color="var(--color-black-500)" />
  </div>
  <p class="font-medium!">{label}</p>
  </div>
  <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
+</Button.Nav>

infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte

@@ -1,7 +1,24 @@
 <script context="module">
-export { ButtonText };
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
  Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+ Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+ <div class="flex items-center gap-2">
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+ <HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
+ </div>
+ <h1>Settings</h1>
+ </div>
+ <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import {
+	ButtonNavSettings,
+	ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
+
+export default {
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: ButtonNav;
+ props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+ Component: ButtonNav,
+ props: args,
+	}),
+};
+
+export const Default = {
+	args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+	args: {
+ href: "#",
+ children: ButtonNavSettings,
+ class: "flex items-center justify-between px-3 py-2",
+	},
+};

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+ {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+ import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+ // The content of the button
+</Button.Nav>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts

@@ -1,21 +1,24 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
 	title: "Fragments/SettingsNavigationBtn",
 	component: SettingsNavigationBtn,
 	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+	render: (args: {
+ Component: SettingsNavigationBtn;
+ props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
  Component: SettingsNavigationBtn,
  props: args,
 	}),
 };
 
 export const Primary = {
 	args: {
- icon: icon,
+ icon: LanguageSquareIcon,
  label: "Language",
-onClick: () => alert("asdf"),
+href: "#",
 	},
 };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-onClick: () => void;
+href: string;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
  <div class="flex items-center gap-2">
- <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-{@render icon?.()}
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+<HugeiconsIcon {icon} size={30} color="var(--color-black-500)" />
  </div>
  <p class="font-medium!">{label}</p>
  </div>
  <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
+</Button.Nav>

infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte

@@ -1,7 +1,24 @@
 <script context="module">
-export { ButtonText };
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
  Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+ Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+ <div class="flex items-center gap-2">
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+ <HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
+ </div>
+ <h1>Settings</h1>
+ </div>
+ <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import {
+	ButtonNavSettings,
+	ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
+
+export default {
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: ButtonNav;
+ props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+ Component: ButtonNav,
+ props: args,
+	}),
+};
+
+export const Default = {
+	args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+	args: {
+ href: "#",
+ children: ButtonNavSettings,
+ class: "flex items-center justify-between px-3 py-2",
+	},
+};

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+ {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+ import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+ // The content of the button
+</Button.Nav>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts

@@ -1,21 +1,24 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
 	title: "Fragments/SettingsNavigationBtn",
 	component: SettingsNavigationBtn,
 	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+	render: (args: {
+ Component: SettingsNavigationBtn;
+ props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
  Component: SettingsNavigationBtn,
  props: args,
 	}),
 };
 
 export const Primary = {
 	args: {
- icon: icon,
+ icon: LanguageSquareIcon,
  label: "Language",
-onClick: () => alert("asdf"),
+href: "#",
 	},
 };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-onClick: () => void;
+href: string;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
  <div class="flex items-center gap-2">
- <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-{@render icon?.()}
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+<HugeiconsIcon {icon} size={30} color="var(--color-black-500)" />
  </div>
  <p class="font-medium!">{label}</p>
  </div>
  <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
+</Button.Nav>

infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte

@@ -1,7 +1,24 @@
 <script context="module">
-export { ButtonText };
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
  Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+ Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+ <div class="flex items-center gap-2">
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+ <HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
+ </div>
+ <h1>Settings</h1>
+ </div>
+ <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import {
+	ButtonNavSettings,
+	ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
+
+export default {
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: ButtonNav;
+ props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+ Component: ButtonNav,
+ props: args,
+	}),
+};
+
+export const Default = {
+	args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+	args: {
+ href: "#",
+ children: ButtonNavSettings,
+ class: "flex items-center justify-between px-3 py-2",
+	},
+};

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+ {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+ import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+ // The content of the button
+</Button.Nav>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts

@@ -1,21 +1,24 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
 	title: "Fragments/SettingsNavigationBtn",
 	component: SettingsNavigationBtn,
 	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+	render: (args: {
+ Component: SettingsNavigationBtn;
+ props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
  Component: SettingsNavigationBtn,
  props: args,
 	}),
 };
 
 export const Primary = {
 	args: {
- icon: icon,
+ icon: LanguageSquareIcon,
  label: "Language",
-onClick: () => alert("asdf"),
+href: "#",
 	},
 };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-onClick: () => void;
+href: string;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
  <div class="flex items-center gap-2">
- <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-{@render icon?.()}
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+<HugeiconsIcon {icon} size={30} color="var(--color-black-500)" />
  </div>
  <p class="font-medium!">{label}</p>
  </div>
  <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
+</Button.Nav>

infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte

@@ -1,7 +1,24 @@
 <script context="module">
-export { ButtonText };
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
  Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+ Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+ <div class="flex items-center gap-2">
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+ <HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
+ </div>
+ <h1>Settings</h1>
+ </div>
+ <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import {
+	ButtonNavSettings,
+	ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
+
+export default {
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: ButtonNav;
+ props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+ Component: ButtonNav,
+ props: args,
+	}),
+};
+
+export const Default = {
+	args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+	args: {
+ href: "#",
+ children: ButtonNavSettings,
+ class: "flex items-center justify-between px-3 py-2",
+	},
+};

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+ {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+ import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+ // The content of the button
+</Button.Nav>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts

@@ -1,21 +1,24 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
 	title: "Fragments/SettingsNavigationBtn",
 	component: SettingsNavigationBtn,
 	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+	render: (args: {
+ Component: SettingsNavigationBtn;
+ props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
  Component: SettingsNavigationBtn,
  props: args,
 	}),
 };
 
 export const Primary = {
 	args: {
- icon: icon,
+ icon: LanguageSquareIcon,
  label: "Language",
-onClick: () => alert("asdf"),
+href: "#",
 	},
 };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-onClick: () => void;
+href: string;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
  <div class="flex items-center gap-2">
- <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-{@render icon?.()}
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+<HugeiconsIcon {icon} size={30} color="var(--color-black-500)" />
  </div>
  <p class="font-medium!">{label}</p>
  </div>
  <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
+</Button.Nav>

infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte

@@ -1,7 +1,24 @@
 <script context="module">
-export { ButtonText };
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
  Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+ Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+ <div class="flex items-center gap-2">
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+ <HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
+ </div>
+ <h1>Settings</h1>
+ </div>
+ <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import {
+	ButtonNavSettings,
+	ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
+
+export default {
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: ButtonNav;
+ props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+ Component: ButtonNav,
+ props: args,
+	}),
+};
+
+export const Default = {
+	args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+	args: {
+ href: "#",
+ children: ButtonNavSettings,
+ class: "flex items-center justify-between px-3 py-2",
+	},
+};

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+ {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+ import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+ // The content of the button
+</Button.Nav>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts

@@ -1,21 +1,24 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
 	title: "Fragments/SettingsNavigationBtn",
 	component: SettingsNavigationBtn,
 	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+	render: (args: {
+ Component: SettingsNavigationBtn;
+ props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
  Component: SettingsNavigationBtn,
  props: args,
 	}),
 };
 
 export const Primary = {
 	args: {
- icon: icon,
+ icon: LanguageSquareIcon,
  label: "Language",
-onClick: () => alert("asdf"),
+href: "#",
 	},
 };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-onClick: () => void;
+href: string;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
  <div class="flex items-center gap-2">
- <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-{@render icon?.()}
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+<HugeiconsIcon {icon} size={30} color="var(--color-black-500)" />
  </div>
  <p class="font-medium!">{label}</p>
  </div>
  <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
+</Button.Nav>

infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte

@@ -1,7 +1,24 @@
 <script context="module">
-export { ButtonText };
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
  Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+ Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+ <div class="flex items-center gap-2">
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+ <HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
+ </div>
+ <h1>Settings</h1>
+ </div>
+ <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import {
+	ButtonNavSettings,
+	ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
+
+export default {
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: ButtonNav;
+ props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+ Component: ButtonNav,
+ props: args,
+	}),
+};
+
+export const Default = {
+	args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+	args: {
+ href: "#",
+ children: ButtonNavSettings,
+ class: "flex items-center justify-between px-3 py-2",
+	},
+};

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+ {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+ import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+ // The content of the button
+</Button.Nav>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts

@@ -1,21 +1,24 @@
-import type { Snippet } from "svelte";
-import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import type { ComponentProps } from "svelte";
 import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
 
 export default {
 	title: "Fragments/SettingsNavigationBtn",
 	component: SettingsNavigationBtn,
 	tags: ["autodocs"],
-	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+	render: (args: {
+ Component: SettingsNavigationBtn;
+ props: ComponentProps<typeof SettingsNavigationBtn>;
+	}) => ({
  Component: SettingsNavigationBtn,
  props: args,
 	}),
 };
 
 export const Primary = {
 	args: {
- icon: icon,
+ icon: LanguageSquareIcon,
  label: "Language",
-onClick: () => alert("asdf"),
+href: "#",
 	},
 };

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
+import * as Button from "$lib/ui/Button";
 import { cn } from "$lib/utils";
 import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/svelte";
-import type { Snippet } from "svelte";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
-	icon: Snippet;
+	icon: IconSvgElement;
 	label: string;
-onClick: () => void;
+href: string;
 }
 
-let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+const { icon, label, href, ...restProps }: ISettingsNavigationBtn = $props();
 </script>
 
-<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+<Button.Nav {href} {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)}>
  <div class="flex items-center gap-2">
- <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
-{@render icon?.()}
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+<HugeiconsIcon {icon} size={30} color="var(--color-black-500)" />
  </div>
  <p class="font-medium!">{label}</p>
  </div>
  <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
-</div>
+</Button.Nav>

infrastructure/eid-wallet/src/lib/ui/Button/Button.stories.snippet.svelte

@@ -1,7 +1,24 @@
 <script context="module">
-export { ButtonText };
+import { ArrowRight01Icon, SettingsIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { ButtonText, ButtonNavText, ButtonNavSettings };
 </script>
 
 {#snippet ButtonText()}
  Button
 {/snippet}
+
+{#snippet ButtonNavText()}
+ Nav Button
+{/snippet}
+
+{#snippet ButtonNavSettings()}
+ <div class="flex items-center gap-2">
+ <div class="p-3 bg-gray max-w-max rounded-full object-cover flex items-center" >
+ <HugeiconsIcon icon={SettingsIcon} size={30} color="var(--color-black-500)" />
+ </div>
+ <h1>Settings</h1>
+ </div>
+ <HugeiconsIcon size={30} color="var(--color-black-500)" icon={ArrowRight01Icon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Button/ButtonIcon.svelte

@@ -27,7 +27,6 @@ const {
 	icon,
 	iconSize = undefined,
 	isActive = false,
-	children = undefined,
 	...restProps
 }: IButtonProps = $props();
 

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.stories.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "svelte";
+import {
+	ButtonNavSettings,
+	ButtonNavText,
+} from "./Button.stories.snippet.svelte";
+import ButtonNav from "./ButtonNav.svelte";
+
+export default {
+	title: "UI/ButtonNav",
+	component: ButtonNav,
+	tags: ["autodocs"],
+	render: (args: {
+ Component: ButtonNav;
+ props: ComponentProps<typeof ButtonNav>;
+	}) => ({
+ Component: ButtonNav,
+ props: args,
+	}),
+};
+
+export const Default = {
+	args: { href: "#", children: ButtonNavText },
+};
+
+export const ForSettings = {
+	args: {
+ href: "#",
+ children: ButtonNavSettings,
+ class: "flex items-center justify-between px-3 py-2",
+	},
+};

infrastructure/eid-wallet/src/lib/ui/Button/ButtonNav.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { Snippet } from "svelte";
+import type { HTMLAnchorAttributes } from "svelte/elements";
+
+interface IButtonNav extends HTMLAnchorAttributes {
+	href: string;
+	children: Snippet;
+}
+
+const { href, children, ...restProps }: IButtonNav = $props();
+</script>
+
+<a {href} {...restProps} class={cn(restProps.class)}>
+ {@render children()}
+</a>
+
+<!-- 
+@component
+export default ButtonNav;
+@description
+This component is a wrapper for a button that navigates to a different page.
+
+@props
+- href: The URL of the page to navigate to.
+- children: The content of the button.
+- ...restProps: Any other props that can be passed to an anchor element.
+
+@usage
+```html
+<script lang="ts">
+ import * as Button from '$lib/ui/Button'
+ import { SettingsIcon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
+</script>
+
+<Button.Nav href="/settings">
+ // The content of the button
+</Button.Nav>
+```
+ -->

infrastructure/eid-wallet/src/lib/ui/Button/index.ts

@@ -1,4 +1,5 @@
 import Action from "./ButtonAction.svelte";
 import Icon from "./ButtonIcon.svelte";
+import Nav from "./ButtonNav.svelte";
 
-export { Action, Icon };
+export { Action, Icon, Nav };