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
Customize the flow navigation buttons	Learn to create and display product code barcodes in Salesforce efficiently and effectively.
How to add a "Cancel and Close" Button	Learn to add a 'Cancel and Close' button in Salesforce screen flows with Avonni Button.
Adding a Button to Launch Flows in Salesforce	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

🎛️ Attributes

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.

Events

Name	Description
click	The event fired when the button is clicked.

🎨 Styling

Text

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

Background

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

Border

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

Box Shadow

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.