> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/button-icon.md).

# 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.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FaWhmQs9tIIy6FP2rLjv7%2Fbutton-icon-builder-properties.png?alt=media" alt="" width="375"><figcaption><p>The Properties tab of the Edit Button Icon panel.</p></figcaption></figure>

### 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. |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FApILdup2PTw9Na4IeOcL%2Fbutton-icon-variant.png?alt=media" alt=""><figcaption><p>Every variant. The three Inverse variants are drawn for dark backgrounds, so they are shown on a dark tile.</p></figcaption></figure>

#### 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    |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FBD9olFuUTQzY1upCRuue%2Fbutton-icon-sizes.png?alt=media" alt=""><figcaption><p>The five sizes, from Xxs to Large.</p></figcaption></figure>

#### 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](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) 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.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the button.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing inside the button.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Horizontal Alignment" %}
Sets the horizontal alignment of the button within its container.

* **Horizontal Alignment:** Choose how the button is justified.
  {% endtab %}

{% tab title="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.
  {% endtab %}

{% tab title="Background" %}
Sets the button background (color set per variant).

* **Color / Color Active / Color Hover:** Set the background color in each state.
  {% endtab %}

{% tab title="Icon Color" %}
Customizes the icon color (set per variant).

* **Color / Color Active / Color Hover:** Set the icon color in each state.
  {% endtab %}

{% tab title="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.
  {% endtab %}

{% tab title="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.
  {% endtab %}
  {% endtabs %}

## 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/button-icon.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.