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

> Add CometChat React UI Kit call buttons for voice and video calls with user or group targets, click callbacks, and error handling.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatCallButtons",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatCallButtons } from \"@cometchat/chat-uikit-react\";",
    "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
    "description": "Voice and video call initiation buttons for user or group conversations.",
    "cssRootClass": ".cometchat-call-button",
    "primaryOutput": {
      "description": "Initiates calls via SDK, emits CometChatCallEvents"
    },
    "props": {
      "data": {
        "user": {
          "type": "CometChat.User",
          "default": "undefined",
          "note": "Pass either user or group, not both"
        },
        "group": {
          "type": "CometChat.Group",
          "default": "undefined",
          "note": "Pass either user or group, not both"
        }
      },
      "callbacks": {
        "onError": "((error: CometChat.CometChatException) => void) | null",
        "onVoiceCallClick": "(user?: CometChat.User, group?: CometChat.Group) => void",
        "onVideoCallClick": "(user?: CometChat.User, group?: CometChat.Group) => void"
      },
      "visibility": {
        "hideVoiceCallButton": { "type": "boolean", "default": false },
        "hideVideoCallButton": { "type": "boolean", "default": false }
      },
      "configuration": {
        "callSettingsBuilder": "(isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => typeof CometChatUIKitCalls.CallSettingsBuilder",
        "outgoingCallConfiguration": {
          "type": "OutgoingCallConfiguration",
          "default": "new OutgoingCallConfiguration({})",
          "properties": {
            "disableSoundForCalls": "boolean",
            "customSoundForCalls": "string",
            "onError": "(error: CometChat.CometChatException) => void",
            "onCallCanceled": "Function",
            "titleView": "(call: CometChat.Call) => JSX.Element",
            "subtitleView": "(call: CometChat.Call) => JSX.Element",
            "avatarView": "(call: CometChat.Call) => JSX.Element",
            "cancelButtonView": "(call: CometChat.Call) => JSX.Element"
          }
        }
      }
    },
    "events": [
      {
        "name": "CometChatCallEvents.ccOutgoingCall",
        "payload": "CometChat.Call",
        "description": "Call initiated"
      },
      {
        "name": "CometChatCallEvents.ccCallRejected",
        "payload": "CometChat.Call",
        "description": "Call rejected/cancelled"
      },
      {
        "name": "CometChatCallEvents.ccCallEnded",
        "payload": "CometChat.Call",
        "description": "Call session ends"
      },
      {
        "name": "CometChatMessageEvents.ccMessageSent",
        "payload": "IMessages",
        "description": "Group call message sent"
      }
    ],
    "sdkListeners": [
      "onIncomingCallReceived",
      "onIncomingCallCancelled",
      "onOutgoingCallRejected",
      "onOutgoingCallAccepted"
    ],
    "compositionExample": {
      "description": "Standalone call buttons or embedded in MessageHeader auxiliary view",
      "components": ["CometChatCallButtons", "CometChatOutgoingCall", "CometChatOngoingCall"],
      "flow": "user/group prop -> click button -> SDK initiateCall -> CometChatOutgoingCall overlay -> onOutgoingCallAccepted -> CometChatOngoingCall"
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatCallButtons` renders voice and video call buttons. Pass a `user` for 1-on-1 calls or a `group` for group calls. Typically embedded in `CometChatMessageHeader`'s auxiliary view or used standalone. The component handles call initiation, renders `CometChatOutgoingCall` internally, and manages the full call lifecycle.

```tsx lines theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function CallButtonsDemo() {
  const [chatUser, setChatUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("uid").then((user) => setChatUser(user));
  }, []);

  return chatUser ? <CometChatCallButtons user={chatUser} /> : null;
}

export default CallButtonsDemo;
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/MwUD0WbYp0FmjMsd/images/daaefbc1-55et9fX2XqpdHqxA4UAAAAACAXvO2Cn8xyPfrx48ffz527Nhvf3zg3wuUlUDn3abJAAAAAElFTkSuQmCC.png?fit=max&auto=format&n=MwUD0WbYp0FmjMsd&q=85&s=d90a32d49797f563bd4d5ca243151d01" width="1280" height="232" data-path="images/daaefbc1-55et9fX2XqpdHqxA4UAAAAACAXvO2Cn8xyPfrx48ffz527Nhvf3zg3wuUlUDn3abJAAAAAElFTkSuQmCC.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function CallButtonsMinimal() {
  return <CometChatCallButtons user={chatUser} />;
}
```

Root CSS class: `.cometchat-call-button`

***

## Actions and Events

### Callback Props

#### onVoiceCallClick

Overrides the default voice call initiation behavior. When set, clicking the voice button invokes this callback instead of initiating a call via the SDK.

```tsx lines theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";

function CallButtonsVoiceOverride() {
  const [chatUser, setChatUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("uid").then((user) => setChatUser(user));
  }, []);

  return (
    <CometChatCallButtons
      user={chatUser}
      onVoiceCallClick={() => {
        console.log("Custom voice call logic");
      }}
    />
  );
}
```

#### onVideoCallClick

Overrides the default video call initiation behavior.

```tsx lines theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";

function CallButtonsVideoOverride() {
  const [chatUser, setChatUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("uid").then((user) => setChatUser(user));
  }, []);

  return (
    <CometChatCallButtons
      user={chatUser}
      onVideoCallClick={() => {
        console.log("Custom video call logic");
      }}
    />
  );
}
```

#### onError

Fires on internal errors during call initiation.

```tsx lines theme={null}
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function CallButtonsWithError() {
  return (
    <CometChatCallButtons
      user={chatUser}
      onError={(error: CometChat.CometChatException) => {
        console.error("CallButtons error:", error);
      }}
    />
  );
}
```

### Global UI Events

`CometChatCallEvents` emits call lifecycle events subscribable from anywhere.

| Event | Fires when | Payload |
| - | - | - |
| `ccOutgoingCall` | User initiates a voice/video call | `CometChat.Call` |
| `ccCallRejected` | Initiated call is rejected/cancelled | `CometChat.Call` |
| `ccCallEnded` | Call session ends | `CometChat.Call` |

```tsx lines theme={null}
import { useEffect } from "react";
import { CometChatCallEvents } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function useCallButtonEvents() {
  useEffect(() => {
    const outgoingSub = CometChatCallEvents.ccOutgoingCall.subscribe(
      (call: CometChat.Call) => {
        console.log("Outgoing call:", call.getSessionId());
      }
    );
    const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe(
      (call: CometChat.Call) => {
        console.log("Call rejected:", call.getSessionId());
      }
    );
    const endedSub = CometChatCallEvents.ccCallEnded.subscribe(
      (call: CometChat.Call) => {
        console.log("Call ended:", call.getSessionId());
      }
    );

    return () => {
      outgoingSub?.unsubscribe();
      rejectedSub?.unsubscribe();
      endedSub?.unsubscribe();
    };
  }, []);
}
```

### SDK Events (Real-Time, Automatic)

The component attaches SDK call listeners internally:

| SDK Listener | Internal behavior |
| - | - |
| `onIncomingCallReceived` | Disables call buttons to prevent concurrent calls |
| `onIncomingCallCancelled` | Re-enables call buttons |
| `onOutgoingCallRejected` | Hides outgoing call screen, re-enables buttons |
| `onOutgoingCallAccepted` | Transitions to ongoing call screen |

***

## Configuring the Outgoing Call Sub-Component

`CometChatCallButtons` renders `CometChatOutgoingCall` internally. Customize it via `outgoingCallConfiguration`.

```tsx lines theme={null}
import { CometChatCallButtons, OutgoingCallConfiguration } from "@cometchat/chat-uikit-react";

function CallButtonsCustomOutgoing() {
  return (
    <CometChatCallButtons
      user={chatUser}
      outgoingCallConfiguration={
        new OutgoingCallConfiguration({
          disableSoundForCalls: true,
          titleView: (call) => <div>{call.getCallReceiver().getName()}</div>,
        })
      }
    />
  );
}
```

`OutgoingCallConfiguration` properties:

| Property | Type | Description |
| - | - | - |
| `disableSoundForCalls` | `boolean` | Disables outgoing call ringtone |
| `customSoundForCalls` | `string` | Custom ringtone URL |
| `onError` | `(error: CometChat.CometChatException) => void` | Error callback |
| `onCallCanceled` | `Function` | Cancel button callback |
| `titleView` | `(call: CometChat.Call) => JSX.Element` | Custom title |
| `subtitleView` | `(call: CometChat.Call) => JSX.Element` | Custom subtitle |
| `avatarView` | `(call: CometChat.Call) => JSX.Element` | Custom avatar |
| `cancelButtonView` | `(call: CometChat.Call) => JSX.Element` | Custom cancel button |

Refer to [CometChatOutgoingCall](/ui-kit/react/v6/outgoing-call) for details on each view slot.

***

## Call Settings

Customize the calling experience via `callSettingsBuilder`.

```tsx lines theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons, CometChatUIKitCalls } from "@cometchat/chat-uikit-react";

function CallButtonsCustomSettings() {
  return (
    <CometChatCallButtons
      user={chatUser}
      callSettingsBuilder={(isAudioOnlyCall, user, group) =>
        new CometChatUIKitCalls.CallSettingsBuilder()
          .enableDefaultLayout(true)
          .setIsAudioOnlyCall(isAudioOnlyCall)
      }
    />
  );
}
```

***

## Common Patterns

### Voice-only call button

```tsx lines theme={null}
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";

function VoiceOnlyCallButtons() {
  return <CometChatCallButtons user={chatUser} hideVideoCallButton={true} />;
}
```

### Group call buttons

```tsx lines theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";

function GroupCallButtons() {
  const [group, setGroup] = useState<CometChat.Group>();

  useEffect(() => {
    CometChat.getGroup("guid").then((g) => setGroup(g));
  }, []);

  return group ? <CometChatCallButtons group={group} /> : null;
}
```

***

## CSS Architecture

The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:

1. Global tokens set on the `.cometchat` root wrapper.
2. Component CSS (`.cometchat-call-button`) consumes these tokens via `var()`.
3. Overrides target `.cometchat-call-button` descendant selectors.

### Key Selectors

| Target | Selector |
| - | - |
| Root | `.cometchat-call-button` |
| Voice button wrapper | `.cometchat-call-button__voice` |
| Video button wrapper | `.cometchat-call-button__video` |
| Button element | `.cometchat-call-button .cometchat-button` |
| Button icon | `.cometchat-call-button .cometchat-button__icon` |
| Outgoing call backdrop | `.cometchat-outgoing-call__backdrop` |

### Example: Themed call buttons

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/JjWlPukYmAPwZawH/images/3b154ea9-wPyMSRehgR7CgAAAAAElFTkSuQmCC.png?fit=max&auto=format&n=JjWlPukYmAPwZawH&q=85&s=83c850ecc711cd6c7d11a4e85ec1517d" width="1280" height="231" data-path="images/3b154ea9-wPyMSRehgR7CgAAAAAElFTkSuQmCC.png" />
</Frame>

```css lines theme={null}
.cometchat-call-button {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.cometchat .cometchat-button {
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  background: #edeafa;
}

.cometchat-call-button .cometchat-call-button__video .cometchat-button__icon,
.cometchat-call-button .cometchat-call-button__voice .cometchat-button__icon {
  background-color: #6852d6;
}
```

### Customization Matrix

| What to change | Where | Property/API | Example |
| - | - | - | - |
| Override call initiation | Component props | `onVoiceCallClick` / `onVideoCallClick` | `onVoiceCallClick={() => customCall()}` |
| Hide a call button | Component props | `hideVoiceCallButton` / `hideVideoCallButton` | `hideVideoCallButton={true}` |
| Customize outgoing call UI | Component props | `outgoingCallConfiguration` | `outgoingCallConfiguration={new OutgoingCallConfiguration({...})}` |
| Customize call settings | Component props | `callSettingsBuilder` | `callSettingsBuilder={(audio) => builder}` |
| Change colors, fonts, spacing | Global CSS | Target `.cometchat-call-button` class | `.cometchat-call-button .cometchat-button__icon { background: red; }` |

***

## Props

All props are optional. Sorted alphabetically.

### callSettingsBuilder

Builder function for customizing call settings.

| | |
| - | - |
| Type | `(isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => typeof CometChatUIKitCalls.CallSettingsBuilder` |
| Default | `undefined` |

***

### group

The group for group call buttons. Pass either `user` or `group`, not both.

| | |
| - | - |
| Type | `CometChat.Group` |
| Default | `undefined` |

***

### hideVideoCallButton

Hides the video call button.

| | |
| - | - |
| Type | `boolean` |
| Default | `false` |

***

### hideVoiceCallButton

Hides the voice call button.

| | |
| - | - |
| Type | `boolean` |
| Default | `false` |

***

### onError

Callback fired when the component encounters an error.

| | |
| - | - |
| Type | `((error: CometChat.CometChatException) => void) \| null` |
| Default | `undefined` |

***

### outgoingCallConfiguration

Configuration object for the internal `CometChatOutgoingCall` sub-component.

| | |
| - | - |
| Type | `OutgoingCallConfiguration` |
| Default | `new OutgoingCallConfiguration({})` |

See [Configuring the Outgoing Call Sub-Component](#configuring-the-outgoing-call-sub-component) for properties.

***

### user

The user for 1-on-1 call buttons. Pass either `user` or `group`, not both.

| | |
| - | - |
| Type | `CometChat.User` |
| Default | `undefined` |

***

## Events

| Event | Payload | Fires when |
| - | - | - |
| `CometChatCallEvents.ccOutgoingCall` | `CometChat.Call` | Call initiated |
| `CometChatCallEvents.ccCallRejected` | `CometChat.Call` | Call rejected/cancelled |
| `CometChatCallEvents.ccCallEnded` | `CometChat.Call` | Call session ends |
| `CometChatMessageEvents.ccMessageSent` | `IMessages` | Group call message sent |

All call events are `Subject<CometChat.Call>` from RxJS. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`.

***

## CSS Selectors

| Target | Selector |
| - | - |
| Root | `.cometchat-call-button` |
| Voice button wrapper | `.cometchat-call-button__voice` |
| Video button wrapper | `.cometchat-call-button__video` |
| Button element | `.cometchat-call-button .cometchat-button` |
| Button icon | `.cometchat-call-button .cometchat-button__icon` |
| Outgoing call backdrop | `.cometchat-outgoing-call__backdrop` |


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