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.

Variant	Description
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.

Size	Value
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.

Type	Description
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

Output variable	Type	What it returns
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.