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 Edit Button Icon panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

The Properties tab of the Edit Button Icon panel.

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.

Every variant. The three Inverse variants are drawn for dark backgrounds, so they are shown on a dark tile.

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

The five sizes, from Xxs to 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.

Styling

Configure the Button Icon's appearance from the Style tab of the Edit Button Icon panel. The color sections below adapt to the Variant chosen in the Properties tab.

Margin

Controls the outer spacing around the button.

• Top / Right / Bottom / Left: Adjust the space on each side.

Padding

Controls the inner spacing inside the button.

• Top / Right / Bottom / Left: Adjust the space on each side.

Horizontal Alignment

Sets the horizontal alignment of the button within its container.

• Horizontal Alignment: Choose how the button is justified.

Border

Customizes the button border (color set per variant).

• Size: Adjust the border thickness.
• Style: Set the border style (solid, dashed, dotted, etc.).
• Radius: Control the roundness of the corners.
• Color / Color Active / Color Hover: Set the border color in each state.

Background

Sets the button background (color set per variant).

• Color / Color Active / Color Hover: Set the background color in each state.

Icon Color

Customizes the icon color (set per variant).

• Color / Color Active / Color Hover: Set the icon color in each state.

Spacing

Adjusts the internal block and inline spacing of the button (set per variant).

• Block Start / Block End: Set the vertical spacing.
• Inline Start / Inline End: Set the horizontal spacing.

Image

Applies when a custom image is used via Icon Source.

• Border Color / Border Size / Border Style / Border Radius: Customize the image border.
• Object Fit: Control how the image fills its area.

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 once the user has clicked the button, and it stays true afterwards. Use it to reveal something or to drive a visibility rule, not as a one-shot trigger.

If the click runs an Open Confirm interaction and the user cancels the confirmation, Clicked is cleared again, so a component revealed by it does not stay on screen after a cancelled action.

Example: When a user clicks the Button Icon, use Clicked to conditionally show a confirmation message or trigger a visibility rule on another component.