Holo Link

The <holo-link> component wraps a native <a> element with design-system styling. When target="_blank" is set, it automatically adds rel="noopener noreferrer" to protect against tab-nabbing.

When to use

Use it for:

• Navigating to another page, a section of the page (#id) or an external resource.
• Inline references within running text (default variant).

Don’t use it for:

• Triggering an action on the current page. Use Button.
• Page-level navigation menus. Wrap links in your own <nav>.
• Dropdown actions. Use Menu.

Live Previews

Default variant

Learn more

<holo-link href="https://example.com">Learn more</holo-link>

Subtle variant

Subtle link

<holo-link href="https://example.com" variant="subtle">Subtle link</holo-link>

External link (new tab)

Opens in a new tab

<!-- rel="noopener noreferrer" is added automatically -->
<holo-link href="https://example.com" target="_blank">Opens in a new tab</holo-link>

Accessibility

The component renders a native <a href>, so it has the link role, is in the tab order and works with the browser’s context menu and history. Its name is the slotted text. With target="_blank" it adds rel="noopener noreferrer". The default variant is underlined. The subtle variant removes the underline until hover and uses text-secondary.

Key	Action
Tab	Moves focus to or from the link
Enter	Follows the link

• The focus ring is a 2px outline with a 2px offset on the inner link, shown with :focus-visible.

You provide:

• Link text that makes sense out of context (“Read the migration guide”, not “here”).
• A warning in the text when a link opens a new tab or window. The component does not announce it.
• Use subtle only where links are clear from context (navigation, footers). In running text it is distinguished from surrounding words by colour alone.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-link';

Properties

Property	Attribute	Type	Default	Description
href (required)	href	string	—	The URL the link points to.
target	target	string	—	The browsing context to open the link in (e.g. "_blank", "_self").
variant	variant	"default" | "subtle"	'default'	The visual style variant of the link.

Slots

Slot	Description
(default)	The link's visible text or content.

CSS custom properties

Property	Description
--holo-link-color	Text color of the default variant, and hover color of the subtle variant.
--holo-link-color-hover	Text color of the default variant on hover.
--holo-link-subtle-color	Text color of the subtle variant.