> ## 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 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">
  ```json theme={null}
  {
    "component": "CometChatCallActionBubble",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatCallActionBubble } from \"@cometchat/chat-uikit-react\";",
    "description": "Self-extracting bubble for call status system messages. Derives the status text, icon, and error color from the SDK call message and the logged-in user.",
    "cssRootClass": ".cometchat-action-bubble",
    "selfExtracting": true,
    "props": {
      "data": {
        "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The call message (audio/video) in the 'call' category. Drives all extraction." },
        "className": { "type": "string", "default": "undefined", "note": "Additional CSS class for the root element" }
      }
    },
    "rendersThrough": "CometChatActionBubble (base primitive)",
    "usedBy": ["CometChatCallActionPlugin"]
  }
  ```
</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>