Action Bubble - CometChat Docs

AI Integration Quick Reference

{
  "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)"
  ]
}

Overview

CometChatActionBubble renders a centered, pill-shaped system message. It is used internally by the Group Action Plugin for group membership messages and the Call Action Plugin 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)

import { CometChatActionBubble } from "@cometchat/chat-uikit-react";

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

With Icon (call status)

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:

<CometChatActionBubble
  messageText="Custom Action"
  iconClassName="my-custom-icon"
/>

.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:

.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:

.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:

Group Action Plugin — passes only messageText (no icon). Handles group membership changes (join, leave, kick, ban, scope change).
Call Action Plugin — 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:

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

Group Action Plugin

System messages for group membership changes

Call Action Plugin

System messages for call status

Custom Plugin

Build your own message plugin

Theming

Customize colors, fonts, and spacing

​Overview

​Usage

​Basic (text only)

​With Icon (call status)

​With Custom Icon

​Props

​messageText

​iconClassName

​iconErrorColor

​className

​CSS Selectors

​CSS Styling

​How It Works

​Next Steps