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'
Default: '--auto'

Sets the action the command 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.
Anchor to commandFor
commandFor
string

Sets the element the commandFor should act on when this clickable is activated.

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

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 interestFor
interestFor
string

Sets the element the interestFor should act on when this clickable is activated.

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" | "_self" | "_parent" | "_top"
Default: 'auto'

Specifies where to display the linked URL.

Anchor to tone
tone
"critical" | "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

Learn more about registering events.

Anchor to click
click
<typeof tagName> | null
Was this section helpful?

Anchor to slotsSlots

Anchor to children
children
HTMLElement

The content of the Link.

Was this section helpful?

Code

<s-link href="javascript:void(0)">fufilling orders</s-link>

Anchor to examplesExamples

Component examples

Anchor to example-basic-usageBasic usage

Anchor to example-basic-links-in-paragraphBasic Links in Paragraph

Links automatically inherit the tone from their surrounding paragraph context.

Anchor to example-links-in-subdued-paragraphLinks in Subdued Paragraph

Demonstrates links within subdued paragraph, showing how links can be used in less prominent paragraph contexts for additional guidance or support.

Anchor to example-critical-context-linksCritical Context Links

Illustrates how links can be used in critical or urgent text contexts, drawing attention to important actions that require immediate user intervention.

Anchor to example-links-with-auto-toneLinks with Auto Tone

Shows how links automatically adapt their tone to the surrounding text context, maintaining visual consistency while providing navigation.

Anchor to example-links-in-box-containerLinks in Box Container

Illustrates using links within a box container to provide contextual navigation and additional information in a visually contained area.

Anchor to example-download-linksDownload Links

Demonstrates how to create links that trigger file downloads, useful for exporting data or providing downloadable resources.

Anchor to example-external-linksExternal Links

Illustrates linking to external resources with different targets, showing how to open links in new tabs and provide navigation to external documentation.

Anchor to example-links-with-language-attributeLinks with Language Attribute

Shows how to use the lang attribute to specify the language of a link, supporting internationalization and proper screen reader pronunciation.

Anchor to example-links-with-different-tonesLinks with Different Tones

Demonstrates how links can have different visual tones, including default, neutral, and critical, allowing for varied contextual styling.

Was this section helpful?

Basic Links in Paragraph

<s-paragraph>
Your product catalog is empty. Start by <s-link href="javascript:void(0)">adding your first product</s-link> or <s-link href="javascript:void(0)">importing existing inventory</s-link>.
</s-paragraph>