Link

A text link, an enhanced native <a>.

Types

Link types

Default linkPrimary linkSuccess linkWarning linkDanger linkInfo link

Example

Color

The color attribute accepts 11 preset names (auto-adapting to light/dark themes) or any CSS color value (takes effect immediately, overriding the type semantic color). Custom color values are rendered as-is — make sure the text contrast meets WCAG AA (4.5:1).

Preset palette

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

Example

Custom color values (override type)

Teal linkPurple overriding primary

Example

Underline

underline three modes: hover (default, appears on hover) / always (persistent) / never (none). Compat shorthands: bare underline or underline="true" = always, underline="false" = never.

Underline offset and color are customizable via CSS variables: --oas-link-underline-offset (default 2px), --oas-link-underline-color (default follows text color).

Underline modes

hover (default, on hover)alwaysneveroffset 4px + red underline

Example

Icon

The icon attribute adds an icon (name from the registry); icon-position="start|end" controls placement:

Links with icons

Search docsView details

Example

External

external auto-adds target="_blank" + rel="noopener noreferrer" + an external-link icon:

External link

External docs

Example

Disabled & new window

Disabled & target

Disabled linkOpen in new window

Example

Font size

The size attribute has three tiers: small (auxiliary small text) / medium (default) / large (title-like large text). Font sizes go through the --oas-font-size-* tokens.

Font size tiers

Auxiliary small linkmedium (default)Title-like large link

Example

Download

download is passed through to the native <a download>: with a bare download the browser uses the original filename, with a value it sets a custom filename (when combined with target="_blank" browsers ignore download).

Download links

Download guide (original filename)Download guide (custom filename)

Example

Loading

loading enters the loading state: the leading icon is replaced by a spinner (one is added automatically when there is no icon) and clicks are blocked (no oas-click is dispatched, no navigation) — suited for click-then-async navigation/submit flows; aria-busy is kept in sync.

Loading

Loading (spinner added automatically)Searching (leading icon replaced)

Example

Events

Click event

Click link

Example

Clicking dispatches the oas-click CustomEvent; detail.originalEvent is the native MouseEvent.

API

Attributes

Attribute	Description	Type	Default
color	Color: accepts 11 preset names (mapped to --oas-preset-*-text compliant tokens) or any CSS color value, overriding the type semantic color	string	—
disabled	Disabled	boolean	—
download	Passthrough download attribute (native <a download> file download)	string	—
external	External link: automatically adds target="_blank", rel="noopener noreferrer", and an external-link icon	boolean	—
href	Link URL	string	—
icon	Icon name (from the oas-icon set), placed before or after the text (see icon-position)	string	—
icon-position	Icon position: start (default, before the text) / end (after the text); defaults to end for the external icon only	—	—
loading	Loading state: spinner replaces the leading icon and blocks clicks (async navigation/submit on click)	boolean	—
size	Font size step: small/medium (default)/large	string	—
target	Open behavior	string	—
type	Type	LinkType	default
underline	Underline	string	—

Events

Event	Description
oas-click	Click, detail: { originalEvent }

Slots

Name	Description
default	—