Skip to main content
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

PropertyTypeDefaultDescription
isSentByMebooleanfalseDetermines 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
textstringundefinedOptional 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

VariablePurposeDefault
--cometchat-spacing-1Gap between icon and text4px
--cometchat-spacing-2Container padding8px
--cometchat-font-body-regularText font style400 14px/16.8px Roboto
--cometchat-primary-colorSender variant background#6852D6
--cometchat-static-whiteSender variant text/icon color#FFFFFF
--cometchat-neutral-color-300Receiver variant background#E8E8E8
--cometchat-neutral-color-600Receiver variant text/icon color#727272
--cometchat-radius-3Border radius12px

​
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:
AttributeElementValuePurpose
roleContainer"status"Indicates this is a status message
aria-labelContainerDisplayed textProvides accessible name for screen readers
aria-hiddenIcon"true"Hides decorative icon from screen readers

​
Screen Reader Behavior

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