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

> A self-extracting bubble that renders call status system messages like 'Missed Call', 'Call Ended', and 'Outgoing Call' from an SDK call message.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Component | `CometChatCallActionBubble` |
  | Package | `@cometchat/chat-uikit-react` |
  | Import | `import { CometChatCallActionBubble } from "@cometchat/chat-uikit-react";` |
  | CSS root class | `.cometchat-action-bubble` |
  | Primary output | None — renders from the SDK message |
  | Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
  | Stitching | None — self-extracting from the SDK message |
  | Full props | See [Props](#props) |
</Accordion>

## Overview

`CometChatCallActionBubble` renders a centered, pill-shaped call status system message — "Missed Call", "Call Ended", "Outgoing Call", etc. It is **self-extracting**: pass the SDK call message and the bubble derives the status text, the status icon, and whether to use the error (missed-call) color itself, reading the logged-in user and locale from hooks. This means it works standalone — no plugin required.

It is the component the [Call Action Plugin](/ui-kit/react/plugins/overview#built-in-plugins) forwards to, and it renders through the presentational `CometChatActionBubble` base primitive.

<Info>
  **Live Preview** — interact with the call action bubble.

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

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

> The component renders nothing while the logged-in user is unavailable.

***

## Usage

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

function CallStatusMessage({ message }: { message: CometChat.BaseMessage }) {
  return <CometChatCallActionBubble message={message} />;
}
```

***

## What It Derives

The bubble inspects the call's status and whether it was initiated by the logged-in user to pick the text, icon, and color.

### Status Text

**Sent by the logged-in user:**

| Call status | Text |
| - | - |
| `initiated` | Outgoing Call |
| `ongoing` | Answered Call |
| `ended` | Call Ended |
| `cancelled` | Cancelled Call |
| `rejected` | Rejected Call |
| `unanswered` | Unanswered Call |
| `busy` | Missed Call |

**Received:**

| Call status | Text |
| - | - |
| `initiated` | Incoming Call |
| `ongoing` | Answered Call |
| `ended` | Call Ended |
| `unanswered` / `cancelled` | Missed Call |
| `busy` | Busy Call |
| `rejected` | Rejected Call |

All text is localized.

### Status Icon

| Condition | Icon class |
| - | - |
| Missed (received `busy` / `unanswered` / `cancelled`) | `--missed-video` / `--missed-audio` |
| Ended | `--call-ended` |
| Sent by me (other statuses) | `--outgoing-video` / `--outgoing-audio` |
| Received (other statuses) | `--incoming-video` / `--incoming-audio` |

Missed calls additionally render in the error (red) color. Icons are rendered via CSS `mask-image` — override the mask in your own CSS to use custom icons.

***

## Props

### message

The call message (audio/video) in the `call` category. The bubble extracts the status, icon, and text from it. **Required.**

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

***

### className

Additional CSS class name applied to the root element.

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

***

## CSS Selectors

The bubble renders through the `CometChatActionBubble` primitive, so it uses the action-bubble selectors.

| Target | Selector |
| - | - |
| Root container | `.cometchat-action-bubble` |
| Icon element | `.cometchat-action-bubble__icon` |
| Icon (error state) | `.cometchat-action-bubble__icon--error` |
| Text element | `.cometchat-action-bubble__text` |
| Text (error state) | `.cometchat-action-bubble__text--error` |
| Missed video icon | `.cometchat-action-bubble__icon--missed-video` |
| Missed audio icon | `.cometchat-action-bubble__icon--missed-audio` |
| Outgoing video icon | `.cometchat-action-bubble__icon--outgoing-video` |
| Outgoing audio icon | `.cometchat-action-bubble__icon--outgoing-audio` |
| Incoming video icon | `.cometchat-action-bubble__icon--incoming-video` |
| Incoming audio icon | `.cometchat-action-bubble__icon--incoming-audio` |
| Call ended icon | `.cometchat-action-bubble__icon--call-ended` |

Override a specific icon's mask:

```css theme={null}
.cometchat-action-bubble__icon--missed-video {
  -webkit-mask-image: url('/my-custom-missed-video.svg');
  mask-image: url('/my-custom-missed-video.svg');
}
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Call Action Plugin" icon="phone" href="/ui-kit/react/plugins/overview#built-in-plugins">
    How call status messages are resolved and rendered in the message list
  </Card>

  <Card title="Group Action Bubble" icon="users" href="/ui-kit/react/components/group-action-bubble">
    System messages for group membership changes
  </Card>

  <Card title="Message Bubble" icon="comment" href="/ui-kit/react/components/message-bubble">
    The wrapper that hosts bubble content
  </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.