Component API

<copy-link-button>

Open live example

Small icon button that copies value to the clipboard and shows a toast
on success/failure (if a <toast-notification> element is present), and
always dispatches a copy-success/copy-error CustomEvent so consumers
without a toast element can react. Defaults to the current page URL if
value is unset.

Install

import "@f-ewald/components/copy-link-button.js";

Usage

<copy-link-button value="https://example.com/listing/42" label="Copy listing link"></copy-link-button>

Attributes / properties

PropertyAttributeTypeDefaultDescription
valuevaluestring""Text to copy. Defaults to window.location.href at click time.
labellabelstring"Copy link"Accessible label / tooltip text.
disableddisabledbooleanfalseDisables clipboard copying.

Events

EventDescription
copy-successThe value was copied to the clipboard.
copy-errorCopying to the clipboard failed.

Slots

None.

CSS custom properties

Custom property
--ui-focus-ring
--ui-radius-sm
--ui-surface-muted
--ui-text
--ui-text-muted