Message Bubble Styling

Customize message bubble appearance including colors, borders, spacing, and alignment.

AI Integration Quick Reference

Field	Value
Bubble wrapper class	.cometchat-message-bubble
Incoming content	.cometchat-message-bubble__content--incoming
Outgoing content	.cometchat-message-bubble__content--outgoing
Key tokens	--cometchat-neutral-color-300 (incoming bg), --cometchat-primary-color (outgoing bg)

Overview

Message bubbles are the core visual element of the chat. This page covers how to customize their appearance — background colors, border radius, spacing, and text colors — using CSS variable overrides.

---

Bubble Structure

Each message bubble has this DOM structure:

.cometchat-message-bubble
  ├── .cometchat-message-bubble__leading (avatar)
  ├── .cometchat-message-bubble__body
  │   ├── .cometchat-message-bubble__header (sender name)
  │   ├── .cometchat-message-bubble__reply (quoted message)
  │   ├── .cometchat-message-bubble__content--incoming / --outgoing
  │   │   └── (plugin bubble content: text, image, file, etc.)
  │   ├── .cometchat-message-bubble__footer (reactions)
  │   ├── .cometchat-message-bubble__status-info (timestamp + receipts)
  │   └── .cometchat-message-bubble__thread (reply count)
  └── .cometchat-message-bubble__bottom (moderation)

---

Customizing Bubble Colors

Incoming Bubble Background

.cometchat-message-bubble__content--incoming {
  background: #f0f0f0;
}

Outgoing Bubble Background

.cometchat-message-bubble__content--outgoing {
  background: #6852d6;
}

Using CSS Variables (Recommended)

Override the tokens on .cometchat — this is the simplest and most reliable approach:

.cometchat {
  /* Incoming bubble background */
  --cometchat-neutral-color-300: #e3f2fd;

  /* Outgoing bubble background (uses primary color) */
  --cometchat-primary-color: #1976d2;
}

Changing --cometchat-neutral-color-300 affects all elements that use it (borders, dividers, etc.), not just bubbles. For bubble-only changes, use the attribute selector approach or wrap the message list in your own class.

---

Customizing Bubble Shape

Border Radius

.cometchat-message-bubble__content--incoming,
.cometchat-message-bubble__content--outgoing {
  border-radius: 16px;
}

Remove Rounded Corners

.cometchat-message-bubble__content--incoming,
.cometchat-message-bubble__content--outgoing {
  border-radius: 0;
}

---

Customizing Bubble Spacing

Gap Between Bubbles

.cometchat-message-bubble {
  margin-bottom: 16px;
}

Content Padding

.cometchat-message-bubble__content--incoming,
.cometchat-message-bubble__content--outgoing {
  padding: 12px 16px;
}

---

Customizing Text Colors

Incoming Message Text

.cometchat-text-bubble--incoming {
  color: #333333;
}

Outgoing Message Text

.cometchat-text-bubble--outgoing {
  color: #ffffff;
}

---

Customizing Timestamp & Receipts

.cometchat-message-bubble__status-info {
  font-size: 11px;
  color: #999999;
}

---

Full Example: Custom Bubble Theme

src/bubble-overrides.css

/* Rounded bubbles with custom colors */
.cometchat-message-bubble__content--incoming {
  background: #e8f5e9;
  border-radius: 18px 18px 18px 4px;
}

.cometchat-message-bubble__content--outgoing {
  background: #1b5e20;
  border-radius: 18px 18px 4px 18px;
}

.cometchat-text-bubble--incoming {
  color: #1b5e20;
}

.cometchat-text-bubble--outgoing {
  color: #ffffff;
}

/* Smaller timestamp */
.cometchat-message-bubble__status-info {
  font-size: 10px;
  opacity: 0.7;
}

---

CSS Selectors Reference

Class names are plain, stable BEM names that you can target directly:

Target	Selector
Bubble wrapper	.cometchat-message-bubble
Leading (avatar)	.cometchat-message-bubble__leading
Body	.cometchat-message-bubble__body
Header (sender name)	.cometchat-message-bubble__header
Reply preview	.cometchat-message-bubble__reply
Content (incoming)	.cometchat-message-bubble__content--incoming
Content (outgoing)	.cometchat-message-bubble__content--outgoing
Footer (reactions)	.cometchat-message-bubble__footer
Status info (time + receipts)	.cometchat-message-bubble__status-info
Thread indicator	.cometchat-message-bubble__thread
Bottom (moderation)	.cometchat-message-bubble__bottom

All class names follow BEM conventions and are stable across builds. You can target them with standard .class-name selectors in your CSS.