Delete Bubble - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatDeleteBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatDeleteBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Presentational placeholder bubble for deleted messages.",
  "cssRootClass": ".cometchat-delete-bubble",
  "props": {
    "data": {
      "isSentByMe": { "type": "boolean", "note": "Affects sent vs received styling." },
      "text": { "type": "string", "note": "Defaults to localized \"This message was deleted\"." },
      "className": { "type": "string" }
    }
  }
}

Overview

CometChatDeleteBubble renders the placeholder shown in place of a deleted message — italic, muted text reading “This message was deleted”. It is a presentational component: pass isSentByMe for sent-vs-received styling and an optional text override. The Delete Plugin renders it automatically for any message whose getDeletedAt() is non-null.

Live Preview — interact with the delete bubble.Open in Storybook ↗

Usage

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

function DeletedMessage() {
  return <CometChatDeleteBubble isSentByMe={false} />;
}

Props

isSentByMe

Whether the deleted message was sent by the logged-in user. Affects styling.


Type	`boolean`
Default	`undefined`

text

Optional custom text override. Defaults to the localized “This message was deleted”.


Type	`string`
Default	localized default

className

Additional CSS class applied to the root element.


Type	`string`
Default	`undefined`

CSS Selectors

Target	Selector
Root	`.cometchat-delete-bubble`
Sender / receiver	`.cometchat-delete-bubble--sender` / `.cometchat-delete-bubble--receiver`
Icon	`.cometchat-delete-bubble__icon`
Placeholder text	`.cometchat-delete-bubble__text`

Next Steps

Delete Plugin

How deleted messages are resolved and rendered

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing

​Overview

​Usage

​Props

​isSentByMe

​text

​className

​CSS Selectors

​Next Steps

Delete Plugin

Message Bubble

Theming

Overview

Usage

Props

isSentByMe

text

className

CSS Selectors

Next Steps