# Button Icon

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FiHpY7sSvAomcCwErLDde%2Fimage%20(77).avif?alt=media&#x26;token=6a2f62d8-8f70-44ca-8d69-09d36b49d9c0" 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](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel).

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**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/)**, 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 |