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

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

Variations

Over Background

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

Quiet

<sp-link quiet>This is a quiet link</sp-link>
CopyCopied 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.

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

Last updated 8/10/2021

Was this helpful?

Yes

No