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 accessibilityLabelaccessibilityLabelstring
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 commandcommand'--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 commandForcommandForstring
Sets the element the commandFor should act on when this clickable is activated.
- Anchor to downloaddownloadstring
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 hrefhrefstring
The URL to link to.
- If set, it will navigate to the location specified by
href
after executing theclick
event. - If a
is set, the
command
will be executed instead of the navigation.
- If set, it will navigate to the location specified by
- Anchor to interestForinterestForstring
Sets the element the interestFor should act on when this clickable is activated.
- Anchor to langlangstring
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 targettarget"auto" | AnyString | "_blank" | "_self" | "_parent" | "_top"
Specifies where to display the linked URL.
- Anchor to tonetone"critical" | "auto" | "neutral"
Sets the tone of the Link, based on the intention of the information being conveyed.
Link
- accessibilityLabel
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.
string
- adoptedCallback
() => void
- attributeChangedCallback
(name: string) => void
- click
Like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`. For example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.
({ sourceEvent }?: ClickOptions) => void
- command
Sets the action the [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#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.
'--auto' | '--show' | '--hide' | '--toggle'
- commandFor
Sets the element the [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this clickable is activated.
string
- connectedCallback
() => void
- disconnectedCallback
() => void
- download
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.
string
- href
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.
string
- interestFor
Sets the element the [interestFor](https://open-ui.org/components/interest-invokers.explainer/#the-pitch-in-code) should act on when this clickable is activated.
string
- lang
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](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
string
- queueRender
Queue a run of the render function. You shouldn't need to call this manually - it should be handled by changes to @property values.
() => void
- setAttribute
(name: string, value: string) => void
- target
Specifies where to display the linked URL.
"auto" | AnyString | "_blank" | "_self" | "_parent" | "_top"
- tone
Sets the tone of the Link, based on the intention of the information being conveyed.
"critical" | "auto" | "neutral"
declare class Link extends Link_base implements LinkProps {
accessor tone: LinkProps['tone'];
accessor accessibilityLabel: LinkProps['accessibilityLabel'];
accessor href: LinkProps['href'];
accessor target: LinkProps['target'];
accessor download: LinkProps['download'];
accessor lang: LinkProps['lang'];
constructor();
}
AnyString
Prevents widening string literal types in a union to `string`.
string & {}
ClickOptions
- sourceEvent
The event you want to influence the synthetic click.
ActivationEventEsque
export interface ClickOptions {
/**
* The event you want to influence the synthetic click.
*/
sourceEvent?: ActivationEventEsque;
}
ActivationEventEsque
- button
number
- ctrlKey
boolean
- metaKey
boolean
- shiftKey
boolean
export interface ActivationEventEsque {
shiftKey: boolean;
metaKey: boolean;
ctrlKey: boolean;
button: number;
}
Anchor to eventsEvents
Learn more about registering events.
- Anchor to clickclickCallbackEventListener<typeof tagName> | null
LinkEvents
- click
CallbackEventListener<typeof tagName> | null
export interface LinkEvents {
click: CallbackEventListener<typeof tagName> | null = null;
}
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | null
CallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}
Code
examples
Code
<s-link href="#beep">fufilling orders</s-link>
<!DOCTYPE html><html><head><style>html, body {height:100%} body {box-sizing: border-box; margin: 0; padding:0.5rem; display: grid; place-items: center; gap: 0.5rem;}</style><script src="https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js"></script></head><body><s-link href="#beep">fufilling orders</s-link> </body></html>