Components
Copy / open link
Copy / open link
URL with twin affordances — Copy on the left, Open-in-new-tab on the right. The Copy icon flashes to a check tick for ~1.5 seconds after a successful copy. Use for referral / quote / discount links shown inside cards or modals.
Canonical
<koala-copy-open-link href="@Model.ReferralUrl" />
Visible text is the URL itself, rendered in a monospace <code>
block with user-select: all so a single click selects the whole URL.
Variants
2 variants<koala-copy-open-link href="@Model.QuoteUrl" label="View quote" />Props
3 attributes| Attribute | Values | Notes |
|---|---|---|
| href | string | Required. The URL to copy and link. |
| label | string? | Optional human label. When omitted, the href is shown as monospace code. |
| class | string? | Extra classes on the outer wrapper. |
Copy button
A bare copy-to-clipboard icon button with a self-contained copied-state swap (Copy → a success Check for ~1.5s). It owns its own Alpine scope, so it needs no host x-data flag — drop it beside any value the user might copy (referral codes, DNS host/value).
KOALA-2026-XYZ
| Attribute | Values | Notes |
|---|---|---|
| value | string | Required. The text written to the clipboard. |
| label | string | Accessible label; flips to "Copied" during the confirmation window. Default "Copy". |
| color | IconButtonColor | Icon-button colour. Default Neutral. |
| size | IconSize | Icon size. Default Default. |
Do & don't
Do
Show the full URL when the user might need to share it verbatim (referral / quote links). Monospace +
user-select: all makes manual copying painless too.
Don't
Don't paste a URL into a plain button. It reads as a clickable action with no obvious way to copy — the dedicated affordances do both.