> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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/angular/icon) and [Label element](/ui-kit/angular/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="HTML">
    ```html theme={null}
    <cometchat-icon-button
    [text]="'text'"
    [alignment]="alignment"
    [hoverText]="'hoverText'"
    [iconURL]="myCustomIcon"
    (cc-button-clicked)="clickHandler($event)"
    ></cometchat-icon-button>
    ```
  </Tab>

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

    alignment = IconButtonAlignment.right
    iconURL = "https://img.icons8.com/?size=24&id=uooD0BINPxNE&format=svg";
    clickHandler = (event: any) => {
      //Perform appropriate action
    }
    ```
  </Tab>
</Tabs>