Page Comparison

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:

...

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/

<submit
  label="button.edit"
  icon="pencil"
  tooltip="button.edit" 
  action="submitDummy">
  <variant function="ButtonDemo:getButtonVariantWarning"/>
</submit>

Icon and text

Image Removed

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

...

<submit
  label="button_examples.label.SMS"
  prependIcon="arrow-right" 
  tooltip="button_examples.tooltip" 
  action="submitDummy">
</submit>

<submit
  label="button_examples.label"
  icon="phone" 
  appendIcon="arrow-right" 
  tooltip="button_examples.tooltip" 
  action="submitDummy">
</submit>