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

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

***


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