Comment on page
Button
Buttons are clickable items used to perform an action.
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.
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. |
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. |
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
🎛️ Attributes
Events
🎨 Styling
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. |
Name | Description |
|---|---|
click | The event fired when the button is clicked. |
Name | Description |
|---|---|
Line Height | The line-height property specifies the height of a line. |
Font Size | Define the font size for the text label |
Font Style | Define the font style for the text label |
Font Weight | Define the font weight for the text label |
Color | Define the font color for the text label |
Color Hover | Define the font color for the text label when hover |
Color Active | Define the font color for the text label when active |
Name | Description |
|---|---|
Color | Define a button background color |
Color Active | Define a button background color when active |
Color Hover | Define a button background color when mouse hover |
Name | Description |
|---|---|
Size | Define a border size |
Radius | Define a border radius |
Style | Define a border style |
Color | Define a border color |
Color Active | Define a border color when active |
Color Hover | Define a border color when mouse hover |
Name | Description |
|---|---|
Shadow | Attach one or more shadows to a button. |
Shadow Focus | Attach one or more shadows to a button when the user clicks on the button. |
Last modified 10d ago