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.
Steps for configuration:
Go to Component
Search the button component drag and drop the button component in the layout
Configurations of a button component
Label: Button label is used to give the identity for a button which display on UI
Variant: Users can set various types of variants for the button which is displayed in different color formats according to their actions
The Button 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 users that their action has a negative effect
Success: Success is a green button used to indicate a successful action
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
Click Action: The user can perform a click action on the button. For example, if the user sets the success action for the button, when the user clicks on the button, a success message will be displayed
Following are the steps for click action
Go to “Events”
Go to “click actions”
Search “Toaster” and select toaster from drop-down
Give the “success” action
Click on the "save" button
Save the layout or run the layout and click on the "preview"
After clicking on the button, a “success message” will be displayed
| Include Page | ||||
|---|---|---|---|---|
|