Copy button

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.

Basic usage

The sample shows a copy button in its simplest form, i.e. as a button that copies a prepared value without any additional logic around it. The tooltip is not shown automatically; enable it with the tooltip attribute.

Custom label

The tooltip is rendered only when the tooltip attribute is present. The label attribute provides an accessible label and is also used as fallback tooltip text when tooltip is present without a custom value. The label-success attribute changes the tooltip text after a successful copy.

Element

The sample copies text from a regular DOM element. It is useful when the source value is not an input but, for example, a static code or identifier.

Input

The sample copies the actual value from the classic input, so you can see a common form scenario.

WJE-Input

The sample does the same for wje-input, i.e. it links the copy button directly to the value of the WebJET input component.

Hyperlink

The preview copies the value from the link, which is useful, for example, for share URLs or links to external resources.

When to use

Use the wje-copy-button when the user enters a value, selects options, or performs an action on a form.

When not to use

Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.

Accessibility

Always link the component to a description (label/aria-label) and keep keyboard control. The label attribute does not show a visual tooltip by itself; add the tooltip attribute when you want to display one.

Recommended practices

• Keep validation rules and error states consistent across the entire form.
• For asynchronous operations, display the load status or disabled status.
• For complex forms, prefer smaller sections and immediate feedback.

Attributes and properties

for

Popis	Nastavuje textovú hodnotu uloženú vo voľbe for.
Atribút	for
Typ	string
Predvolené	-

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	string
Predvolené	-

labelSuccess

Popis	Nastavuje zobrazovaný text pre voľbu label-success.
Atribút	label-success
Typ	string
Predvolené	-

tooltip

Popis	Nastavuje textovú hodnotu uloženú vo voľbe tooltip.
Atribút	tooltip
Typ	string
Predvolené	-

value

Popis	Nastavuje aktuálnu hodnotu komponentu.
Atribút	value
Typ	string
Predvolené	-

Events

Názov	Popis
wje-copy-button:click	Vyvolá sa pri kliknutí na komponent.

Methods

copy

Popis	Spustí metódu copy na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(button: HTMLElement) => void

CSS shadow parts

Názov	Popis
button	Štýluje shadow časť button.

CSS custom variables

Názov	Popis
--text-color	Vlastná CSS premenná, ktorá riadi text color.
--background-color	Vlastná CSS premenná, ktorá riadi background color.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.