The DefaultButton component is your basic button. It can have a text and an icon, and both are optional (although having one or the other is important).

Creating buttons

A button can be created as follows:

add(new DefaultButton("Click me", FaIcon.faHeart, b ->, "Hi, I was clicked!")));

Rendering and styles

The DefaultButton component renders the following structure when both text and icon are present:

<button class="ui-button" type="button>
  <span class="ui-icon">
    <span class="fa fa-heart />
  <span class="ui-btntext">Click me</span>

The button class' rendering was modeled after Bulma's buttons, and the code and styling of the scss steals a lot from there:

Style sheets and remarks

The styles for the buttons have been stolen from Bulma, mostly. But some fixes were done with mixed results: