shadow
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.
Adding the label and label-success properties will change the tooltip text after copying the value.
Use wje-copy-button when users need to enter values, choose options, or trigger form-related actions.
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
- 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.
| Description | The id of the element to copy content from. |
| Attribute | for |
| Type | string |
| Default | - |
| Description | The text to be copied. |
| Attribute | value |
| Type | string |
| Default | - |
| Name | Description |
|---|
wje-copy-button:click | Emitted when the component is clicked. |
| Description | Copies the specified text or node. |
| Signature | (button: HTMLElement) => void |
| Description | Copies the target content. |
| Signature | (content: HTMLElement) => Promise |
| Name | Description |
|---|
button | Styles the button element. |
| Name | Description |
|---|
--text-color | Controls the color of the text. |
--background-color | Controls the background color of the button. |
| Name | Description |
|---|
default | This is a default/unnamed slot. |