Copy Button

Copy a URL, token, or other value in one click. The canonical pattern nests the button inside an input’s trailing slot so the action sits within the field.

Basic Usage

Place <CopyButton slot="end"> inside <Input> (or another control with an end adornment). Long values stay in the field’s remaining width instead of painting under the button.

Variants

In-control copy uses a compact glyph treatment. Standalone buttons still accept the usual button variants for toolbars and other controls outside a field.

API

Slots

Name	Description
icon	Custom copy icon. The component supplies a copy icon by default.

Props

Name	Description
ariaLabel	Accessible name shown while the copy action is available. Type string Default Copy
copiedLabel	Accessible name shown briefly after copying succeeds. Type string Default Copied
disabled	Type boolean Default false
from	Element id to copy from — from="el[attr]" or from="el.value". Takes precedence over value when set. Type string
value	Type string
variant	Type PkButtonVariant Default transparent

Events

Name	Description
onPkCopy	Emitted when text is copied successfully
onPkCopyError	Emitted when copying fails
onValueToCopy	Type PkCopyEvent

CSS Custom Properties

Name	Description
--pk-copy-button-background	Trigger background override.
--pk-copy-button-border-color	Trigger border colour override.
--pk-copy-button-color	Trigger foreground colour override.
--pk-copy-button-hover-background	Trigger hover background override.
--pk-copy-button-hover-border-color	Trigger hover border colour override.
--pk-copy-button-hover-color	Trigger hover foreground colour override.
--pk-copy-button-radius	Trigger corner radius override.

CSS Parts

Name	Description	CSS selector
button	Trigger button	::part(button)
copy-icon	Copy icon shown before copying	::part(copy-icon)
success-icon	Success icon shown after copying	::part(success-icon)

Dependencies

This component registers the following elements when it loads.

Name	Description
pk-button	—