Button Icon
The Avonni Button Icon component adds customizable icons to buttons in Flow screens, providing visual cues for user actions.
The Avonni Button Icon renders an icon-only button on a Flow screen. Use it when a compact, icon-based action fits better than a full text button — for example, a close button, a refresh trigger, or a quick navigation shortcut.
Overview
The Button Icon displays a single Lightning Design System icon (or custom image) as a clickable button. It supports all standard button variants and exposes a Clicked output variable so you can detect when the user tapped it.
Configuration
To configure it, click the component on the Flow screen. The Edit Button Icon Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Icon Name — the Lightning Design System icon to display. Specify in the format utility:edit.
Icon Source — a custom image URL or Salesforce ContentDocumentId used as the icon image. Use this when the standard icon library doesn't have what you need.
Variant — controls the visual style of the button: Base, Bare, Bare-Inverse, Border (default), Border-Filled, Border-Inverse, Brand, Brand-Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, or Success.
Size — controls the button size: XX-Small, X-Small, Small, Medium, or Large.
Disabled — when enabled, users cannot interact with the button.
Title — tooltip text displayed when hovering over the button.
Type — the HTML button type: Button, Reset, or Submit.
Alternative Text — accessible text description for screen readers, describing what the button does.
Interactions
Interactions define what happens when users interact with the Button Icon. Configure them from the Interactions tab of the Edit Button Icon panel.
Click
Fires when the user clicks the button icon. Use this to trigger a Flow action such as navigating to another screen, launching a sub-flow, or dismissing the current screen.
Styling
The Style tab gives you fine-grained control over the Button Icon's appearance. Configure it from the Style tab of the Edit Button Icon panel.
Controls outer spacing.
Top: Space above the component.
Right: Space to the right of the component.
Bottom: Space below the component.
Left: Space to the left of the component.
Controls inner spacing.
Top: Inner space above the content.
Right: Inner space to the right of the content.
Bottom: Inner space below the content.
Left: Inner space to the left of the content.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
Customizes the border of the button icon.
Size: Border thickness.
Style: Border style (solid, dashed, etc.).
Radius: Border corner radius.
Styles the custom image icon when an Icon Source is used.
Border Color: Color of the image border.
Border Size: Thickness of the image border.
Border Style: Style of the image border.
Border Radius: Corner radius of the image.
Object Fit: How the image fills its container.
Output Variables
The Button Icon 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 Icon component, and pick the output variable you need.
Button Click
Clicked
Boolean
true when the user clicked the button icon during this screen visit.
Example: Use Clicked in a decision element after the screen to branch your flow — for instance, navigate to a confirmation screen only when the user tapped the icon.
Flow Interaction Output Variables
Like all interactive Flow components, the Button Icon 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?