> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Buttons

> Call Buttons — CometChat documentation.

This component provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.

## Properties

### Chat Information

Details associated with the call participants.

| Name  | Type                                                     | Description                                     |
| ----- | -------------------------------------------------------- | ----------------------------------------------- |
| user  | [User Class](/sdk/javascript/user-management#user-class) | View details of this particular CometChat user  |
| group | [Group Class](/sdk/javascript/create-group#group-class)  | View details of this particular CometChat group |

### Asset URLs

Custom asset URL used for graphical representation.

| Name             | Type   | Description                                                          |
| ---------------- | ------ | -------------------------------------------------------------------- |
| voiceCallIconURL | string | Asset URL for the icon displayed on the button initiating voice call |
| videoCallIconURL | string | Asset URL for the icon displayed on the button initiating video call |

### Function Callback

Functions that can be invoked by the user in response to a specific event or condition.

| Name             | Type                                                                          | Description                                                                                       |
| ---------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| onVoiceCallClick | Function as PropType\<(user: CometChat.User, group: CometChat.Group) => void> | Override the method that is invoked when the user clicks on the button that initiates voice call. |
| onVideoCallClick | Function as PropType\<(user: CometChat.User, group: CometChat.Group) => void> | Override the method that is invoked when the user clicks on the button that initiates video call. |
| onError          | Function as PropType\<(error: CometChat.CometChatException) => void>          | Override the method that is invoked when an error is encountered within the details component     |

### Custom text

Customise the text or label displayed on the button

| Name                   | Type   | Description                                                     |
| ---------------------- | ------ | --------------------------------------------------------------- |
| voiceCallIconText      | string | Text or label displayed on the voice call button.               |
| voiceCallIconHoverText | string | Text or label displayed on the voice call button on mouse over. |
| videoCallIconText      | string | Text or label displayed on the video call button.               |
| videoCallIconHoverText | string | Text or label displayed on the video call button on mouse over. |

### Style

Styling properties and values of all the involved components

| Name             | Type                                             | Description                          |
| ---------------- | ------------------------------------------------ | ------------------------------------ |
| callButtonsStyle | [CallButtonsStyle](/web-shared/callbuttonsstyle) | Styling properties of this component |

### Usage

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    onError: (error: CometChat.CometChatException) => void = (error:CometChat.CometChatException) => {
    //perform action
    }
    onVoiceCallClick!: (user: CometChat.User, group: CometChat.Group) => void = (user: CometChat.User, group: CometChat.Group)=> {
    //perform action
    }
    onVideoCallClick!: (user: CometChat.User, group: CometChat.Group) => void= (user: CometChat.User, group: CometChat.Group)=> {
    //perform action
    }

    <CometChatCallButtons :onError="onError" :onVideoCallClick="onVideoCallClick" :onVoiceCallClick="onVoiceCallClick"> </CometChatCallButtons>
    ```
  </Tab>
</Tabs>

***