Overview

• Buttons are clickable items used to perform an action

• Button event invokes workflow associated with it, which actually performs actions such as save, new, cancel, etc

Attributes

Label

• The label is a short description displayed on the button.

Variants

• Allows to show Buttons in different color formats

• The Button component comes in five variants

  • Neutral: Neutral is the default variant of the Button which is displayed in white color

  • Brand: Brand is a blue Button, used to draw attention to the primary action on a page

  • Outline-brand: Outline-brand is similar to the brand variant but the color is used for the label and border only, not the Button color

  • Destructive: Destructive is a red Button used to warn that the action has a negative effect

  • Success: Success is a green Button used to indicate a successful action

Left Icon

• Displays the icon on the left side of the Button Label

• You can also remove the icon by clickng on “x“ which appears on the icon

Right Icon

• Displays the icon on the right side of the Button Label

• You can also remove the icon by clickng on “x“ which appears on the icon

Click Action

• You can perform a click action on the Button

• e.g. if you set the success action for the Button click event, a success message will be displayed

• Following is an example of how to perform a Click Action

Example

• Go to Events

• Go to click>search and select Toaster from the Action drop-down

• Click gear icon

• Select the Success action

• Click on the Save button

• Save the layout and run the layout

• Click on Preview

• After clicking on the button, a Success Message will be displayed