Button colours and icons

1 Description
2 Example
3 Background colour
4 Icon
5 Icon and text

Description

Button look and feel can be changed on the DSL. The following atributes can be changed:

Text can be replaces by an icon
An icon can be added in front of the text
An icon can be added after the text
The button’s color can be changed

Example

View XML

<submit  
  label="button_examples.label"  
  prependIcon="image" 
  appendIcon="chevron-down" 
  tooltip="button_examples.tooltip"   
  action="submitDummy"></submit>

Background colour

The buttons colour can be set to a DSL enum value. The values are:

Tonal,Error, Warning, Info, Default

View XML

<submit
  label="button_examples.label"
  tooltip="button_examples.tooltip" 
  action="submitDummy">
  <variant function="ButtonDemo:getButtonVariantTonal"/>
</submit>

Backing Unit

DSL_BUTTON_VARIANT getButtonVariantTonal() {
  return DSL_BUTTON_VARIANT.Tonal;
}

Icon

If the button has an icon it will replace the label and become a round button. You can add the label as a tooltip to the button allowing the button to still be read on hover. The icons that is used can be found in this library: https://pictogrammers.com/library/mdil/

Icon and text

You can combine icons with text and/or other icons to for hybrid buttons.