Hyperlink

The <auro-hyperlink> element is an accessible link that wraps a standard <a> anchor element. It adds brand styling for light and dark backgrounds, blocks addresses that could run code, and shows an icon when a link opens in a new tab.

Use cases

Use <auro-hyperlink> in these situations:

• Use a stand-alone link to take people to another page.
• Use an inline link inside a sentence or paragraph to take people to another page.
• Use role="button" when you need link styling for an action, such as opening a dialog. Pressing Enter or Space does not currently fire click, so keyboard users can't activate it unless you handle those keys too.

Install

$ npm i @aurodesignsystem/auro-hyperlink

Define dependency in project

Import the component in each project that uses <auro-hyperlink>.

import "@aurodesignsystem/auro-hyperlink";

Use CDN

If your project can't process JS assets, use the pre-processed assets. Legacy browsers, such as IE11, aren't supported.

<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm"></script>

Basic example

<auro-hyperlink>No href supplied</auro-hyperlink><br>
Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.

Custom component registration for version management

Every Auro component has two key parts: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.

Installing the component as described in the Install section imports the class and registers the component globally for you.

However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), register the class manually under a custom element name to avoid conflicts.

To do this, import only the component class and call the register(name) method with a unique name:

// Import the class only
import { AuroHyperlink } from '@aurodesignsystem/auro-hyperlink/class';

// Register with a custom name if desired
AuroHyperlink.register('custom-hyperlink');

This creates a new custom element <custom-hyperlink> that behaves exactly like <auro-hyperlink>, allowing both to coexist on the same page without interfering with each other.

<custom-hyperlink>No href supplied</custom-hyperlink><br>
Welcome to <custom-hyperlink href="https://www.alaskaair.com">Alaska Airlines</custom-hyperlink>.