> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.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>


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