> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon Button

> Icon Button — CometChat documentation.

## Overview

This element uses [Icon element](/ui-kit/react/v4/icon) and [Label element](/ui-kit/react/v4/label) to show text and icon(with background) and along with an alignment property to align the icon around the text. The purpose of this element is to initiate an action.

## Properties

| Name | Type | Description |
| - | - | - |
| text | string | Text to appear on the element |
| hoverText | string | Text to appear on the element on mouseover |
| iconURL | string | Asset URL of the icon to be displayed on the element |
| alignment | [IconButtonAlignment](/web-shared/iconbuttonalignment) | Group of constants representing the alignment options |
| disabled | boolean | When set to true, prevents the user from interacting with the button: it cannot be pressed or focused. |
| buttonStyle | object | Styling properties and values of the element |

## Events

Events triggered by the element

| Name | Description |
| - | - |
| cc-button-clicked | Event triggered when user clicks on the element |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements';//import the web component package.
    import { IconButtonAlignment } from '@cometchat/uikit-resources';

    const text = "Large button";
    const hoverText = "This is a large button";
    const alignment = IconButtonAlignment.right
    const iconURL = "https://img.icons8.com/?size=24&id=uooD0BINPxNE&format=svg";
    const clickHandler = event => {
    	//Perform appropriate action
    }


    <cometchat-icon-button
    :text="text"
    :alignment="alignment"
    :hoverText="hoverText"
    :iconURL="iconURL"
    @cc-button-clicked="clickHandler">
    </cometchat-icon-button>
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.