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

> 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">
  | Field | Value |
  | - | - |
  | Component | `CometChatCallButtons` |
  | Package | `@cometchat/chat-uikit-react` |
  | Import | `import { CometChatCallButtons } from "@cometchat/chat-uikit-react";` |
  | CSS root class | `.cometchat-call-buttons` |
  | Primary output | Initiates voice/video calls via the SDK and renders the outgoing/ongoing call screens; `onVoiceCallClick` / `onVideoCallClick` override the default initiation |
  | Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user; plus the Calls SDK installed and calling enabled — see [Calling Integration](/ui-kit/react/calling-integration) |
  | Stitching | Pass `user` or `group`; the buttons manage the outgoing/ongoing call lifecycle internally (see [Calling Integration](/ui-kit/react/calling-integration)) |
  | Events emitted | `ui:call/outgoing`, `ui:message/sent` — see [Event System](/ui-kit/react/event-system) |
  | Events received | `ui:call/rejected`, `ui:call/ended` — see [Event System](/ui-kit/react/event-system) |
  | SDK listeners (automatic) | Incoming call events (received/cancelled) and outgoing call events (accepted/rejected) to sync button state and screen transitions |
  | Full props | See [Props](#props) |
</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-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 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-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 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, built via `callSettings`. See [Calling Integration](/ui-kit/react/calling-integration) for call-settings setup.

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


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