Link

SfLink is a component that allows you to create a consistent link style across your application.

Examples

Link variants

SfLink supports 2 variants that can be set via variant prop: 'primary', 'secondary'.

<template>
  <div class="space-x-4">
    <SfLink href="#" variant="primary"> Primary </SfLink>
    <SfLink href="#" variant="secondary"> Secondary </SfLink>
  </div>
</template>

<script lang="ts" setup>
import { SfLink } from '@storefront-ui/vue';
</script>

Customization

When using the 'secondary' variant, the text color of the base state is inherited from the parent element.

You can customize your color palette as a part of your Tailwind config.

<template>
  <div class="space-x-4">
    <SfLink href="#" class="text-sm"> Small </SfLink>
    <SfLink href="#" variant="secondary" class="text-negative-700"> To delete page </SfLink>
  </div>
</template>

<script lang="ts" setup>
import { SfLink } from '@storefront-ui/vue';
</script>

Accessibility notes

When no tag provided, the component will render as an <a>. To achieve proper accessibility it is important to implement required properties depending on the passed tag.

<template>
  <div class="space-x-4">
    <SfLink :tag="NuxtLink" href="#"> NuxtLink </SfLink>
  </div>
</template>

<script lang="ts" setup>
import { resolveComponent } from 'vue';
import { SfLink } from '@storefront-ui/vue';

const NuxtLink = resolveComponent('NuxtLink');
</script>

Playground