Overview
Buttons are clickable items used to perform an action
It can be used in the layout to perform a specific action such as submit, save or cancel according to requirements
...
Configurations of a button component
...
Attributes
Label: Button label is used to give the identity of a button, which is displayed on the UI and its editable
Variant: Sets various types of variants for the button which are displayed in different color formats according to their actions
The ButtonButton 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
buttonButton which is displayed in white color
Brand: Brand is a blue
buttonButton, 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
buttonButton color
Destructive: Destructive is a red
buttonButton used to warn that the action has a negative effect
Success: Success is a green
buttonButton used to indicate a successful action
...
Left Icon
...
Displays the icon on the left side of the button
...
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
...
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” Events
...
Go to “click actions” Search “Toaster” click>search and select toaster Toaster from the Action drop-down
...
Give the “success” Click gear icon
...
Select the Success action
...
Click on the "save" Save button
Save the layout or and run the layout and click on the "preview"
Click on Preview
After clicking on the button, a “success message” Success Message will be displayed
...
| Include Page | ||||
|---|---|---|---|---|
|