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

# Call Buttons

> Voice and video call buttons for user or group conversations, with click overrides, custom button views, and full call lifecycle 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\";",
    "description": "Voice and video call initiation buttons for user or group conversations. Manages the full call lifecycle (outgoing + ongoing) internally.",
    "cssRootClass": ".cometchat-call-buttons",
    "primaryOutput": {
      "description": "Initiates calls via the SDK and renders the outgoing/ongoing call screens"
    },
    "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": {
        "onVoiceCallClick": "(entity: CometChat.User | CometChat.Group) => void",
        "onVideoCallClick": "(entity: CometChat.User | CometChat.Group) => void",
        "onCallEnded": "() => void",
        "onError": "((error: CometChat.CometChatException) => void) | null"
      },
      "visibility": {
        "hideVoiceCallButton": { "type": "boolean", "default": false },
        "hideVideoCallButton": { "type": "boolean", "default": false }
      },
      "viewSlots": {
        "voiceCallButtonView": "ReactNode",
        "videoCallButtonView": "ReactNode"
      },
      "configuration": {
        "callSettingsBuilder": "(isAudioOnlyCall: boolean, user?: CometChat.User, group?: CometChat.Group) => CallSettingsBuilder",
        "className": "string"
      }
    },
    "eventsEmitted": [
      {
        "name": "ui:call/outgoing",
        "payload": "{ call }",
        "description": "User initiates a 1-on-1 voice/video call"
      },
      {
        "name": "ui:message/sent",
        "payload": "{ message, status }",
        "description": "Group call meeting message sent"
      }
    ],
    "eventsReceived": [
      {
        "name": "ui:call/rejected",
        "payload": "{ call }",
        "description": "Re-enables call buttons after the call is rejected"
      },
      {
        "name": "ui:call/ended",
        "payload": "{}",
        "description": "Resets all call state when the call ends"
      }
    ],
    "sdkListeners": [
      "onIncomingCallReceived",
      "onIncomingCallCancelled",
      "onOutgoingCallAccepted",
      "onOutgoingCallRejected"
    ],
    "compositionExample": {
      "description": "Standalone call buttons or embedded in the 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. It is typically embedded in `CometChatMessageHeader`'s auxiliary view or used standalone. The component is self-contained: clicking a button initiates the call, renders `CometChatOutgoingCall` internally while waiting for an answer, transitions to `CometChatOngoingCall` on acceptance, and cleans up when the call ends.

<Info>
  **Live Preview** — interact with the call buttons component.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-calls-cometchatcallbuttons--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-calls-cometchatcallbuttons--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "300px", border: "1px solid #e0e0e0"}} title="CometChat Call Buttons — Default" allow="clipboard-write" />

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

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-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/daaefbc1-55et9fX2XqpdHqxA4UAAAAACAXvO2Cn8xyPfrx48ffz527Nhvf3zg3wuUlUDn3abJAAAAAElFTkSuQmCC.png?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=2172234b1e3560b7b65d994a4cc0ad4e" width="1280" height="232" data-path="images/daaefbc1-55et9fX2XqpdHqxA4UAAAAACAXvO2Cn8xyPfrx48ffz527Nhvf3zg3wuUlUDn3abJAAAAAElFTkSuQmCC.png" />
</Frame>

***

## Minimal Render

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

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

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

***

## Actions and Events

### Callback Props

#### onVoiceCallClick

Overrides the default voice call initiation behavior. When set, clicking the voice button invokes this callback (with the active `user` or `group` entity) instead of initiating a call via the SDK.

```tsx 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={(entity) => {
        console.log("Custom voice call logic for", entity.getName());
      }}
    />
  );
}
```

#### onVideoCallClick

Overrides the default video call initiation behavior.

```tsx 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={(entity) => {
        console.log("Custom video call logic for", entity.getName());
      }}
    />
  );
}
```

#### onCallEnded

Fires after an ongoing call session ends and the component has reset its internal state.

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

function CallButtonsWithEndHandler({ chatUser }: { chatUser: CometChat.User }) {
  return (
    <CometChatCallButtons
      user={chatUser}
      onCallEnded={() => {
        console.log("Call ended");
      }}
    />
  );
}
```

#### onError

Fires on internal errors during call initiation.

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

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

### Events Emitted

UI events this component publishes during the call lifecycle:

| Event              | Payload               | Fires when                             |
| ------------------ | --------------------- | -------------------------------------- |
| `ui:call/outgoing` | `{ call }`            | A 1-on-1 voice/video call is initiated |
| `ui:message/sent`  | `{ message, status }` | A group call meeting message is sent   |

### Events Received

UI events this component subscribes to (published by other components):

| Event              | Payload    | Behavior                                          |
| ------------------ | ---------- | ------------------------------------------------- |
| `ui:call/rejected` | `{ call }` | Clears the active call and re-enables the buttons |
| `ui:call/ended`    | `{}`       | Clears the active call and resets all call state  |

### SDK Listeners (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                           |
| `onOutgoingCallAccepted`  | Transitions to the ongoing call screen            |
| `onOutgoingCallRejected`  | Clears the active call and resets state           |

***

## Call Settings

Customize the calling experience via `callSettingsBuilder`. The builder is forwarded to the internal `CometChatOngoingCall` session.

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

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

***

## Customization

### Custom Button Views

Use `voiceCallButtonView` and `videoCallButtonView` to replace the default buttons while keeping the component's call lifecycle behavior intact.

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

function CallButtonsCustomViews({ chatUser }: { chatUser: CometChat.User }) {
  return (
    <CometChatCallButtons
      user={chatUser}
      voiceCallButtonView={<button className="my-voice-btn">Voice</button>}
      videoCallButtonView={<button className="my-video-btn">Video</button>}
    />
  );
}
```

| Slot                  | Type        | Replaces                  |
| --------------------- | ----------- | ------------------------- |
| `voiceCallButtonView` | `ReactNode` | Default voice call button |
| `videoCallButtonView` | `ReactNode` | Default video call button |

***

## Common Patterns

### Voice-only call button

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

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

### Group call buttons

```tsx 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) provided by the UI Kit. The cascade:

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

### Key Selectors

| Target            | Selector                                      |
| ----------------- | --------------------------------------------- |
| Root              | `.cometchat-call-buttons`                     |
| Button element    | `.cometchat-call-buttons__button`             |
| Button icon       | `.cometchat-call-buttons__button-icon`        |
| Voice button icon | `.cometchat-call-buttons__button-icon--voice` |
| Video button icon | `.cometchat-call-buttons__button-icon--video` |

### Example: Themed call buttons

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/3b154ea9-wPyMSRehgR7CgAAAAAElFTkSuQmCC.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=441712aee7754b3f9efe012898e26ad4" width="1280" height="231" data-path="images/3b154ea9-wPyMSRehgR7CgAAAAAElFTkSuQmCC.png" />
</Frame>

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

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

.cometchat-call-buttons__button-icon--voice,
.cometchat-call-buttons__button-icon--video {
  background-color: #6852d6;
}
```

### Customization Matrix

| What to change                | Where           | Property/API                                  | Example                                                     |
| ----------------------------- | --------------- | --------------------------------------------- | ----------------------------------------------------------- |
| Override call initiation      | Component props | `onVoiceCallClick` / `onVideoCallClick`       | `onVoiceCallClick={(entity) => customCall(entity)}`         |
| Hide a call button            | Component props | `hideVoiceCallButton` / `hideVideoCallButton` | `hideVideoCallButton={true}`                                |
| Replace a button view         | Component props | `voiceCallButtonView` / `videoCallButtonView` | `voiceCallButtonView={<CustomButton />}`                    |
| Customize call settings       | Component props | `callSettingsBuilder`                         | `callSettingsBuilder={(audio) => builder}`                  |
| Change colors, fonts, spacing | Global CSS      | Target `.cometchat-call-buttons` class        | `.cometchat-call-buttons__button-icon { background: red; }` |

***

## Props

All props are optional. Sorted alphabetically.

### callSettingsBuilder

Builder function for customizing the ongoing call settings.

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

***

### className

Additional CSS class name applied to the root container.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| 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`   |

***

### onCallEnded

Callback fired after an ongoing call ends and the component resets its state.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

### onError

Callback fired when the component encounters an error.

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

***

### onVideoCallClick

Overrides the default video call initiation. Receives the active `user` or `group` entity.

|         |                                                       |
| ------- | ----------------------------------------------------- |
| Type    | `(entity: CometChat.User \| CometChat.Group) => void` |
| Default | `undefined`                                           |

***

### onVoiceCallClick

Overrides the default voice call initiation. Receives the active `user` or `group` entity.

|         |                                                       |
| ------- | ----------------------------------------------------- |
| Type    | `(entity: CometChat.User \| CometChat.Group) => void` |
| Default | `undefined`                                           |

***

### user

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

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

***

### videoCallButtonView

Custom view that replaces the default video call button.

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

### voiceCallButtonView

Custom view that replaces the default voice call button.

|         |             |
| ------- | ----------- |
| Type    | `ReactNode` |
| Default | `undefined` |

***

## CSS Selectors

| Target            | Selector                                      |
| ----------------- | --------------------------------------------- |
| Root              | `.cometchat-call-buttons`                     |
| Button element    | `.cometchat-call-buttons__button`             |
| Button icon       | `.cometchat-call-buttons__button-icon`        |
| Voice button icon | `.cometchat-call-buttons__button-icon--voice` |
| Video button icon | `.cometchat-call-buttons__button-icon--video` |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Outgoing Call" icon="phone-arrow-up-right" href="/ui-kit/react/components/outgoing-call">
    Customize the outgoing call screen shown while waiting for an answer
  </Card>

  <Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/react/components/incoming-call">
    Handle incoming call notifications with accept/decline actions
  </Card>

  <Card title="Call Logs" icon="clock-rotate-left" href="/ui-kit/react/components/call-logs">
    Browse call history and re-initiate calls
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>