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.
Live Previews
Section titled “Live Previews”Default variant
Section titled “Default variant”<holo-link href="https://example.com">Learn more</holo-link>Subtle variant
Section titled “Subtle variant”Subtle link
<holo-link href="https://example.com" variant="subtle">Subtle link</holo-link>External link (new tab)
Section titled “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>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| --------- | --------- | ----------------------------------------- | ----------------------- | ----------- |
| href | href | The URL the link points to. | string | undefined |
| target | target | The browsing context to open the link in. | string | undefined |
| variant | variant | The visual style variant of the link. | "default" \| "subtle" | "default" |
| Slot Name | Description | | --------- | -------------------------------- | | (default) | The link’s visible text/content. |