Call Buttons

Voice and video call buttons that initiate calls for a user or group conversation.

AI Integration Quick Reference

{
  "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 buttons that initiate calls for a user or group conversation. Requires the optional @cometchat/calls-sdk-javascript peer dependency and callingEnabled on CometChatProvider.",
  "cssRootClass": ".cometchat-call-buttons",
  "lazyTier": "Tier 2 — loaded only when callingEnabled is true",
  "primaryOutput": {
    "prop": "onVoiceCallClick",
    "type": "(user: CometChat.User | undefined, group: CometChat.Group | undefined) => void"
  },
  "props": {
    "data": {
      "user": { "type": "CometChat.User", "default": "—" },
      "group": { "type": "CometChat.Group", "default": "—" }
    },
    "callbacks": {
      "onVoiceCallClick": { "type": "(user?: CometChat.User, group?: CometChat.Group) => void", "default": "—" },
      "onVideoCallClick": { "type": "(user?: CometChat.User, group?: CometChat.Group) => void", "default": "—" },
      "onError": { "type": "(error: unknown) => void", "default": "—" }
    },
    "visibility": {
      "hideVoiceCall": { "type": "boolean", "default": "false" },
      "hideVideoCall": { "type": "boolean", "default": "false" }
    },
    "viewSlots": {
      "voiceCallIconView": { "type": "ReactNode", "default": "—" },
      "videoCallIconView": { "type": "ReactNode", "default": "—" }
    }
  },
  "events": [],
  "sdkListeners": [],
  "types": {}
}

Where It Fits

CometChatCallButtons renders voice and video call action buttons for a given user or group. It is typically placed inside a message header or a conversation detail panel. The component is part of the Calling feature set — it requires the optional @cometchat/calls-sdk-javascript peer dependency and only loads when callingEnabled is set to true on CometChatProvider.

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatProvider, CometChatMessageHeader, CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function ChatWithCalling({ chatUser }: { chatUser: CometChat.User }) {
  return (
    <CometChatProvider appId="APP_ID" region="REGION" authKey="AUTH_KEY" callingEnabled={true}>
      <CometChatMessageHeader user={chatUser} />
      <CometChatCallButtons user={chatUser} />
    </CometChatProvider>
  );
}

export default ChatWithCalling;

If callingEnabled is not set to true on CometChatProvider, CometChatCallButtons will not render. The component is lazy-loaded (Tier 2) and only included in the bundle when calling is enabled.

Minimal Render

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

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

Root CSS class: .cometchat-call-buttons

You must pass either user or group. If neither is provided, the component renders nothing.

Filtering / Data Configuration

CometChatCallButtons does not use a request builder — it operates on the user or group prop you provide directly. The call is initiated against whichever entity is passed.

User vs. Group

Prop	Call type	Behavior
user	1-on-1 call	Initiates a direct call to the specified user
group	Group call	Initiates a group call session for the specified group

If both user and group are provided, user takes precedence.

Actions and Events

Callback Props

onVoiceCallClick

Fires when the voice call button is clicked. Use it to override the default call initiation behavior.

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function CallButtonsWithCustomVoice({ user }: { user: CometChat.User }) {
  return (
    <CometChatCallButtons
      user={user}
      onVoiceCallClick={(u, g) => {
        console.log("Custom voice call initiated for:", u?.getName() ?? g?.getName());
      }}
    />
  );
}

onVideoCallClick

Fires when the video call button is clicked. Use it to override the default call initiation behavior.

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function CallButtonsWithCustomVideo({ user }: { user: CometChat.User }) {
  return (
    <CometChatCallButtons
      user={user}
      onVideoCallClick={(u, g) => {
        console.log("Custom video call initiated for:", u?.getName() ?? g?.getName());
      }}
    />
  );
}

onError

Fires when an error occurs while initiating a call.

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function CallButtonsWithErrorHandler({ user }: { user: CometChat.User }) {
  return (
    <CometChatCallButtons
      user={user}
      onError={(error) => console.error("Call error:", error)}
    />
  );
}

Custom View Slots

Slot	Type	Replaces
voiceCallIconView	ReactNode	Default voice call icon button
videoCallIconView	ReactNode	Default video call icon button

Custom call icons

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function CustomCallIcons({ user }: { user: CometChat.User }) {
  return (
    <CometChatCallButtons
      user={user}
      voiceCallIconView={<span style={{ fontSize: 20 }}>📞</span>}
      videoCallIconView={<span style={{ fontSize: 20 }}>📹</span>}
    />
  );
}

Common Patterns

Show only video call for groups

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function GroupVideoOnly({ group }: { group: CometChat.Group }) {
  return <CometChatCallButtons group={group} hideVoiceCall={true} />;
}

Embed in message header

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatMessageHeader, CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function HeaderWithCalling({ user }: { user: CometChat.User }) {
  return (
    <CometChatMessageHeader
      user={user}
      trailingView={<CometChatCallButtons user={user} />}
    />
  );
}

Conditional rendering based on calling availability

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallButtons } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function ConditionalCallButtons({ user, callingAvailable }: { user: CometChat.User; callingAvailable: boolean }) {
  if (!callingAvailable) return null;
  return <CometChatCallButtons user={user} />;
}

CSS Architecture

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

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

Example: Custom button styling

App.css

.cometchat-call-buttons {
  gap: 12px;
}

.cometchat-call-buttons__voice-button {
  color: var(--cometchat-success-color, #28a745);
}

.cometchat-call-buttons__video-button {
  color: var(--cometchat-primary-color, #3399ff);
}

Props

All props are optional. You must pass either user or group for the component to render.

---

user

The user to initiate calls with. Pass this for 1-on-1 calling.

Type	CometChat.User
Default	—

---

group

The group to initiate calls with. Pass this for group calling.

Type	CometChat.Group
Default	—

---

hideVoiceCall

Hide the voice call button.

Type	boolean
Default	false

---

hideVideoCall

Hide the video call button.

Type	boolean
Default	false

---

onVoiceCallClick

Callback fired when the voice call button is clicked. If not provided, the component uses its default call initiation logic.

Type	(user?: CometChat.User, group?: CometChat.Group) => void
Default	—

---

onVideoCallClick

Callback fired when the video call button is clicked. If not provided, the component uses its default call initiation logic.

Type	(user?: CometChat.User, group?: CometChat.Group) => void
Default	—

---

onError

Callback fired when an error occurs during call initiation.

Type	(error: unknown) => void
Default	—

---

voiceCallIconView

Custom view to replace the default voice call icon button.

Type	ReactNode
Default	—

---

videoCallIconView

Custom view to replace the default video call icon button.

Type	ReactNode
Default	—

---

Events

CometChatCallButtons does not emit global UI events. All communication happens through callback props (onVoiceCallClick, onVideoCallClick, onError).

Event	Payload	Fires when
onVoiceCallClick	CometChat.User | undefined, CometChat.Group | undefined	Voice call button clicked
onVideoCallClick	CometChat.User | undefined, CometChat.Group | undefined	Video call button clicked
onError	unknown	An error occurs during call initiation

CSS Selectors

Target	Selector
Root	.cometchat-call-buttons
Voice call button	.cometchat-call-buttons__voice-button
Video call button	.cometchat-call-buttons__video-button
Voice call icon	.cometchat-call-buttons__voice-button-icon
Video call icon	.cometchat-call-buttons__video-button-icon
Disabled state	.cometchat-call-buttons--disabled