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

# Group Action Bubble

> A self-extracting bubble that renders group action system messages like 'Alice joined' and 'Bob was kicked' from an SDK group-action message.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatGroupActionBubble",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatGroupActionBubble } from \"@cometchat/chat-uikit-react\";",
    "description": "Self-extracting bubble for group membership system messages. Derives the localized action text from the SDK group-action message.",
    "cssRootClass": ".cometchat-action-bubble",
    "selfExtracting": true,
    "props": {
      "data": {
        "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The group-action message (member joined/left/added/kicked/banned/scope change). Drives all extraction." },
        "className": { "type": "string", "default": "undefined", "note": "Additional CSS class for the root element" }
      }
    },
    "rendersThrough": "CometChatActionBubble (base primitive)",
    "usedBy": ["CometChatGroupActionPlugin"]
  }
  ```
</Accordion>

## Overview

`CometChatGroupActionBubble` renders a centered, pill-shaped group action system message — "Alice joined", "Admin kicked Bob", "Admin made Bob a moderator", etc. It is **self-extracting**: pass the SDK group-action message and the bubble derives the localized action text itself (via the shared action-text utility), reading the locale from hooks. This means it works standalone — no plugin required.

It is the component the [Group Action Plugin](/ui-kit/react/plugins/overview#built-in-plugins) forwards to, and it renders through the presentational `CometChatActionBubble` base primitive. Group action bubbles have no icon and no sender attribution.

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

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

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

> The component renders nothing if the derived action text is empty.

***

## Usage

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

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

***

## Supported Actions

The bubble derives localized text for each group membership change:

| Action          | Example text                 |
| --------------- | ---------------------------- |
| Member joined   | "Alice joined"               |
| Member left     | "Bob left"                   |
| Member kicked   | "Admin kicked Bob"           |
| Member banned   | "Admin banned Charlie"       |
| Member unbanned | "Admin unbanned Charlie"     |
| Scope changed   | "Admin made Bob a moderator" |
| Member added    | "Admin added Dave"           |

***

## Props

### message

The group-action message (member joined / left / added / kicked / banned / scope change). The bubble extracts the localized action 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`       |
| Action text    | `.cometchat-action-bubble__text` |

***

## Next Steps

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

  <Card title="Call Action Bubble" icon="phone" href="/ui-kit/react/components/call-action-bubble">
    System messages for call status
  </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>