The Link component is used to navigate between pages, routes, or sections while maintaining consistent styling and accessibility across the application.

• Navigation-ready: Supports internal and external navigation.
• Accessible by default: Uses semantic anchor behavior.
• Customizable styling: Easily adapted to match design systems.
• Flexible usage: Can be used inline or as standalone navigation elements.

Usage Example

Preview

none

underline heart

left

center

right

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatibus pariatur maiores cumque obcaecati, eum quod porro harum magni quisquam sunt nihil, eos modi officia molestiae. Illum minima ad ducimus.

check active 1 check active 2

Code

<script lang="ts">
  import { Link } from "@fefade-ui/svelte"
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <Link href="/">
    <h1>none</h1>
  </Link>

  <Link href="/" hover="underlineNone">underline</Link>

  <Link href="/">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="16px"
      viewBox="0 -960 960 960"
      width="16px"
      fill="red"
    >
      <path
        d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Z"
      />
    </svg>
    heart
  </Link>

  <Link href="/" hover="left" target="_blank">
    <h1>left</h1>
  </Link>

  <Link pathname="/" hover="center">
    <h1>center</h1>
  </Link>

  <Link pathname="/" hover="right">
    <h1>right</h1>
  </Link>

  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatibus
    pariatur maiores cumque <Link href="/" hover="center">
      <strong style="color: red;">obcaecati</strong>
    </Link>, eum quod porro harum magni quisquam sunt nihil, eos modi officia
    molestiae. Illum <Link href="/" hover="underlineNone">minima</Link> ad ducimus.
  </p>

  <Link
    class={({ isActive }) => (isActive ? "text-on-error" : "text-on-info")}
    pathname="/"
    href="/"
  >
    check active 1
  </Link>

  <Link
    pathname="/"
    href="/"
    style={({ isActive }) => ({ color: isActive ? "red" : "aqua" })}
  >
    check active 2
  </Link>
</div>

Props

Prop	Type	Default	Description
href	string	—	URL to navigate to. Used for standard anchor navigation.
pathname	string	—	Enables active route detection based on current path.
hover	"left" | "center" | "right" | "underlineNone"	"left"	Defines hover animation style.
target	string	"_self"	Specifies where to open the link (e.g. _blank).
class	string | function	—	Custom class or function receiving { isActive } for dynamic styling.
style	object | function	—	Inline styles or function receiving { isActive } for dynamic styling.
children	node	—	Content rendered inside the link.

Best Practices

• Prefer pathname when you need active route detection.
• Use href for simple navigation without route awareness.
• Avoid overloading links with heavy content inside inline text.
• Ensure hover styles remain accessible and readable.
• Use icons sparingly to support meaning, not replace text.