# Button Icon

<figure><img src="/files/2L1Quo51m9BSdbKWcJmw" alt="" width="375"><figcaption></figcaption></figure>

## Changing the properties

The Avonni Button Icon Component offers easy customization with the following properties:

* **Icon Name**: Specify the desired icon to display on the button
* **Variant**: Choose the appearance of the button icon (additional customization available in the style tab)
* **Size**: Set the optimal size for the button icon

These options allow you to create a visually appealing and user-friendly interface tailored to your requirements.

## Adding Interactions

Interactions define what happens when users click on an action. A list of interactions is available [here](/flow/component-builder/interactions-panel.md).

Here are the available Actions for the Button Icon Component:

* On **`Click`**

{% hint style="danger" %}

## Important

Due to limitations within Flow Builder, the Button Icon component cannot directly access variable information from components that lack context about a specific record. When configuring interactions using record variables within a flow, ensure the components involved are contextually aware of the record. **For scenarios where context is challenging to establish, consider using the** [**Avonni Dynamic Components package**](/dynamic-components/welcome.md)**, which offers advanced capabilities for managing and passing record context across components.**
{% endhint %}

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>Icon Name</td><td>String</td><td>The icon that will be displayed on the button</td></tr><tr><td>Variant</td><td>Boolean</td><td>To change the appearance of the button icon</td></tr><tr><td>Size</td><td>Boolean</td><td>To set a size for the button icon</td></tr><tr><td>Disabled</td><td>Boolean</td><td>If enabled, users cannot interact with the button icon.</td></tr><tr><td>Type</td><td>Boolean</td><td>To specify the type of button</td></tr><tr><td>Alternative Text</td><td>String</td><td>It's use to describe the icon</td></tr></tbody></table>

### Events

| Name  | Description                                      |
| ----- | ------------------------------------------------ |
| click | The event fires when the button icon is clicked. |

### Styling Hooks

#### Background

| Name         | Description                                              |
| ------------ | -------------------------------------------------------- |
| Color        | Define a background color                                |
| Color Active | Define a background color when the button icon is active |
| Color Hover  | Define a background color when mouse hover               |

#### Border

| Name         | Description                            |
| ------------ | -------------------------------------- |
| Size         | Define a border size                   |
| Radius       | Define a border radius                 |
| Style        | Define a border style                  |
| Color        | Define a border color                  |
| Color Active | Define a border color when active      |
| Color Hover  | Define a border color when mouse hover |

#### Text/Icon Color

| Name         | Description                                                |
| ------------ | ---------------------------------------------------------- |
| Color        | Define a specific color for the Text/Icon                  |
| Color Active | Define a specific color for the Text/Icon when active      |
| Color Hover  | Define a specific color for the Text/Icon when mouse hover |


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.