SLink <s-link>

A text link that navigates to another page or URL, or runs a command. SLink is the typed Vue 3 wrapper for Shopify's Polaris <s-link> web component.

import { SLink } from 'polaris-vue-elements'

Best practices

• Open only external links in a new tab. Set target="_blank" for URLs outside the admin, such as help docs or partner sites. Links within the admin should stay in the same tab so merchants keep their place in the workflow.

See Shopify's best practices for <s-link> for the full guidance.

Example

Neutral linkCritical link

<script setup>
import { SLink } from 'polaris-vue-elements'
</script>

<template>
  <SLink href="https://polaris.shopify.com" target="_blank">Neutral link</SLink>
  <SLink href="https://polaris.shopify.com" target="_blank" tone="critical">Critical link</SLink>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Sets the action the commandFor should take when this clickable is activated. See the documentation of particular components for the actions they support. - --auto: a default action for the target component. - --show: shows the target component. - --hide: hides the target component. - --toggle: toggles the target component. - --copy: copies the target ClipboardItem.
commandFor	string	ID of a component that should respond to activations (e.g. clicks) on this component. See command for how to control the behavior of the target.
download	string	Causes the browser to treat the linked URL as a download with the string being the file name. Download only works for same-origin URLs or the blob: and data: schemes.
href	string	The URL to link to. - If set, it will navigate to the location specified by href after executing the click event. - If a commandFor is set, the command will be executed instead of the navigation.
interestFor	string	ID of a component that should respond to interest (e.g. hover and focus) on this component.
lang	string	The language of the text content. Use this when the text is in a different language than the rest of the page, allowing assistive technologies such as screen readers to invoke the correct pronunciation. The value should be a valid language subtag from the IANA language subtag registry.
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	Specifies where to display the linked URL.
tone	"auto" | "neutral" | "critical"	The semantic meaning and color treatment of the component. - critical: Urgent problems or destructive actions. - auto: Automatically determined based on context. - neutral: General information without specific intent.

Events

Event	Type
click	MouseEvent

Listen for these with @click-style listeners on <SLink>.

Slots

Slot	Description
default	The text or elements displayed within the link component, which navigates users to a different location when activated.