Button Icon
The Avonni Button Icon component displays an icon-only button using a Lightning Design System icon or a custom image. Use it wherever a compact, accessible action trigger is needed without a text label.
Overview
Button Icon renders a single clickable icon button. You control the icon, its visual style (variant), size, and whether it is enabled or disabled. An alternative text field ensures screen readers can describe the button to users who cannot see it.
Configuration
To configure the Button Icon, select it on the canvas. The configuration panel opens on the right. The sections below mirror the Properties tab.
Properties
Icon Name
The Icon Name setting specifies the Lightning Design System icon to display. Type or search for any SLDS icon name (for example, utility:edit or action:new_note).
Icon Source
Use Icon Source to supply a custom image instead of an SLDS icon. Enter a public image URL or a Salesforce Content Document ID. Accepted formats: APNG, AVIF, GIF, JPG, JPEG, PNG, SVG, WEBP.
Variant
The Variant setting changes the visual appearance of the button. The default is Neutral.
Base
Icon only, no background or border.
Bare
Transparent background, no border.
Bare Inverse
Bare style for use on dark backgrounds.
Border
Adds a visible border around the icon.
Border Filled
Border with a filled background.
Border Inverse
Border style for use on dark backgrounds.
Brand
Salesforce brand-color background.
Brand Outline
Brand-color border, transparent background.
Container
Contained appearance with a subtle background.
Destructive
Red background to signal a dangerous action.
Destructive Text
Red icon color without a filled background.
Inverse
Inverted colors for use on dark backgrounds.
Neutral
Standard button appearance (default).
Success
Green style to indicate a successful or positive action.
Size
The Size setting controls how large the button icon appears. The default is Medium.
XXS
xx-small
XS
x-small
Small
small
Medium (default)
medium
Large
large
Disabled
When Disabled is enabled, the button is grayed out and users cannot interact with it.
Title
The Title field sets a tooltip that appears when a user hovers over the button. Use this to provide additional context about the action.
Type
The Type setting specifies the HTML button behavior. The default is Button.
Button
A standard clickable button (default).
Reset
Resets a form to its default values when clicked.
Submit
Submits a form when clicked.
Alternative Text
The Alternative Text field provides a screen-reader description of the icon. This is important for accessibility — enter a short phrase that describes the button's action (for example, "Edit record" or "Delete item").
Set Component Visibility
All components support conditional visibility — see Component Visibility.
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 a user clicks the button. Use this to navigate to a page, open a modal, launch a flow, or trigger any other action in your experience.
Output Variables
The Button Icon exposes this output variable you can reference elsewhere on the page after the user interacts with it.
Click
Clicked
Boolean
true when the user clicks the button; resets to false on the next interaction cycle.
Example: When a user clicks the Button Icon, use Clicked to conditionally show a confirmation message or trigger a visibility rule on another component.
Last updated
Was this helpful?
