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

# Delete Bubble

> A presentational bubble that renders a 'This message was deleted' placeholder.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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" }
      }
    }
  }
  ```
</Accordion>

## 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](/ui-kit/react/plugins/overview#built-in-plugins) renders it automatically for any message whose `getDeletedAt()` is non-null.

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

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/base-elements-delete-bubble--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=base-elements-delete-bubble--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "250px", border: "1px solid #e0e0e0"}} title="CometChat Delete Bubble — Default" allow="clipboard-write" />

***

## Usage

```tsx theme={null}
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

<CardGroup cols={2}>
  <Card title="Delete Plugin" icon="trash" href="/ui-kit/react/plugins/overview#built-in-plugins">
    How deleted messages are resolved and rendered
  </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>