Writes a value to the clipboard and confirms the result in place with a check and an announcement.
<tp-copy-button>
Copy button
Default density
Compact density
Restart from the initial state
Show the copyable source
<tp-field label="API key" description="Use this key from server code only." style="inline-size:100%;max-inline-size:24rem;margin-inline:auto">
<tp-input-group>
<tp-input readonly default-value="tp_live_4f2c9e1b7a"></tp-input>
<tp-copy-button slot="action" value="tp_live_4f2c9e1b7a" label="Copy API key"></tp-copy-button>
</tp-input-group>
</tp-field>
Usage
Set value to the exact text to copy. After a click the icon turns into a check, the accessible name becomes copied-label for duration milliseconds, and the result is announced politely. The control composes a Button, so focus, disabled and keyboard behavior are the Button’s.
Labels
Icon-only is the default, with label as the accessible name; make it specific, such as “Copy invite link”, so it makes sense out of context. show-label renders the label as text, and the copied message replaces it while confirmed.
Visible label
Default density
Compact density
Restart from the initial state
Show the copyable source
The copy action in a Code block is this same control, labelled by the block’s copy, copied and copyFailed messages.
In a Code block
Default density
Compact density
Restart from the initial state
Show the copyable source
import { TpCopyButton } from '@tweakpad/ui';
import { TpCopyButton } from '@tweakpad/ui';
<tp-code-block language="ts" label="install.ts">import { TpCopyButton } from '@tweakpad/ui';</tp-code-block>
Events
tp-copy fires before the write and can be canceled to skip it. tp-copied and tp-copy-error report the outcome; both are already announced, so use them for analytics or follow-up UI rather than duplicate messages.
Copy events
Default density
Compact density
Restart from the initial state
Show the copyable source
The Clipboard API is used where available, with a selection-based fallback; success is reported only after the write succeeds. copy() runs the same sequence from code and resolves to whether it worked.
Copying more than text
data is a function that receives value and returns further representations keyed by media type, each a string, a Blob or a promise of either. They are written with value as text/plain in one clipboard item, so a paste target picks the type it understands: an image editor takes the picture and a text field takes the text. The function runs during the click, so return pending work as promises instead of awaiting it; browsers that tie clipboard access to the click (Safari) reject a write that starts later.
Types the browser cannot write are left out. When the browser refuses the item, the text alone is copied and tp-copied reports types: ['text/plain']. QR code uses this to copy its image together with its value.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionvaluevaluestring''The exact text to copy.labellabelstring'Copy'The accessible name, or the visible text with show-label; make it specific, such as "Copy
invite link", so it makes sense out of context.copied-labelcopiedLabelstring'Copied'The name and announcement after a successful copy, shown for duration.failed-labelfailedLabelstring'Copy failed'The announcement when the browser refuses the clipboard write.show-labelshowLabelbooleanfalseShows the label as text beside the Icon instead of an Icon-only button.variantvariantCopyButtonVariant'ghost'The paint of the composed Button: ghost beside inline values, outline or secondary when
copying is the main action.sizesizeCopyButtonSize'sm'The size of the composed Button; Icon-only buttons take the square size of the same height.durationdurationnumber2000How long, in milliseconds, the check and the copied message stay before the button returns to
its resting state.
Properties
PropertyTypeDefaultDescriptiondataCopyDataProvider | nullnullFurther representations written with value in one clipboard item; null copies text.copiedread-onlyboolean—True while the check Icon and the copied message are shown.groupBoundaryread-onlyElement | null—The composed Button is the boundary a joined group seams.
Events
EventTypeDescriptiontp-copyCustomEvent<CopyDetail>Cancelable, before writing; detail.value.tp-copiedCustomEvent<CopyResultDetail>After a successful write; detail.value and the written detail.types.tp-copy-errorCustomEvent<CopyResultDetail>After a failed write; detail.value and empty detail.types.
Methods
MethodReturnsDescriptioncopy(sourceEvent?)Promise<boolean>Writes value (and data) and resolves to whether the clipboard accepted it.focus(options?)voidMoves focus to the composed Button.
Related
Components, widgets and patterns that use this one.