Button Icon

Overview

The Avonni Button Icon Component is a user interface element that displays an icon within a clickable button on a flow screen. This component allows users to trigger an action by clicking on the button. The button icon provides a visual cue to the user about the type of action that will be performed when the button is clicked. This highly customizable component lets you choose from various pre-built icons.

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 will happen when users click on an action. You can find a list of interactions available here.

Here are the available Actions for the Button Icon Component:

• On Click

Specifications

Attributes

Name	Type	Description
Icon Name	String	The icon that will be displayed on the button
Variant	Boolean	To change the appearance of the button icon
Size	Boolean	To set a size for the button icon
Disabled	Boolean	If enabled, users cannot interact with the button icon.
Type	Boolean	To specify the type of button
Alternative Text	String	It's use to describe the icon

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