Content Comparison

Users can use buttons to perform any actions e.g save, preview, cancel. Buttons used in a layout

StepsButton can be used in the layout to perform the specific action by binding with it.

Steps to configure:

1. Goto component section

...

2. Search and select the button component in the component section

...

Configurations of a button component

• Label: To display on

...

• UI

• Name:

...

• This is the unique identifier of the component in the layout

• Variant: The button comes in five variants:

...

• The neutral button: To make the button simple use the neutral button variant

• Brand button Has more emphasis, as they use a color fill and shadow.

  • Neutral

  • Brand

  • Outline-brand

  button: Is used for more emphasis than neutral buttons, these buttons do not have an outer border

  • Destructive

  button:Indicates that the user should carefully decide whether to tap or click the button.

  • Success

  button: indicates a successful or positive action. it has a green color style.

...

4. Option: The user can give row action to a button using the option

...

...

• Left Icon Name: Display the icon on the left side of the button

...

• Right Icon Name: Display the icon on the right side of the button