> 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/flow/flow-components/button-icon.md).
# Button Icon
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](/flow/component-builder/interactions-panel.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 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.
{% tabs %}
{% tab title="Margin" %}
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.
{% endtab %}
{% tab title="Padding" %}
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.
{% endtab %}
{% tab title="Flow Dialog" %}
Adjusts display when opened as a modal dialog inside a Flow screen.
* **Width:** Dialog width.
* **Height:** Dialog height.
* **Background Color:** Dialog background color.
{% endtab %}
{% tab title="Border" %}
Customizes the border of the button icon.
* **Size:** Border thickness.
* **Style:** Border style (solid, dashed, etc.).
* **Radius:** Border corner radius.
{% endtab %}
{% tab title="Image" %}
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.
{% endtab %}
{% endtabs %}
## 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
| Output variable | Type | What it returns |
| --------------- | ------- | ---------------------------------------------------------------------- |
| **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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).
---
# 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/flow/flow-components/button-icon.md?ask=&goal=
```
`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.