Button
Buttons are clickable items used to perform an action.
The Button is also available as an Experience Cloud Component.
Overview
The Avonni Button Component allows users to perform actions or navigate pages with a single click or tap. Buttons can be customized in appearance and trigger various actions, such as opening a new flow, navigating to a new page, or performing a specific function.
Tutorials
Name | Description |
---|---|
Learn to create and display product code barcodes in Salesforce efficiently and effectively. | |
Learn to add a 'Cancel and Close' button in Salesforce screen flows with Avonni Button. | |
Learn to create a button in Salesforce that opens a new flow with ease. |
Changing the Properties
The Variant attribute will define the appearance of the button.
Variant | Description | Suggested Use |
---|---|---|
Bare | Minimalist, no background or border. | Unobtrusive buttons, minimal visual distraction. |
Base | Standard style with a background color. | Primary actions in forms or interfaces. |
Bare-Inverse | Bare style with an inverse color scheme. | Dark backgrounds or themes. |
Border | Only a border without a filled background. | Secondary actions, less emphasis. |
Border-Filled | Border with background fill. | Slightly more emphasis than border-only. |
Border-Inverse | Border style with inverse colors. | Use on dark backgrounds. |
Brand | Styled with brand’s colors. | Brand-representative actions. |
Brand Outline | Brand colors in an outline style. | Secondary brand-related actions. |
Container | Looks contained within a box. | Grouping related actions or section-specific buttons. |
Destructive | Indicates a dangerous or irreversible action, often red. | Delete, remove, or clear actions. |
Destructive-Text | Text-only style for destructive actions. | Less prominent but critical actions. |
Inverse | For use on dark or vibrant backgrounds. | Stand out against a bold background. |
Neutral | Subdued and versatile. | Non-emphasized or similar series of actions. |
Success | Indicates a positive action, often green. | 'Save', 'Confirm', or other successful operations. |
Adding Interactions
Interactions define what will happen when users click on the button. You can find a list of interactions that are available here.
Here are the available Actions for the Button Component:
On
Click
Specifications
Name | Type | Description |
---|---|---|
iconName | String | The name of the icon to be used in the format 'utility:down'. |
iconPosition | String | Describes the position of the icon. |
label | String | Describes the totle of the button. |
type | String | To specify the type of button |
variant | String | The variant changes the appearance of the button. |
Last updated