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

# Action Bubble

> A centered pill-shaped system message bubble used for group actions and call status messages.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatActionBubble",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatActionBubble } from \"@cometchat/chat-uikit-react\";",
    "cssImport": "import \"@cometchat/chat-uikit-react/styles\";",
    "description": "A centered pill-shaped system message bubble used for group actions and call status messages.",
    "cssRootClass": ".cometchat-action-bubble",
    "primaryOutput": {
      "prop": "messageText",
      "type": "string"
    },
    "props": {
      "data": {
        "messageText": { "type": "string", "required": true, "note": "The action text to display (e.g., 'Alice joined the group', 'Missed Call')" },
        "iconClassName": { "type": "string", "default": "undefined", "note": "CSS class name for an optional icon before the text. Icon rendered via CSS mask." },
        "iconErrorColor": { "type": "boolean", "default": "false", "note": "Whether to use error color for icon and text (e.g., missed calls)" },
        "className": { "type": "string", "default": "undefined", "note": "Additional CSS class name for the root element" }
      }
    },
    "builtInIconClasses": [
      "cometchat-action-bubble__icon--missed-video",
      "cometchat-action-bubble__icon--missed-audio",
      "cometchat-action-bubble__icon--outgoing-video",
      "cometchat-action-bubble__icon--outgoing-audio",
      "cometchat-action-bubble__icon--incoming-video",
      "cometchat-action-bubble__icon--incoming-audio",
      "cometchat-action-bubble__icon--call-ended"
    ],
    "usedBy": [
      "CometChatGroupActionPlugin (group member join/leave/kick/ban messages)",
      "CometChatCallActionPlugin (call status messages)"
    ]
  }
  ```
</Accordion>

## Overview

`CometChatActionBubble` renders a centered, pill-shaped system message. It is used internally by the [Group Action Plugin](/ui-kit/react/v7/plugins/group-action) for group membership messages and the [Call Action Plugin](/ui-kit/react/v7/plugins/call-action) for call status messages.

The component renders nothing if `messageText` is empty or whitespace-only.

Key characteristics:

* **Centered pill layout** — no left/right alignment, no avatar, no timestamp
* **Optional icon** — rendered via CSS `mask-image`, controlled by a CSS class name (not a URL)
* **Error color state** — for missed calls or error scenarios, colors both icon and text red
* **Accessible** — uses `role="status"` and `aria-label`

***

## Usage

### Basic (text only)

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

function GroupJoinedMessage() {
  return <CometChatActionBubble messageText="Alice joined the group" />;
}
```

### With Icon (call status)

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

function MissedCallMessage() {
  return (
    <CometChatActionBubble
      messageText="Missed Call"
      iconClassName="cometchat-action-bubble__icon--missed-audio"
      iconErrorColor={true}
    />
  );
}
```

### With Custom Icon

Provide your own CSS class that defines a `mask-image`:

```tsx theme={null}
<CometChatActionBubble
  messageText="Custom Action"
  iconClassName="my-custom-icon"
/>
```

```css theme={null}
.my-custom-icon {
  -webkit-mask-image: url('/assets/my-icon.svg');
  mask-image: url('/assets/my-icon.svg');
}
```

***

## Props

***

### messageText

The action text to display. The component renders nothing if this is empty or whitespace-only.

|          |          |
| -------- | -------- |
| Type     | `string` |
| Required | Yes      |

***

### iconClassName

Optional CSS class name for the icon displayed before the text. The icon element uses CSS `mask-image` for rendering, which allows color control via `background`. Pass one of the built-in classes or a custom class that defines a `mask-image`.

|         |                             |
| ------- | --------------------------- |
| Type    | `string`                    |
| Default | `undefined` (no icon shown) |

**Built-in icon classes:**

| Class                                           | Icon                |
| ----------------------------------------------- | ------------------- |
| `cometchat-action-bubble__icon--missed-video`   | Missed video call   |
| `cometchat-action-bubble__icon--missed-audio`   | Missed audio call   |
| `cometchat-action-bubble__icon--outgoing-video` | Outgoing video call |
| `cometchat-action-bubble__icon--outgoing-audio` | Outgoing audio call |
| `cometchat-action-bubble__icon--incoming-video` | Incoming video call |
| `cometchat-action-bubble__icon--incoming-audio` | Incoming audio call |
| `cometchat-action-bubble__icon--call-ended`     | Call ended          |

***

### iconErrorColor

When `true`, applies error color (red) to both the icon and the text. Used for missed call scenarios.

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

***

### className

Additional CSS class name applied to the root element.

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

***

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

### CSS Styling

Override design tokens on the component selector:

```css theme={null}
.cometchat-action-bubble {
  --cometchat-background-color-02: #2d2d2d;
  --cometchat-border-color-default: rgba(255, 255, 255, 0.1);
  --cometchat-text-color-secondary: rgba(255, 255, 255, 0.7);
}
```

Override a specific icon:

```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');
}
```

***

## How It Works

`CometChatActionBubble` is a presentational component — it receives its data as props and renders accordingly. It does not subscribe to events, manage state, or call the SDK.

It is consumed by two plugins:

1. **[Group Action Plugin](/ui-kit/react/v7/plugins/group-action)** — passes only `messageText` (no icon). Handles group membership changes (join, leave, kick, ban, scope change).

2. **[Call Action Plugin](/ui-kit/react/v7/plugins/call-action)** — passes `messageText`, `iconClassName`, and `iconErrorColor`. Handles call status messages (missed, outgoing, incoming, ended).

You can also use it directly in custom plugins for any centered system message:

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

const MyCustomPlugin = {
  id: 'my-custom-action',
  messageTypes: ['myType'],
  messageCategories: ['action'],
  renderBubble(message) {
    return (
      <CometChatActionBubble
        messageText={message.getData().text}
        iconClassName="my-custom-action-icon"
      />
    );
  },
  getOptions() {
    return [];
  },
};
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Group Action Plugin" icon="users" href="/ui-kit/react/v7/plugins/group-action">
    System messages for group membership changes
  </Card>

  <Card title="Call Action Plugin" icon="phone" href="/ui-kit/react/v7/plugins/call-action">
    System messages for call status
  </Card>

  <Card title="Custom Plugin" icon="puzzle-piece" href="/ui-kit/react/v7/plugins/custom-plugin">
    Build your own message plugin
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/v7/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>