> ## 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.

# Button

> Button — CometChat documentation.

`CometChatButton` is a widget representing a button with optional icon and text. It provides customisable button styles through the `buttonStyle` object and handles tap events with `onTap` callback.

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatButton(
      text: "Button",
      buttonStyle: CometChatButtonStyle(
        background: Colors.red,
      ),
      onTap: (context) {
    		// Action on button tap goes here
      },
    );
    ```
  </Tab>
</Tabs>

***

## Properties

| Properties      | Type                                     | Description                                            |
| --------------- | ---------------------------------------- | ------------------------------------------------------ |
| **text**        | string                                   | used to set the text for the button                    |
| **hoverText**   | string                                   | used to set the hover text for the button              |
| **iconUrl**     | string                                   | used to set the url for the icon                       |
| **iconPackage** | string                                   | used to set the package name for the icon              |
| **buttonStyle** | [ButtonStyle](/ui-kit/flutter/v4/button) | used to set the style for the button                   |
| **onTap**       | Function(BuildContext)                   | is a callback which gets called when button is clicked |

***

### Button Style

| Properties           | Type      | Description                    |
| -------------------- | --------- | ------------------------------ |
| **textStyle**        | TextStyle | sets TextStyle for text        |
| **iconTint**         | Color     | sets color for icon            |
| **iconBackground**   | Color     | sets background color for icon |
| **iconBorder**       | BoxBorder | sets border for icon           |
| **iconBorderRadius** | double    | sets border radius for icon    |
| **iconHeight**       | double    | sets height for icon           |
| **iconWidth**        | double    | sets width for icon            |
| **width**            | double    | sets width                     |
| **height**           | double    | sets height                    |
| **background**       | Color     | sets backGround color          |
| **border**           | BoxBorder | sets border                    |
| **borderRadius**     | double    | sets border radius             |
| **gradient**         | Gradient  | sets backGround gradient       |

##### Example

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ButtonStyle(
      textStyle: TextStyle(),
      iconTint: Colors.white,
      iconBackground: Colors.white,
      iconBorder: Border.all(),
      iconBorderRadius: 50,
      width: 100,
      height: 100,
      background: Colors.white,
      border: Border.all(),
      borderRadius: BorderRadius.circular(20),
      gradient: LinearGradient(),
    );
    ```
  </Tab>
</Tabs>