Button
The Avonni Button component provides customizable buttons to initiate actions, navigate pages, or perform specific functions.
Overview
The Avonni Button is an interactive control you place on a Flow screen to let users trigger actions — navigate to the next step, launch a sub-flow, open a modal, or fire any other interaction. It supports a wide range of visual styles, optional icons, full-width layout, disabled states, and a tooltip on hover.
Tutorials
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.
Configuration
To configure it, click the component on the Flow screen. The Edit Button Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Label sets the text displayed on the button. Leave it empty if you only want to show an icon.
Variant defines the button's visual style:
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.
Icon Name adds a Lightning Design System icon (e.g., utility:add) to the button. Use Icon Src instead to supply a custom image URL as the icon.
Icon Position places the icon to the Left or Right of the label.
Icon Size controls the icon's size: Extra Small, Small, Medium, or Large.
Stretch expands the button to fill the full width of its container.
Disabled makes the button visible but non-interactive. Use this to conditionally gray out the button based on flow state.
Title sets a tooltip shown when the user hovers over the button.
Type controls the HTML button type: Button (default), Reset, or Submit. In most flow scenarios, leave this as Button.
Interactions
Interactions define what happens when users interact with the Button. Configure them from the Interactions tab of the Edit Button panel.
Click
Fires when the user clicks the button. Use this to navigate to the next step, launch a sub-flow, open a modal, or trigger any other action. The clicked output variable is set to true when this event fires.
Styling
The Style tab gives you fine-grained control over the button's appearance, overriding the default variant styles. Configure it from the Style tab of the Edit Button panel.
Controls the outer spacing around the button, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side of the button.
Controls the inner spacing between the button's content and its edges. These values are set per variant (Base, Bare, Bare-Inverse, Border, Border-Filled, Border-Inverse, Brand, Brand Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, Success).
Block Start / Block End: Adjust the vertical inner spacing.
Inline Start / Inline End: Adjust the horizontal inner spacing.
Styles the button's text label. The Color values are set per variant (Base, Bare, Bare-Inverse, Border, Border-Filled, Border-Inverse, Brand, Brand Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, Success).
Color / Color Active / Color Hover: Set the text color in the default, active, and hover states.
Font Size / Font Style / Font Weight / Font Family: Control the label typography.
Line Height: Set the height of the text line.
Horizontal Alignment: Align the label within the button.
Sets the button's background. These values are set per variant (Base, Bare, Bare-Inverse, Border, Border-Filled, Border-Inverse, Brand, Brand Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, Success).
Color / Color Active / Color Hover: Set the background color in the default, active, and hover states.
Customizes the border surrounding the button. The Color values are set per variant (Base, Bare, Bare-Inverse, Border, Border-Filled, Border-Inverse, Brand, Brand Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, Success).
Color / Color Active / Color Hover: Set the border color in the default, active, and hover states.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Attaches shadows to the button to add depth.
Shadow: Set the button's default shadow.
Shadow Focus: Set the shadow shown when the button is focused.
Styles a custom image used as the button's icon (when Icon Src is set).
Border Color / Border Size / Border Style / Border Radius: Customize the border around the image.
Object Fit: Control how the image is resized to fit its box.
Output Variables
The Button exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Button component, and pick the output variable you need.
Button Click
Set when the user clicks the button.
Clicked
Boolean
true when the user has clicked the button.
Example: Use Clicked in a flow decision to branch logic — for instance, show a confirmation screen only after the user clicks a "Submit" button.
Flow Interaction Output Variables
Like all interactive Flow components, the Button exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?