Button

The Avonni Button component provides customizable buttons to initiate actions, navigate pages, or perform specific functions.

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 available here.

Here are the available Actions for the Button Component:

• On Click

Important consideration

Due to limitations within Flow Builder, the Button component cannot directly access variable information from components that lack context about a specific record. When configuring interactions using record variables within a flow, ensure the components involved are contextually aware of the record. For scenarios where context is challenging to establish, consider using the Avonni Dynamic Components package, which offers advanced capabilities for managing and passing record context across components.

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

🎨 Styling