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.

<koala-copy-open-link>

Canonical

https://www.koala.legal/q/example

<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

https://www.koala.legal/q/example

URL only

href

View quote

Custom label

href + label

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

Do & don't

https://www.koala.legal/q/example

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.