sp-link

Since: UXP v4.1

Renders a link, that when clicked can launch a webpage in the user's default browser.

See:

• https://spectrum.adobe.com/page/link/
• https://opensource.adobe.com/spectrum-web-components/components/link

Example

Copy
<sp-link href="https://adobe.com">Adobe</sp-link>
Copied to your clipboard
<sp-link href="https://adobe.com">Adobe</sp-link>

Variations

Over Background

Copy
<sp-link variant="overBackground">This link has more contrast, suitable for rendering over a colored background.</sp-link>
Copied to your clipboard
<sp-link variant="overBackground">This link has more contrast, suitable for rendering over a colored background.</sp-link>

Quiet

Copy
<sp-link quiet>This is a quiet link</sp-link>
Copied to your clipboard
<sp-link quiet>This is a quiet link</sp-link>

Responding to events

You can respond to a click on the link using the click event. However, you cannot prevent the navigation to the URL specified by href. If the href attribute is not specified, no browser will be launched.

Copy
document.querySelector(".yourLink").addEventListener("click", evt => {
    console.log("You clicked a link");
})
Copied to your clipboard
document.querySelector(".yourLink").addEventListener("click", evt => {
    console.log("You clicked a link");
})