Components Links

Links

One link helper, four variants — Body, Subtle, Rail, Emphasis. External links auto-add the new-tab icon and rel="noopener noreferrer". Replaces ~50 hand-rolled anchor signatures scattered across detail pages.

<koala-link>

Canonical

Open the quote

<koala-link href="@quoteUrl">Open the quote</koala-link>

Default body variant — underline always visible, primary on hover. Uses Alpine-AJAX (x-target.push="main") by default.

Variants

4 variants

View the transaction

Body

Default. Permanent underline, primary on hover.

View the transaction

Subtle

Hover-underline only. Less visual noise inside dense info rows.

12 Lavender Hill, SW11 5RW

Rail

Detail-page right rail. Outline-coloured decoration; thicker on hover.

Open email settings

Emphasis

Brand-primary text, hover-underline. For inline links that should stand out ("Open settings", an org name).

<koala-link href="@url" variant="Body">View the transaction</koala-link>
<koala-link href="@url" variant="Subtle">View the transaction</koala-link>
<koala-link href="@url" variant="Rail">12 Lavender Hill, SW11 5RW</koala-link>

States

3 states

View the transaction

Default

Hover me

Hover

Hover it — Body turns primary; Subtle and Emphasis gain their underline

Tab to me

Focus

Tab to it — the browser focus outline

Hover is the only styled state and each variant carries its own treatment (described on the Variants tiles above): Body recolours to primary, Subtle and Emphasis reveal an underline, Rail thickens its outline-coloured decoration. There's no disabled link — if the destination isn't available, don't render a link.

External

Open in Hoowla

View case in Hoowla

Hoowla docs

<koala-link href="https://hoowla.example" external>Open in Hoowla</koala-link>

external sets target="_blank" + rel="noopener noreferrer" and appends an ArrowUpRight icon automatically.

With leading icon

Edit

Delete

Add another

<koala-link href="@url" icon="@(IconName.Pencil)" variant="Subtle">Edit</koala-link>

With tooltip

Q-AB12CD

Hover for the Tippy popover. aria-describedby + a hidden description span are wired in for screen-reader parity.

Props

7 attributes

Attribute	Values	Notes
href	URL	Required.
variant	Body, Subtle, Rail	Default `Body`.
external	Boolean	Opens in a new tab with the external-link icon.
icon	IconName enum	Leading icon before the link text.
tooltip	String	Tippy tooltip + screen-reader description.
ajax	Boolean	Default true for internal links (`x-target.push="main"`); false for external.
class	Tailwind classes	Merged with the variant's base classes.

Do & don't

Open in Hoowla

Do Pick the variant by context — Body in prose, Subtle in dense info rows, Rail in the detail right rail, Emphasis for brand-coloured inline actions — and mark external destinations with external.

Open email settings

Don't Don't hand-roll text-primary hover:underline anchors — that's the Emphasis variant — and don't reach for a koala-btn when the affordance is a link.