Overview

The @labirthermal/webcomponents comes with a set of standardised UI elements. These elements are independent of the hierarchy and can be used anywhere in the DOM tree.

These UI elements are mostly used internally - in context consumer elements, but you can use them for your own purposes.

See Icons for the built-in icon catalog and icon presentation attributes, and Styling and CSS variables for theming.

For a complete HTML document showing script loading and click listener registration, see the standalone button example.

Overview

HTML tag	Preview	Exmples
thermal-btn	A button	LargeSmallDisabledWith a tooltip
thermal-btn-group	A buttonAnother one	A buttonAnother one
thermal-dropdown	An optionAnother option	A custom label and tooltipAn optionAnother option
thermal-dialog	A dialog trigger Some content	A customised dialogue trigger The trigger of the dialog can be customised. An actionAny HTMLelement can be used as trigger This dialog was triggered by a custom invoker - an a element. An action
thermal-app	A slotted element This is a very powerful element that can be used to build complex interfaces.

Building complex interfaces

In combination with the context providers, UI elements can help you build complex interfaces.

Below is an example of a complex application displaying one file: