Button

shadow

Buttons are a clickable element that allows you to display text, an icon, or both. Buttons can be easily customized using various attributes and CSS properties.

Basic usage

To use the Button component, include it in the HTML with the required attributes. Adding the disabled attribute makes the button inactive and unclickable.

Tooltip

The tooltip property allows you to display a text description of the button when the mouse is moved over it. To display the text, you need to add a tooltip attribute to the button with the text content. By adding the tooltip-placement attribute it is possible to specify the position of the text display.

Toggle

The toggle property allows you to assign two different states to a button and toggle between them with a click. Setting the value assigns a default state to the button.
To set the available states, you need to add two child elements to the button with a toggle value slot and also with a state property, which determines the actual state value of the button.

Caret

The caret property allows you to display an arrow on the button. To display the arrow, you need to add the caret attribute to the button.

The shape of the button

The round property allows you to adjust the shape of the button. By default, the buttons are rectangular with slightly rounded edges. Adding this attribute will increase the roundness of the button.

Form button

The submit and reset properties allow you to use the button to submit or reset the form. A button with the submit property sends the form that is linked to it. A button with the reset property will reset all form values.

Button filling

The Fill property specifies the background and border fill of the button. By default, the buttons have a solid background. Other options are link and outline.

Button size

The size property specifies the size of the button. Setting this property will change the internal offset of the button.

Button icons

Icons can also be displayed in buttons by inserting the wje-icon element. You modify their location within the button using the slot attribute and the start or end property. If the button contains no text and consists of an icon only, use the icon-only property.

For more information about icons, see Icons.

Accessible name

When a button has no visible text, for example when it only contains an icon, name it with the label attribute. The component forwards this value as the accessible name of its internal native button or a element. The standard aria-label attribute remains supported; when both are set, label takes precedence.

label does not render visible text or a tooltip. To make the description visible on hover as well, set the tooltip attribute separately.

Editing styles

Button colors

The color property adjusts the background and border color of the button. Setting this value will change the button color to one of the colors in the preset color palette. By default, the buttons have a primary background.

Button edge color

The color property can be combined with the fill property.

CSS custom variables

The demonstration focuses on visual tuning. The appearance changes via CSS variables or custom styles without the need to change the HTML structure.

When to use

Use wje-button when you want to solve a given UI problem consistently within the WebJET design system.

When not to use

Do not use a component outside of its responsibility; in an atypical case, prefer to assemble multiple smaller components.

Accessibility

Visible button text usually provides its accessible name automatically. For icon-only buttons, use label or aria-label. The component forwards disabled and toggle states to its internal native control.

Recommended practices

• Prefer API component over manual DOM interventions.
• Stick to design tokens and consistent naming conventions.
• Before deployment, test the component in real data scenarios.

Attributes and properties

active

Popis	Určuje, či je komponent aktívny.
Atribút	active
Typ	boolean
Predvolené	false

ariaLabel

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	aria-label
Typ	any
Predvolené	-

caret

Popis	Určuje, či je voľba caret zapnutá a ovplyvňuje správanie komponentu.
Atribút	caret
Typ	boolean
Predvolené	false

color

Popis	Nastavuje farbu komponentu.
Atribút	color
Typ	string｜string
Predvolené	default

customEvent

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

dialog

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

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	false

fill

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

href

Popis	Nastavuje cieľovú URL, keď komponent funguje ako odkaz.
Atribút	href
Typ	any
Predvolené	-

label

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

outline

Popis	Určuje, či je voľba outline zapnutá a ovplyvňuje správanie komponentu.
Atribút	outline
Typ	boolean
Predvolené	false

round

Popis	Určuje, či je voľba round zapnutá a ovplyvňuje správanie komponentu.
Atribút	round
Typ	boolean
Predvolené	false

stopPropagation

Popis	Určuje, či je voľba stop-propagation zapnutá a ovplyvňuje správanie komponentu.
Atribút	stop-propagation
Typ	boolean
Predvolené	-

toggle

Popis	Riadi správanie voľby toggle v komponente.
Atribút	toggle
Typ	any
Predvolené	-

tooltip

Popis	Určuje, či je voľba tooltip zapnutá a ovplyvňuje správanie komponentu.
Atribút	tooltip
Typ	boolean
Predvolené	false

value

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

Events

Názov	Popis
wje-button:click	Vyvolá sa pri kliknutí na tlačidlo.
wje-button:toggle	Vyvolá sa pri prepnutí aktívneho stavu prepínacieho tlačidla.
wje-button:submit	Vyvolá sa pri spustení odoslania formulára tlačidlom.
wje-button:reset	Vyvolá sa pri spustení resetu formulára tlačidlom.

Methods

formAssociatedCallback

Popis	Synchronizuje komponent so životným cyklom formulára pri zmene kontextu formulára.
Signatúra	(form: HTMLFormElement) => void

formDisabledCallback

Popis	Aktualizuje stav deaktivácie komponentu pri zmene stavu nadradeného formulára.
Signatúra	(disabled: boolean) => void

syncToggleState

Popis	Synchronizuje toggle state s externým alebo interným zdrojom stavu.
Signatúra	() => void

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS custom variables

Názov	Popis
--wje-button-background-color	Vlastná CSS premenná, ktorá riadi background color.
--wje-button-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-button-color	Vlastná CSS premenná, ktorá riadi color.
--wje-button-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-button-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-button-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-button-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-button-margin-inline	Vlastná CSS premenná, ktorá riadi margin inline.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
icon	Slot pre obsah ikony.
icon-only	Slot pre vlastný obsah icon-only v komponente.
caret	Slot pre obsah caret ikony.
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.
toggle	Slot pre obsah prepínača.