Classes added to the wrapped button element.
The id of the wrapped button element.
The aria-label of the wrapped button.
The role of the he wrapped button element.
The tabindex of the wrapped button element.
If true, the user cannot interact with the button.
Saves the current "tabindex" and sets it to "-1". When turned on again, the saved "tabindex" is restored.
ID of a form element with which the button is connected.
Sets the style to show no outline on focus.
Sets "aria-selected" for the wrapped button element.
On default, the component is not showing a hylo-accessibility-focus border when it gains focus by click, only when tabbed into it. This proprerty disables the default.
Stops the propagation of the "click" event if "hyloButtonClick" is fired.
The type of the button. "pseudo" and "hidden" create a div element with the class "hylo-button". All other types will create a button element.
"hidden" does set the "role" to "none".
If a hylo-button component is used inside a hylo-accessibility-button, use the type "pseudo" if possible.
The button got clicked. Emits the original mouse event.
Fires when the component gains or looses focus through the "tab" key. The component also toggles the class "hylo-has-focus".
The emitted boolean value indicates whether the component gained or lost the focus.
Fires when the component is or looses active through a key action. The component also toggles the class "hylo-has-keyactive".
The emitted boolean value indicates whether the component gained or lost the active state.
Fires when the component gains or looses "mouseover". The component also toggles the class "hylo-has-mouseover". Does not fire when the "mouseover" was gained through a touch event.
The emitted boolean value indicates whether the component gained or lost "mouseover".
The component got loaded.
The component got updated.
Generated using TypeDoc
A button component.
Toggles the classes "hylo-has-mouseover", "hylo-has-focus" and "hylo-has-keyactive".
If you place text and an element which is serving as an icon inside the button, the text needs to be enclosed by an element (preferable a "span" element) and any icon element other than the "hylo-icon"-element itself needs to be enclosed by an element (preferable a "span" element) with the css class "hylo-icon" to have the padding applied correctly. This is not necessary if you just add an icon element without any additional text.
You can place the text of the button in "span" elements with the classes "hylo-content", "hylo-content-active", "hylo-content-hover", "hylo-content-focus" or "hylo-content-disabled" to provide different text for different states of the button.
You can force the state styles of the component by applying the classes "hylo-focus", "hylo-hover", "hylo-active", "hylo-disabled" respectively.