Link

<oblyx-link> renders a plain, styled <a>. It carries no router indirection and no client-side interaction logic: render() is a pure function of its attributes, so a server-rendered <oblyx-link> works correctly the instant it upgrades, with no event listener attached anywhere. For a button-styled trigger with no navigation destination, reach for <oblyx-button variant="ghost"> instead:oblyx-link stays exactly one thing, a link.

Basic link

Read the docs

HTML

Kotlin

<oblyx-link href="/docs/">Read the docs</oblyx-link>

oblyxLink(href = "/docs/") { +"Read the docs" }

Colors

Four text-color variants. accent is the default; inherit takes the surrounding text color instead of a link color, for a link that should blend into a paragraph.

Link colors

Primary

Secondary

Accent

Inherit

HTML

Kotlin

<oblyx-link href="/docs/" color="primary">Primary</oblyx-link>
<oblyx-link href="/docs/" color="secondary">Secondary</oblyx-link>
<oblyx-link href="/docs/" color="accent">Accent</oblyx-link>
<oblyx-link href="/docs/" color="inherit">Inherit</oblyx-link>

oblyxLink(href = "/docs/", color = OblyxLinkColor.PRIMARY) { +"Primary" }
oblyxLink(href = "/docs/", color = OblyxLinkColor.SECONDARY) { +"Secondary" }
oblyxLink(href = "/docs/", color = OblyxLinkColor.ACCENT) { +"Accent" }
oblyxLink(href = "/docs/", color = OblyxLinkColor.INHERIT) { +"Inherit" }

Underline

Links underline on hover by default. Set underline for an always-on underline, for a link that needs to stand out from surrounding text at rest.

Always-underlined link

Always underlined

HTML

Kotlin

<oblyx-link href="/docs/" underline>Always underlined</oblyx-link>

oblyxLink(href = "/docs/", underline = true) { +"Always underlined" }

Disabled

disabled omits href from the rendered <a> entirely, rather than keeping it and relying on aria-disabled or a CSS class alone. An <a> with no href is not a tab stop and has no default action, natively, with no JavaScript required to make that true. A disabled link this component renders is genuinely inert, not just styled to look that way.aria-disabled="true" is still set, so the disabled state is announced to assistive tech rather than passing by unexplained.

Disabled link

Read the docs

HTML

Kotlin

<oblyx-link href="/docs/" disabled>Read the docs</oblyx-link>

oblyxLink(href = "/docs/", disabled = true) { +"Read the docs" }

External links

Set external for a link that leaves the site: it adds a visible arrow icon and screen-reader-only "(opens in a new tab)" text, and forces target="_blank" rel="noopener noreferrer", merged into (not replacing) any rel tokens already set.

External link

Example.com

HTML

Kotlin

<oblyx-link href="https://example.com" external>Example.com</oblyx-link>

oblyxLink(href = "https://example.com", external = true) { +"Example.com" }

Reference

`<oblyx-link>`

Attribute	Type	Default	Description
`href`	`string \| undefined`	–	Link destination. Omitted from the rendered `<a>` when `disabled`.
`target`	`string \| undefined`	–	HTML `target`. Overridden to `_blank` when `external` is set, regardless of any value given here.
`rel`	`string \| undefined`	–	HTML `rel`. Merged with (not replaced by) `noopener noreferrer` when `external` is set.
`label`	`string \| undefined`	–	Accessible name override. Set it only when the link's own content isn't self-descriptive; omitted (the default) so an accessible-name-from-content link isn't overridden for no reason.
`color`	`primarysecondaryaccentinherit`	`accent`	Text color / hover-tint variant.
`underline`	`boolean`	`false`	Always-on underline instead of hover-only.
`disabled`	`boolean`	`false`	Disabled state. Renders as non-interactive text instead of a link.
`external`	`boolean`	`false`	External-link affordance: visible arrow icon, SR-only "(opens in new tab)" text, and forced `target="_blank" rel="noopener noreferrer"`.