Skip to main content

Link

Makes text interactive, allowing users to navigate to other pages or perform specific actions. Supports standard URLs, custom protocols, and navigation within Shopify or app pages.

Anchor to propertiesProperties

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose or contents of the Link. It will be read to users using assistive technologies such as screen readers.

Use this when using only an icon or the content of the link is not enough context for users using assistive technologies.

Anchor to command
command
'--auto' | '--show' | '--hide' | '--toggle' | '--copy'
Default: '--auto'

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.
Anchor to commandFor
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.

Anchor to href
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.
Anchor to id
id
string

A unique identifier for the element.

Anchor to interestFor
interestFor
string

ID of a component that should respond to interest (e.g. hover and focus) on this component.

Anchor to lang
lang
string

Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. Reference of values ("subtag" label)

Anchor to target
target
'auto' | '_blank'
Default: 'auto'

Specifies where to display the linked URL.

Anchor to tone
tone
'auto' | 'neutral'
Default: 'auto'

Sets the tone of the Link, based on the intention of the information being conveyed.

Was this section helpful?

Anchor to eventsEvents

Anchor to click
click
((event: <typeof tagName>) => void) | null

Callback when the link is activated. This will be called before navigating to the location specified by href.

Was this section helpful?

Code

<s-link href="https://www.shopify.com/ca/legal/privacy">Privacy policy</s-link>

Preview

Anchor to best-practicesBest Practices

  • Use links primarily for navigation and use buttons primarily for actions.

  • The HTML that renders for the s-button and s-link components includes style and accessibility information. Use these components intentionally and consistently to provide a more inclusive experience for assistive technology users and a more cohesive visual experience for sighted users.

Was this section helpful?