Components Links

Links

One link helper, three variants — Body, Subtle, Rail. 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

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

Variants 3 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.

External

Open in Hoowla

View case in Hoowla

Hoowla docs

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

With leading icon

Edit

Delete

Add another

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.