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.
Canonical
<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
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>External
<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
<koala-link href="@url" icon="@(IconName.Pencil)" variant="Subtle">Edit</koala-link>With tooltip
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. |