Copy button
The Copy button allows you to copy the desired content to the clipboard with one click. Supported elements are input, textarea, wje-input, wje-label and a element.
Basic usage
This example shows the copy button in its simplest form: a button that copies a prepared value without extra surrounding logic.
Custom label
Adding the label and label-success properties will change the tooltip text after copying the value.
Element
This example copies text from a regular DOM element. It is useful when the source value is not an input but, for example, static code or an identifier.
Input
This example copies the current value from a native input element, which is the most common form-related scenario.
WJE-Input
This example does the same for wje-input, connecting the copy button directly to the value of the WebJET input component.
Hyperlink
This example copies a value from a hyperlink, which is useful for share URLs or links to external resources.
When to use
Use wje-copy-button when users need to enter values, choose options, or trigger form-related actions.
When not to use
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Accessibility
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
Best Practices
- Keep validation rules and error behavior consistent across the entire form.
- Show loading or disabled states during async operations.
- Split complex forms into smaller sections with immediate feedback.
Attributes and Properties
for
| Description | The id of the element to copy content from. |
| Attribute | for |
| Type | string |
| Default | - |
value
| Description | The text to be copied. |
| Attribute | value |
| Type | string |
| Default | - |
Events
| Name | Description |
|---|---|
wje-copy-button:click | Emitted when the component is clicked. |
Methods
copy
| Description | Copies the specified text or node. |
| Signature | (button: HTMLElement) => void |
CSS Shadow Parts
| Name | Description |
|---|---|
button | Styles the button element. |
CSS Custom Properties
| Name | Description |
|---|---|
--text-color | Controls the color of the text. |
--background-color | Controls the background color of the button. |
Slots
| Name | Description |
|---|---|
default | This is a default/unnamed slot. |