Louisette 0.8.2

Link

The link component provides a way to navigate to another page or section of a page.

WAI-ARIA: Link Pattern

Features

Keyboard navigation

  • Enter activates the link

Example

A clickable image

Sources

+page.svelte

<script lang="ts">
  import { createLink } from 'louisette'
  import { page } from '$app/stores'

  const { linkAttrs } = createLink({
    href: $page.url.pathname,
  })
</script>

<!-- svelte-ignore a11y-img-redundant-alt -->
<img
  {...$linkAttrs}
  src="https://picsum.photos/seed/1/200/300"
  alt="A clickable image"
  class="w-[10rem] cursor-pointer rounded-sm focus:outline-none focus-visible:ring focus-visible:ring-accent-500 focus-visible:ring-opacity-50"
/>