Use: Users can use buttons to perform form actions e.g save, preview, cancel. users can use buttons with different colors to convey different meanings.
How to use a button on the layout designer page:
Steps:
Goto component section
...
2. Search and select the button component in the component section
3. Drag and drop button component on layout
...
Configurations of a button component
Label: To display on UI
Name: To save at the backend, instance prefix will append in case of custom object
Variant: The button comes in five variants: neutral, brand, outline-brand, destructive, and success.
...
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.
...
Outline-brand button: Is used for more emphasis than neutral buttons, these buttons do not have an outer border
...
Success button: indicates a successful or positive action. it has a green color style.
...
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
...
| Include Page | ||||
|---|---|---|---|---|
|