> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Outgoing Call

> Displays the outgoing call screen with receiver info and a cancel button while waiting for the call to be answered.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatOutgoingCall` |
  | Package | `@cometchat/chat-uikit-react` |
  | Import | `import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";` |
  | CSS root class | `.cometchat-outgoing-call` |
  | Primary output | `onCallCanceled: () => void` — fires when the user cancels the call |
  | Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
  | Stitching | Pass the outgoing `call` object; wire `onCallCanceled` to dismiss the screen |
  | Full props | See [Props](#props) |
</Accordion>

## Overview

`CometChatOutgoingCall` is a purely presentational component that displays the outgoing call screen while waiting for the receiver to answer. It shows the receiver's name, avatar, a "Calling..." subtitle, and an end-call button.

<Info>
  **Live Preview** — interact with the default outgoing call screen.

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

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

The component handles:

* Displaying receiver name and avatar from the `call` object
* "Calling..." subtitle text
* End-call/cancel button
* Outgoing call sound playback (looping while mounted, pauses on unmount)

> **Required prop:** The `call` prop is required. The component needs a valid `CometChat.Call` object to render receiver information.

> **Typical usage:** `CometChatOutgoingCall` is typically rendered by `CometChatMessageHeader` or `CometChatIncomingCall` internally when a call is initiated, but it can be used standalone.

***

## Usage

### Flat API

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

function OutgoingCallScreen({ call }: { call: CometChat.Call }) {
  return (
    <CometChatOutgoingCall
      call={call}
      onCallCanceled={() => {
        console.log("Call canceled by user");
        // Cancel the call via SDK
        CometChat.rejectCall(call.getSessionId(), CometChat.CALL_STATUS.CANCELLED);
      }}
    />
  );
}
```

### Standalone Usage Example

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

function CallManager() {
  const [outgoingCall, setOutgoingCall] = useState<CometChat.Call | null>(null);

  const initiateCall = async (receiverUID: string) => {
    const call = new CometChat.Call(
      receiverUID,
      CometChat.CALL_TYPE.VIDEO,
      CometChat.RECEIVER_TYPE.USER
    );
    const initiatedCall = await CometChat.initiateCall(call);
    setOutgoingCall(initiatedCall);
  };

  const cancelCall = () => {
    if (outgoingCall) {
      CometChat.rejectCall(
        outgoingCall.getSessionId(),
        CometChat.CALL_STATUS.CANCELLED
      );
      setOutgoingCall(null);
    }
  };

  return (
    <div>
      {outgoingCall && (
        <CometChatOutgoingCall
          call={outgoingCall}
          onCallCanceled={cancelCall}
        />
      )}
    </div>
  );
}
```

***

## Actions and Events

### Callback Props

| Prop | Signature | Fires when |
| - | - | - |
| `onCallCanceled` | `() => void` | User clicks the cancel/end button |
| `onError` | `((error: CometChat.CometChatException) => void) \| null` | SDK error occurs |

### Events Emitted

This component does not emit any UI events.

### Events Received

This component does not subscribe to any UI events from other components.

### SDK Listeners (Automatic)

This component does not attach any SDK listeners. It is purely presentational — the parent component is responsible for managing call state transitions (e.g., listening for `onOutgoingCallAccepted` or `onOutgoingCallRejected`).

***

## Customization

### View Props

Use view props to replace sections of the default UI while keeping the component's behavior intact:

```tsx theme={null}
<CometChatOutgoingCall
  call={call}
  titleView={<span className="custom-title">{call.getReceiver().getName()}</span>}
  subtitleView={<span>Ringing...</span>}
  avatarView={<img src={call.getReceiver().getAvatar()} alt="avatar" />}
  cancelButtonView={<button onClick={handleCancel}>End Call</button>}
/>
```

| Slot | Type | Replaces |
| - | - | - |
| `titleView` | `ReactNode` | Receiver name |
| `subtitleView` | `ReactNode` | "Calling..." text |
| `avatarView` | `ReactNode` | Receiver avatar |
| `cancelButtonView` | `ReactNode` | End-call button |

#### titleView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/pxaw3CU3ww5jOcRj/images/294edd18-outgoing_calls_title_view_web_screens-bc3f5853236e03acb85aa532fd69706b.png?fit=max&auto=format&n=pxaw3CU3ww5jOcRj&q=85&s=a598ad2e316df20b84e4a7109cabdbe4" width="1282" height="802" data-path="images/294edd18-outgoing_calls_title_view_web_screens-bc3f5853236e03acb85aa532fd69706b.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";

    function OutgoingCallCustomTitle({ call }: { call: CometChat.Call }) {
      return (
        <CometChatOutgoingCall
          call={call}
          titleView={
            <div className="outgoing-call__title">
              {call.getCallInitiator().getName()} {" <> "} {call.getCallReceiver().getName()}
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .outgoing-call__title {
      color: #141414;
      text-align: center;
      font: 500 24px Roboto;
    }
    ```
  </Tab>
</Tabs>

#### subtitleView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/JexqAkK-CH6gZ6Dw/images/904cc985-outgoing_calls_subtitle_view_web_screens-ca75b11cc49d9955e040c37f05853a34.png?fit=max&auto=format&n=JexqAkK-CH6gZ6Dw&q=85&s=e9576e72df76f2f4da5fa7fab29a7cbe" width="1282" height="802" data-path="images/904cc985-outgoing_calls_subtitle_view_web_screens-ca75b11cc49d9955e040c37f05853a34.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";

    function OutgoingCallCustomSubtitle({ call }: { call: CometChat.Call }) {
      return (
        <CometChatOutgoingCall
          call={call}
          subtitleView={
            <div className="outgoing-call__subtitle">
              <div className="outgoing-call__subtitle-icon" />
              {"Calling..."}
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .outgoing-call__subtitle {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 8px;
      color: #727272;
      text-align: center;
      font: 400 16px Roboto;
    }

    .outgoing-call__subtitle-icon {
      background: #a1a1a1;
      height: 24px;
      width: 24px;
    }
    ```
  </Tab>
</Tabs>

#### avatarView

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-native-development/PpdslejclDqZ_QuV/images/d242dfe4-outgoing_calls_avatar_view_web_screens-e4517aa9fc688283808448070a0d3c78.png?fit=max&auto=format&n=PpdslejclDqZ_QuV&q=85&s=33e80079f56c0594a5934d8390886471" width="1282" height="802" data-path="images/d242dfe4-outgoing_calls_avatar_view_web_screens-e4517aa9fc688283808448070a0d3c78.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatOutgoingCall, CometChatAvatar } from "@cometchat/chat-uikit-react";

    function OutgoingCallCustomAvatar({ call }: { call: CometChat.Call }) {
      return (
        <CometChatOutgoingCall
          call={call}
          avatarView={
            <div className="outgoing-call__avatar">
              <CometChatAvatar.Root
                name={call.getCallReceiver()?.getName()}
                image={(call.getCallReceiver() as CometChat.User)?.getAvatar()}
              >
                <CometChatAvatar.Image />
                <CometChatAvatar.Initials />
              </CometChatAvatar.Root>
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .outgoing-call__avatar .cometchat-avatar {
      width: 160px;
      height: 160px;
      border-radius: 20px;
    }
    ```
  </Tab>
</Tabs>

### CSS Styling

Override design tokens on the component selector:

```css theme={null}
.cometchat-outgoing-call {
  --cometchat-background-color-01: #1a1a2e;
  --cometchat-text-color-primary: #ffffff;
}

.cometchat-outgoing-call__button {
  background: var(--cometchat-error-color);
}
```

***

## Props

The `call` prop is required. All other props are optional.

***

### call

The CometChat call object representing the outgoing call. **Required.**

| | |
| - | - |
| Type | `CometChat.Call` |
| Required | Yes |

***

### disableSoundForCalls

Disable the outgoing call sound.

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

***

### customSoundForCalls

Custom sound URL to play during the outgoing call (replaces the built-in sound).

| | |
| - | - |
| Type | `string` |
| Default | Built-in outgoing call sound |

***

### onCallCanceled

Callback when the user clicks the cancel/end button.

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

***

### onError

Callback when an SDK error occurs.

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

***

### titleView

Custom view that replaces the receiver name.

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

***

### subtitleView

Custom view that replaces the "Calling..." text.

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

***

### avatarView

Custom view that replaces the receiver avatar.

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

***

### cancelButtonView

Custom view that replaces the end-call button.

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

***

### className

Additional CSS class name applied to the root element.

| | |
| - | - |
| Type | `string` |
| Default | `undefined` |

***

## CSS Selectors

| Target | Selector |
| - | - |
| Root container | `.cometchat-outgoing-call` |
| Title container | `.cometchat-outgoing-call__title-container` |
| Title | `.cometchat-outgoing-call__title` |
| Subtitle | `.cometchat-outgoing-call__subtitle` |
| Avatar | `.cometchat-outgoing-call__avatar` |
| Cancel button | `.cometchat-outgoing-call__button` |
| Cancel button icon | `.cometchat-outgoing-call__button-icon` |

***

## Next Steps

<CardGroup cols={2}>
  <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.