Skip to main content
{
  "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.
Typestring
RequiredYes

​
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.
Typestring
Defaultundefined (no icon shown)
Built-in icon classes:
ClassIcon
cometchat-action-bubble__icon--missed-videoMissed video call
cometchat-action-bubble__icon--missed-audioMissed audio call
cometchat-action-bubble__icon--outgoing-videoOutgoing video call
cometchat-action-bubble__icon--outgoing-audioOutgoing audio call
cometchat-action-bubble__icon--incoming-videoIncoming video call
cometchat-action-bubble__icon--incoming-audioIncoming audio call
cometchat-action-bubble__icon--call-endedCall ended

​
iconErrorColor

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

​
className

Additional CSS class name applied to the root element.
Typestring
Defaultundefined

​
CSS Selectors

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