Delete Bubble - CometChat Docs

The CometChatDeleteBubble component is a simple presentational Angular component that displays a placeholder indicating a message has been deleted. Unlike other message bubble components, it does NOT accept a CometChat message object - only simple inputs for styling and text customization.

Overview

The Delete Bubble component provides a clear visual indicator that a message was deleted, with support for both sender (outgoing) and receiver (incoming) styling variants:

Delete Icon Display: Shows a recognizable delete/trash icon
Localized Default Text: Displays “This message was deleted” in the user’s language
Custom Text Support: Allows overriding the default text
Sender/Receiver Variants: Different styling for outgoing vs incoming messages
Full Accessibility Support: ARIA role and labels for screen readers
CSS Variable-Based Theming: Easy customization via CSS variables

Live Preview — Default delete bubble preview. Open in Storybook ↗

Basic Usage

Simple Delete Bubble (Receiver Variant)

import { Component } from '@angular/core';
import { CometChatDeleteBubbleComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat-message',
  standalone: true,
  imports: [CometChatDeleteBubbleComponent],
  template: `
    <cometchat-delete-bubble></cometchat-delete-bubble>
  `
})
export class ChatMessageComponent {}

Sender Variant (Outgoing Message)

import { Component } from '@angular/core';
import { CometChatDeleteBubbleComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat-message',
  standalone: true,
  imports: [CometChatDeleteBubbleComponent],
  template: `
    <cometchat-delete-bubble
      [isSentByMe]="true"
    ></cometchat-delete-bubble>
  `
})
export class ChatMessageComponent {}

Custom Text

import { Component } from '@angular/core';
import { CometChatDeleteBubbleComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat-message',
  standalone: true,
  imports: [CometChatDeleteBubbleComponent],
  template: `
    <cometchat-delete-bubble
      [text]="'Message removed by admin'"
    ></cometchat-delete-bubble>
  `
})
export class ChatMessageComponent {}

Incoming vs Outgoing Messages

import { Component } from '@angular/core';
import { CometChatDeleteBubbleComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-message-list',
  standalone: true,
  imports: [CometChatDeleteBubbleComponent],
  template: `
    <!-- Incoming deleted message (receiver variant) -->
    <cometchat-delete-bubble
      [isSentByMe]="false"
    ></cometchat-delete-bubble>

    <!-- Outgoing deleted message (sender variant) -->
    <cometchat-delete-bubble
      [isSentByMe]="true"
    ></cometchat-delete-bubble>
  `
})
export class MessageListComponent {}

Properties

Property	Type	Default	Description
`isSentByMe`	`boolean`	`false`	Determines sender (outgoing) or receiver (incoming) styling. When `true`, applies primary color background with white text/icon. When `false`, applies neutral background with neutral text/icon
`text`	`string`	`undefined`	Optional custom text to display instead of the default localized text. If not provided, uses the “message_deleted” localization key

Customization

Styling with CSS Variables

The Delete Bubble component uses CSS variables exclusively for easy customization:

/* Custom delete bubble styling */
cometchat-delete-bubble {
  /* Spacing */
  --cometchat-spacing-1: 4px;
  --cometchat-spacing-2: 8px;

  /* Typography */
  --cometchat-font-body-regular: 400 14px/16.8px 'Roboto';

  /* Colors - Sender variant */
  --cometchat-primary-color: #6852D6;
  --cometchat-static-white: #FFFFFF;

  /* Colors - Receiver variant */
  --cometchat-neutral-color-300: #E8E8E8;
  --cometchat-neutral-color-600: #727272;

  /* Border radius */
  --cometchat-radius-3: 12px;
}

Available CSS Variables

Variable	Purpose	Default
`--cometchat-spacing-1`	Gap between icon and text	`4px`
`--cometchat-spacing-2`	Container padding	`8px`
`--cometchat-font-body-regular`	Text font style	`400 14px/16.8px Roboto`
`--cometchat-primary-color`	Sender variant background	`#6852D6`
`--cometchat-static-white`	Sender variant text/icon color	`#FFFFFF`
`--cometchat-neutral-color-300`	Receiver variant background	`#E8E8E8`
`--cometchat-neutral-color-600`	Receiver variant text/icon color	`#727272`
`--cometchat-radius-3`	Border radius	`12px`

Custom Color Schemes

/* Blue theme for sender variant */
.theme-blue cometchat-delete-bubble {
  --cometchat-primary-color: #1976D2;
}

/* Green theme for sender variant */
.theme-green cometchat-delete-bubble {
  --cometchat-primary-color: #4CAF50;
}

/* Dark theme */
[data-theme="dark"] cometchat-delete-bubble {
  --cometchat-neutral-color-300: #424242;
  --cometchat-neutral-color-600: #B0B0B0;
}

Custom Icon Styling

The delete icon uses CSS mask technique, allowing color customization via the background property:

/* Custom icon color for receiver variant */
::ng-deep .cometchat-delete-bubble--receiver .cometchat-delete-bubble__icon {
  background: #FF5722;
}

/* Custom icon size */
::ng-deep .cometchat-delete-bubble__icon {
  width: 20px;
  height: 20px;
}

Accessibility

The Delete Bubble component is fully accessible and follows WCAG 2.1 Level AA guidelines.

WCAG 2.1 Compliance

The component meets the following WCAG 2.1 success criteria:

✅ 1.1.1 Non-text Content (Level A): The container has an aria-label with the displayed text
✅ 1.3.1 Info and Relationships (Level A): Proper semantic structure with role=“status”
✅ 1.4.3 Contrast (Minimum) (Level AA): Sufficient color contrast for text readability
✅ 4.1.2 Name, Role, Value (Level A): All elements have accessible names and roles

ARIA Attributes

The component automatically applies appropriate ARIA attributes:

Attribute	Element	Value	Purpose
`role`	Container	`"status"`	Indicates this is a status message
`aria-label`	Container	Displayed text	Provides accessible name for screen readers
`aria-hidden`	Icon	`"true"`	Hides decorative icon from screen readers

Screen readers announce the delete bubble as a status message with the displayed text (either the localized default “This message was deleted” or custom text). The role="status" attribute ensures that screen readers treat this as an informational message rather than interactive content.

Color Contrast

Both sender and receiver variants maintain sufficient color contrast:

Sender variant: White text on primary color background (typically purple #6852D6)
Receiver variant: Neutral-600 text on neutral-300 background

Best Practices

Use the delete bubble to indicate that a message was deleted, providing users with context about missing content in the conversation.

The component does NOT accept a CometChat message object. You must determine the isSentByMe value based on the original message sender.

The default text is automatically localized. Only provide custom text via the text input if you need to override the default message.

For consistent styling, use the sender variant (isSentByMe="true") for messages the logged-in user deleted, and the receiver variant for messages deleted by others.

CometChatActionBubble: Displays action/system messages
CometChatTextBubble: Displays text messages
CometChatMessageList: Displays lists of messages including deleted message placeholders

Technical Details

Standalone Component: Can be imported and used independently
Change Detection: Uses OnPush change detection strategy for optimal performance
Dependencies: Uses CometChatLocalize for default text localization
Bundle Size: Minimal footprint (~2KB)
BEM CSS: Follows Block Element Modifier naming convention
Accessibility: WCAG 2.1 Level AA compliant
Max Width: 270px to maintain consistent bubble sizing

​Overview

​Basic Usage

​Simple Delete Bubble (Receiver Variant)

​Sender Variant (Outgoing Message)

​Custom Text

​Incoming vs Outgoing Messages

​Properties

​Customization

​Styling with CSS Variables

​Available CSS Variables

​Custom Color Schemes

​Custom Icon Styling

​Accessibility

​WCAG 2.1 Compliance

​ARIA Attributes

​Screen Reader Behavior

​Color Contrast

​Best Practices

​Related Components

​Technical Details

Overview

Basic Usage

Simple Delete Bubble (Receiver Variant)

Sender Variant (Outgoing Message)

Custom Text

Incoming vs Outgoing Messages

Properties

Customization

Styling with CSS Variables

Available CSS Variables

Custom Color Schemes

Custom Icon Styling

Accessibility

WCAG 2.1 Compliance

ARIA Attributes

Screen Reader Behavior

Color Contrast

Best Practices

Related Components

Technical Details