> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Bubble Styling

> Customize incoming and outgoing message bubble colors, backgrounds, and styles using CSS variables and class selectors in the CometChat React UI Kit.

<Accordion title="AI Integration Quick Reference">
  | Field         | Value                                                                                                                                                                                     |
  | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Goal          | Customize message bubble appearance (colors, backgrounds) per direction and message type                                                                                                  |
  | Where         | `App.css` (global) — imported in app entry via `import "./App.css";`                                                                                                                      |
  | Base selector | `.cometchat .cometchat-message-bubble-(incoming\|outgoing) .cometchat-message-bubble__body`                                                                                               |
  | Type modifier | Append `.cometchat-message-bubble__<TYPE>-message` to target specific types (`text`, `image`, `video`, `audio`, `file`, `delete`, `meeting`, `whiteboard`, `document`, `poll`, `sticker`) |
  | Key tokens    | `--cometchat-primary-color` (outgoing bg), `--cometchat-neutral-color-300` (incoming bg), `--cometchat-extended-primary-color-900` (outgoing shade)                                       |
  | Constraints   | Global CSS only (no CSS Modules), no `!important`, type selectors override generic bubble selectors                                                                                       |
</Accordion>

Message bubble styling uses distinct CSS classes for incoming and outgoing messages. Each message type (text, image, video, audio, file, etc.) has predefined classes for default styling, customizable via CSS variable overrides.

<Warning>
  **Prerequisites before applying any CSS customization:**

  1. Import the base stylesheet: `@import url("@cometchat/chat-uikit-react/css-variables.css");` in your `App.css`
  2. Import your CSS file at the app entry: `import "./App.css";` in `App.tsx`
  3. All selectors assume the UI Kit renders under a `.cometchat` root wrapper
  4. Use **global CSS** (not CSS Modules with hashed class names) — hashed selectors won't match
</Warning>

***

## Selector Pattern

Use this table to construct the correct CSS selector for any message bubble target. AI agents should use this pattern to generalize — do not guess selectors.

| Target                        | Selector Pattern                                                                                                         |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| All bubbles                   | `.cometchat .cometchat-message-bubble .cometchat-message-bubble__body`                                                   |
| Outgoing bubbles (all types)  | `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body`                                          |
| Incoming bubbles (all types)  | `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body`                                          |
| Specific type (outgoing)      | `.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__<TYPE>-message` |
| Specific type (incoming)      | `.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__<TYPE>-message` |
| Action bubbles (no direction) | `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble`                                                    |

<Note>
  `<TYPE>`

  `<TYPE>` is one of `text`, `image`, `video`, `audio`, `file`, `delete`, `meeting` (direct call), `whiteboard`, `document`, `poll`, `sticker`
</Note>

<Note>
  Link Preview Bubbles

  It reuse the `text-message` type selector since link previews are rendered inside text messages.
</Note>

***

## CSS Variable Reference

These are the CSS variables (tokens) used across message bubble styling. This table tells you exactly what each token controls — do not assume a token affects something not listed here.

| Variable                                 | What It Controls                           | Default (Light) | Commonly Used On                                   |
| ---------------------------------------- | ------------------------------------------ | --------------- | -------------------------------------------------- |
| `--cometchat-primary-color`              | Outgoing bubble background, primary accent | `#6852d6`       | Outgoing bubbles (all types), action bubble accent |
| `--cometchat-neutral-color-300`          | Incoming bubble background                 | `#E8E8E8`       | Incoming bubbles (all types)                       |
| `--cometchat-extended-primary-color-900` | Outgoing bubble shade/gradient variant     | `#5d49be`       | Outgoing text bubble, link preview                 |
| `--cometchat-extended-primary-color-800` | Outgoing bubble secondary shade            | `#5745b4`       | Direct call outgoing bubble                        |
| `--cometchat-extended-primary-color-700` | Outgoing bubble tertiary shade             | `#4f3ea3`       | Poll outgoing bubble                               |
| `--cometchat-neutral-color-400`          | Incoming bubble secondary shade            | varies          | Link preview incoming                              |
| `--cometchat-primary-button-background`  | Primary button fill inside bubbles         | matches primary | Whiteboard/document incoming buttons               |
| `--cometchat-text-color-secondary`       | Secondary/caption text color               | varies          | Action bubble text                                 |
| `--cometchat-icon-color-secondary`       | Secondary icon color                       | varies          | Action bubble icons                                |
| `--cometchat-border-color-default`       | Default border color                       | varies          | Action bubble borders                              |

***

<Note>
  **CSS Specificity & Precedence Rules:**

  1. Message-type selectors (e.g., `__text-message`) override "All Message Bubbles" selectors
  2. Always keep the `.cometchat` prefix to avoid leaking styles into the host app
  3. Component-level variable overrides (`.cometchat-message-list { --var: val }`) override global overrides (`.cometchat { --var: val }`)
  4. CSS variable overrides only affect properties the UI Kit theme binds to that variable — they do NOT change layout or spacing
  5. `!important` should never be needed — if it is, your selector specificity is wrong
</Note>

***

## Incoming & Outgoing Messages

Incoming and outgoing messages have different styling by default, allowing users to visually separate their own messages from others'. Here, we show both the default view and examples of customizations for these message bubbles.

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/NuY3hD_g_g_X-fwH/images/82088b57-message_bubble_styling_default-b1a15eb68fcf1e9a68296ccdd1aa8488.png?fit=max&auto=format&n=NuY3hD_g_g_X-fwH&q=85&s=2a23cad9b3a0ab443029dacd8d6474f7" width="1280" height="1006" data-path="images/82088b57-message_bubble_styling_default-b1a15eb68fcf1e9a68296ccdd1aa8488.png" />
</Frame>

***

### Styling

#### Outgoing Message Bubbles

**Selectors:**

```css lines theme={null}
.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body
```

**Tokens used:**

| Token                                    | Controls                   |
| ---------------------------------------- | -------------------------- |
| `--cometchat-primary-color`              | Outgoing bubble background |
| `--cometchat-extended-primary-color-900` | Outgoing bubble shade      |

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/6twnUcGNOB9c0CI0/images/eb47fdb7-message_bubble_styling_custom_outgoing_bubbles-a58b5baf50e3f6784c1dd4443ade5419.png?fit=max&auto=format&n=6twnUcGNOB9c0CI0&q=85&s=a42287b93ee86194bd4d89c640cf6e92" width="1021" height="661" data-path="images/eb47fdb7-message_bubble_styling_custom_outgoing_bubbles-a58b5baf50e3f6784c1dd4443ade5419.png" />
</Frame>

Use the following code to achieve the customization shown above.

```css title="App.css" lines theme={null}
.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body {
  --cometchat-primary-color: #f76808;
  --cometchat-extended-primary-color-900: #fbaa75;
}
```

**Expected result:** All outgoing message bubbles change from purple to orange (#f76808) with a lighter orange shade (#fbaa75).

***

#### Incoming Message Bubbles

**Selectors:**

```css lines theme={null}
.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body
```

**Tokens used:**

| Token                           | Controls                   |
| ------------------------------- | -------------------------- |
| `--cometchat-neutral-color-300` | Incoming bubble background |

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Mh-tK73gC5erLrBQ/images/f80a1ad4-message_bubble_styling_custom_incoming_bubbles-7b0644cba17d6148e15d7ab70124901c.png?fit=max&auto=format&n=Mh-tK73gC5erLrBQ&q=85&s=210a4b2ee521af0fd86ba8f5d4ce5519" width="1021" height="661" data-path="images/f80a1ad4-message_bubble_styling_custom_incoming_bubbles-7b0644cba17d6148e15d7ab70124901c.png" />
</Frame>

Use the following code to achieve the customization shown above.

```css title="App.css" lines theme={null}
.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
  --cometchat-neutral-color-300: #f76808;
}
```

**Expected result:** All incoming message bubbles change from white/light to orange (#f76808).

***

#### All Message Bubbles

**Selectors:**

```css lines theme={null}
.cometchat .cometchat-message-bubble .cometchat-message-bubble__body
```

**Tokens used:**

| Token                                    | Controls                   |
| ---------------------------------------- | -------------------------- |
| `--cometchat-neutral-color-300`          | Incoming bubble background |
| `--cometchat-primary-color`              | Outgoing bubble background |
| `--cometchat-extended-primary-color-900` | Outgoing bubble shade      |

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/-YC7tOebleeoFejE/images/e5b849ed-message_bubble_styling_custom_all_bubbles-525099af213cddef662fb77ac0398710.png?fit=max&auto=format&n=-YC7tOebleeoFejE&q=85&s=d4ab427ac41d78d13c70ff07a4da2351" width="1021" height="661" data-path="images/e5b849ed-message_bubble_styling_custom_all_bubbles-525099af213cddef662fb77ac0398710.png" />
</Frame>

Use the following code to achieve the customization shown above.

```css title="App.css" lines theme={null}
.cometchat .cometchat-message-bubble .cometchat-message-bubble__body {
  --cometchat-neutral-color-300: #f76808;
  --cometchat-primary-color: #f76808;
  --cometchat-extended-primary-color-900: #fbaa75;
}
```

**Expected result:** Both incoming and outgoing bubbles use orange (#f76808), with outgoing shade set to lighter orange (#fbaa75).

***

### Complete End-to-End Example

To apply custom bubble colors in your app:

**Step 1:** Add to `App.css`:

```css lines theme={null}
@import url("@cometchat/chat-uikit-react/css-variables.css");

/* Custom outgoing bubbles */
.cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body {
  --cometchat-primary-color: #f76808;
  --cometchat-extended-primary-color-900: #fbaa75;
}

/* Custom incoming bubbles */
.cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body {
  --cometchat-neutral-color-300: #feede1;
}
```

**Step 2:** Ensure `App.tsx` imports the CSS:

```tsx lines theme={null}
import "./App.css";
// ... render CometChat UI Kit components
```

**Expected result:** Outgoing bubbles use orange (#f76808) with lighter shade (#fbaa75); incoming bubbles use light peach (#feede1).

***

## Message Types

CometChat UI Kit includes classes for various message types. Below are examples of default & customised views for each message type, along with the relevant CSS code snippets so that you can quickly get up to speed with CSS customization.

***

### Text Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                        |
| ------------------------------- | ------------------------------- |
| `--cometchat-primary-color`     | Outgoing text bubble background |
| `--cometchat-neutral-color-300` | Incoming text bubble background |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/aledzZZMtw_sXx4U/images/fa4eb398-text_message_bubble_default-e20a1cae931c771c1cc0db796dbd292d.png?fit=max&auto=format&n=aledzZZMtw_sXx4U&q=85&s=d18a8d26c5bc8d1c928cbce59782d0c7" width="1280" height="198" data-path="images/fa4eb398-text_message_bubble_default-e20a1cae931c771c1cc0db796dbd292d.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/DVg4aTljRFe0drLF/images/23809d0d-text_message_bubble_custom-6658691cdd69e6eba64a73041b4de005.png?fit=max&auto=format&n=DVg4aTljRFe0drLF&q=85&s=b81c06620f64b454d45e24250ab80301" width="1280" height="198" data-path="images/23809d0d-text_message_bubble_custom-6658691cdd69e6eba64a73041b4de005.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Text Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Text Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing text bubbles change to orange (#f76808); incoming text bubbles change to light peach (#feede1).

***

### Image Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__image-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__image-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                         |
| ------------------------------- | -------------------------------- |
| `--cometchat-primary-color`     | Outgoing image bubble background |
| `--cometchat-neutral-color-300` | Incoming image bubble background |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/T-kVUXtubs0NtFU5/images/cd898026-image_message_bubble_default-7918ea21eae55cd008eff6a567fec19a.png?fit=max&auto=format&n=T-kVUXtubs0NtFU5&q=85&s=55cf8825723a0f6d4b2855ac1facb065" width="1280" height="696" data-path="images/cd898026-image_message_bubble_default-7918ea21eae55cd008eff6a567fec19a.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Xbd1mrZiWe1Pd3HE/images/90eaeef4-image_message_bubble_custom-864b9cc63443a30a4830d84b96d9da1e.png?fit=max&auto=format&n=Xbd1mrZiWe1Pd3HE&q=85&s=2816e42e54af9e74395497586a320e59" width="1280" height="696" data-path="images/90eaeef4-image_message_bubble_custom-864b9cc63443a30a4830d84b96d9da1e.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Image Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__image-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Image Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__image-message {
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing image bubbles change to orange (#f76808); incoming image bubbles change to light peach (#feede1).

***

### Video Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__video-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__video-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                         |
| ------------------------------- | -------------------------------- |
| `--cometchat-primary-color`     | Outgoing video bubble background |
| `--cometchat-neutral-color-300` | Incoming video bubble background |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/lqGH-Bgiq2mgS9m9/images/bc8adc5d-video_message_bubble_default-b159e925e6598e5b01e4d9a2490e0d4c.png?fit=max&auto=format&n=lqGH-Bgiq2mgS9m9&q=85&s=fce7700722dfb88f57b2c6a593d55fc5" width="1280" height="508" data-path="images/bc8adc5d-video_message_bubble_default-b159e925e6598e5b01e4d9a2490e0d4c.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/y8uIEcRYKgfQIY6z/images/9cc7c4d6-video_message_bubble_custom-2c1fcd569de35d4ad7b83641bd68b9e0.png?fit=max&auto=format&n=y8uIEcRYKgfQIY6z&q=85&s=faa9783b56a2fce488d743552761db47" width="1280" height="508" data-path="images/9cc7c4d6-video_message_bubble_custom-2c1fcd569de35d4ad7b83641bd68b9e0.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Video Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__video-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Video Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__video-message {
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing video bubbles change to orange (#f76808); incoming video bubbles change to light peach (#feede1).

***

### Audio Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__audio-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__audio-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                                                |
| ------------------------------- | ------------------------------------------------------- |
| `--cometchat-primary-color`     | Outgoing audio bubble background, incoming audio accent |
| `--cometchat-neutral-color-300` | Incoming audio bubble background                        |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/O4T1K2wxFuaRj1dC/images/a4a1b992-audio_message_bubble_default-970bc6bcea3c589a44f649c47b9c04a4.png?fit=max&auto=format&n=O4T1K2wxFuaRj1dC&q=85&s=1db6cfd52f2e2aae6f6e7ba209793b4d" width="1280" height="320" data-path="images/a4a1b992-audio_message_bubble_default-970bc6bcea3c589a44f649c47b9c04a4.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Q-VZaihy61fy3D_G/images/21bb54b1-audio_message_bubble_custom-68c7ca1b576d7aed709d1e3ef80e371a.png?fit=max&auto=format&n=Q-VZaihy61fy3D_G&q=85&s=d244016be6654cef5d0dabe729dd4fb5" width="1280" height="320" data-path="images/21bb54b1-audio_message_bubble_custom-68c7ca1b576d7aed709d1e3ef80e371a.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Audio Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__audio-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Audio Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__audio-message {
      --cometchat-primary-color: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing audio bubbles change to orange (#f76808); incoming audio bubbles change to light peach (#feede1) with orange accent for playback controls.

***

### File Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__file-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__file-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                                              |
| ------------------------------- | ----------------------------------------------------- |
| `--cometchat-primary-color`     | Outgoing file bubble background, incoming file accent |
| `--cometchat-neutral-color-300` | Incoming file bubble background                       |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/avBd8wan4jblx26s/images/2743e926-file_message_bubble_default-032205256a207879384943fc87367b03.png?fit=max&auto=format&n=avBd8wan4jblx26s&q=85&s=7747cd1e100553dc8e344d40b5f404fc" width="1280" height="316" data-path="images/2743e926-file_message_bubble_default-032205256a207879384943fc87367b03.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/nUllIo1r4Bhce7kY/images/35dad07f-file_message_bubble_custom-e4661d6df1324ab28b8b2de991477f12.png?fit=max&auto=format&n=nUllIo1r4Bhce7kY&q=85&s=fbabe485ebd49b0016e5bf230cfd6005" width="1280" height="316" data-path="images/35dad07f-file_message_bubble_custom-e4661d6df1324ab28b8b2de991477f12.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing File Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__file-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming File Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__file-message {
      --cometchat-primary-color: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing file bubbles change to orange (#f76808); incoming file bubbles change to light peach (#feede1) with orange file icon accent.

***

### Delete Message Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__delete-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__delete-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                          |
| ------------------------------- | --------------------------------- |
| `--cometchat-primary-color`     | Outgoing delete bubble background |
| `--cometchat-neutral-color-300` | Incoming delete bubble background |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/DVg4aTljRFe0drLF/images/23808e50-e3uCfATNWXvJ2BkanAAAAAElFTkSuQmCC.png?fit=max&auto=format&n=DVg4aTljRFe0drLF&q=85&s=65802755c02a2a79aaa199ac41e65e3d" width="1280" height="198" data-path="images/23808e50-e3uCfATNWXvJ2BkanAAAAAElFTkSuQmCC.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/THlknidvlbNx5AzI/images/acf0b247-fnf7Dv8MnoEqjEaKKQAAAAASUVORK5CYII.png?fit=max&auto=format&n=THlknidvlbNx5AzI&q=85&s=566618b2c30782d00cdda9579e23291b" width="1280" height="198" data-path="images/acf0b247-fnf7Dv8MnoEqjEaKKQAAAAASUVORK5CYII.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Delete Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__delete-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Delete Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__delete-message {
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing delete placeholder bubbles change to orange (#f76808); incoming delete placeholder bubbles change to light peach (#feede1).

***

### Action Message Bubble

Action messages (e.g., "User joined the group") use a different selector pattern — they are not directional (no incoming/outgoing).

**Selector:**

* `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble`

**Tokens used:**

| Token                              | Controls                                                       |
| ---------------------------------- | -------------------------------------------------------------- |
| `--cometchat-primary-color`        | Action bubble accent color                                     |
| `background-color`                 | Action bubble background (direct CSS property, not a variable) |
| `--cometchat-text-color-secondary` | Action bubble text color                                       |
| `--cometchat-icon-color-secondary` | Action bubble icon color                                       |
| `--cometchat-border-color-default` | Action bubble border color                                     |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/COIVd1spJ2SNEi43/images/a2c4c9a6-wcXOfMpnNl0mgAAAABJRU5ErkJggg.png?fit=max&auto=format&n=COIVd1spJ2SNEi43&q=85&s=d6276dd6afd8100a9c3ab19088a1228d" width="1280" height="238" data-path="images/a2c4c9a6-wcXOfMpnNl0mgAAAABJRU5ErkJggg.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/KQU96uDrdF-ESW1d/images/2d6c38a0-action_message_bubble_custom-160bec68a93f3aca25e473bb60886649.png?fit=max&auto=format&n=KQU96uDrdF-ESW1d&q=85&s=9189d5abae40251c5602c2c0eb4d6830" width="1280" height="238" data-path="images/2d6c38a0-action_message_bubble_custom-160bec68a93f3aca25e473bb60886649.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble__body .cometchat-action-bubble {
      --cometchat-primary-color: #f76808;
      background-color: #feede1;
      --cometchat-text-color-secondary: #f76808;
      --cometchat-icon-color-secondary: #f76808;
      --cometchat-border-color-default: #f76808;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Action message banners change to light peach background (#feede1) with orange text, icons, and borders (#f76808).

***

### Direct Call Message Bubble

Direct call messages use the `meeting-message` type selector (not `call-message`).

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                                    | Controls                        |
| ---------------------------------------- | ------------------------------- |
| `--cometchat-primary-color`              | Bubble accent and background    |
| `--cometchat-extended-primary-color-800` | Outgoing bubble secondary shade |
| `--cometchat-neutral-color-300`          | Incoming bubble background      |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/0Cdnhz6eU6kdn5Ms/images/b4915847-direct_call_message_bubble_default-8a69bb627d436cc67ff15ca12991b087.png?fit=max&auto=format&n=0Cdnhz6eU6kdn5Ms&q=85&s=7dbb95de5d787770b05a6bd50995bd21" width="1280" height="300" data-path="images/b4915847-direct_call_message_bubble_default-8a69bb627d436cc67ff15ca12991b087.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/qrEt0CwYkpwR_jD-/images/d86dbcd1-direct_call_message_bubble_custom-536d7909dfdd6bf2d91b86458861f130.png?fit=max&auto=format&n=qrEt0CwYkpwR_jD-&q=85&s=35b8308f27c8545402baed9b2b304d61" width="1280" height="300" data-path="images/d86dbcd1-direct_call_message_bubble_custom-536d7909dfdd6bf2d91b86458861f130.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Direct Call Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message {
      --cometchat-primary-color: #f76808;
      --cometchat-extended-primary-color-800: #fbaa75;
    }

    /* Incoming Direct Call Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__meeting-message {
      --cometchat-primary-color: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing direct call bubbles change to orange (#f76808) with lighter shade (#fbaa75); incoming direct call bubbles change to light peach (#feede1) with orange accent.

***

### Default Call Message Bubble

Default call messages (ringing calls) use the same action bubble selector as Action Messages.

**Selector:**

* `.cometchat .cometchat-message-bubble__body .cometchat-action-bubble`

**Tokens used:**

| Token                              | Controls                                            |
| ---------------------------------- | --------------------------------------------------- |
| `--cometchat-primary-color`        | Call action bubble accent                           |
| `background-color`                 | Call action bubble background (direct CSS property) |
| `--cometchat-text-color-secondary` | Call action text color                              |
| `--cometchat-icon-color-secondary` | Call action icon color                              |
| `--cometchat-border-color-default` | Call action border color                            |

<Note>
  Styling default call message bubbles also affects Action Message bubbles since they share the same `.cometchat-action-bubble` selector. To style them independently, use more specific parent selectors if available.
</Note>

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/sVDw7GNAn28WGWte/images/4bf51ee8-default_call_message_bubble_default-a3682d1e68b896e43dd63eeac9a116c3.png?fit=max&auto=format&n=sVDw7GNAn28WGWte&q=85&s=e77ef8137950211a949ee594ce35161a" width="1280" height="652" data-path="images/4bf51ee8-default_call_message_bubble_default-a3682d1e68b896e43dd63eeac9a116c3.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/COIVd1spJ2SNEi43/images/a0fd81a7-default_call_message_bubble_custom-0f34fef940da6809eade3aa47dd167c2.png?fit=max&auto=format&n=COIVd1spJ2SNEi43&q=85&s=6695618f37c9f9746a83f62c85401861" width="1280" height="652" data-path="images/a0fd81a7-default_call_message_bubble_custom-0f34fef940da6809eade3aa47dd167c2.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble__body .cometchat-action-bubble {
      --cometchat-primary-color: #f76808;
      background-color: #feede1;
      --cometchat-text-color-secondary: #f76808;
      --cometchat-icon-color-secondary: #f76808;
      --cometchat-border-color-default: #f76808;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Default call action banners change to light peach background (#feede1) with orange text, icons, and borders (#f76808).

***

### Extensions

#### Collaborative Whiteboard Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                                   | Controls                               |
| --------------------------------------- | -------------------------------------- |
| `--cometchat-primary-color`             | Bubble accent and background           |
| `--cometchat-primary-button-background` | Incoming whiteboard "Open" button fill |
| `--cometchat-neutral-color-300`         | Incoming bubble background             |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/8YlylzCf9CehSaWO/images/cbb18dd6-extensions_whiteboard_message_bubble_default-51119b88b5b6bc11b4628d2d03b6c0a4.png?fit=max&auto=format&n=8YlylzCf9CehSaWO&q=85&s=b511ab9e70923fc910a0b9a2ed9c90c8" width="1280" height="668" data-path="images/cbb18dd6-extensions_whiteboard_message_bubble_default-51119b88b5b6bc11b4628d2d03b6c0a4.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/nUllIo1r4Bhce7kY/images/3470b5c8-extensions_whiteboard_message_bubble_custom-005a48db24137a2870f4933afa07835d.png?fit=max&auto=format&n=nUllIo1r4Bhce7kY&q=85&s=1ba2226fa60f36770f12a0b31054ec5a" width="1280" height="668" data-path="images/3470b5c8-extensions_whiteboard_message_bubble_custom-005a48db24137a2870f4933afa07835d.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Collaborative Whiteboard Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Collaborative Whiteboard Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__whiteboard-message {
      --cometchat-primary-color: #f76808;
      --cometchat-primary-button-background: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing whiteboard bubbles change to orange (#f76808); incoming whiteboard bubbles change to light peach (#feede1) with orange button and accent.

***

#### Collaborative Document Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__document-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__document-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                                   | Controls                             |
| --------------------------------------- | ------------------------------------ |
| `--cometchat-primary-color`             | Bubble accent and background         |
| `--cometchat-primary-button-background` | Incoming document "Open" button fill |
| `--cometchat-neutral-color-300`         | Incoming bubble background           |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/GrDbzzq1LLfv-sgw/images/83da2542-extensions_document_message_bubble_default-834f3b0a25f728f04167ab1fcbfff6a2.png?fit=max&auto=format&n=GrDbzzq1LLfv-sgw&q=85&s=3227ecae02a807a3c5b7985b0782f139" width="1280" height="668" data-path="images/83da2542-extensions_document_message_bubble_default-834f3b0a25f728f04167ab1fcbfff6a2.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/COIVd1spJ2SNEi43/images/a2d29f42-extensions_document_message_bubble_custom-9cffd5b18fd7d7e675552fd116c21b71.png?fit=max&auto=format&n=COIVd1spJ2SNEi43&q=85&s=a11de3ae8d0f71009fd0f7812d71d68a" width="1280" height="668" data-path="images/a2d29f42-extensions_document_message_bubble_custom-9cffd5b18fd7d7e675552fd116c21b71.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Collaborative Document Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__document-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Collaborative Document Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__document-message {
      --cometchat-primary-color: #f76808;
      --cometchat-primary-button-background: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing document bubbles change to orange (#f76808); incoming document bubbles change to light peach (#feede1) with orange button and accent.

***

#### Polls Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__poll-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__poll-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                                    | Controls                         |
| ---------------------------------------- | -------------------------------- |
| `--cometchat-primary-color`              | Bubble accent and background     |
| `--cometchat-extended-primary-color-700` | Outgoing poll progress bar shade |
| `--cometchat-neutral-color-300`          | Incoming bubble background       |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/iII-209mTdOytBSH/images/f1c7a340-extensions_poll_message_bubble_default-9a10c3c038456c4e6c567b24892eff3f.png?fit=max&auto=format&n=iII-209mTdOytBSH&q=85&s=6cac3ce6ddd0732be19f98c26afcca7b" width="1280" height="706" data-path="images/f1c7a340-extensions_poll_message_bubble_default-9a10c3c038456c4e6c567b24892eff3f.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/v4EbHQCGZ54oJcmr/images/58f52202-extensions_poll_message_bubble_custom-5deaab680a3ed80d5b1761099313ac26.png?fit=max&auto=format&n=v4EbHQCGZ54oJcmr&q=85&s=f49384b11cc0234f07946e82b98b07b6" width="1280" height="706" data-path="images/58f52202-extensions_poll_message_bubble_custom-5deaab680a3ed80d5b1761099313ac26.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Poll Message Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__poll-message {
      --cometchat-primary-color: #f76808;
      --cometchat-extended-primary-color-700: #fbaa75;
    }

    /* Incoming Poll Message Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__poll-message {
      --cometchat-primary-color: #f76808;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing poll bubbles change to orange (#f76808) with lighter progress bars (#fbaa75); incoming poll bubbles change to light peach (#feede1) with orange accent.

***

#### Stickers Bubble

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                           | Controls                           |
| ------------------------------- | ---------------------------------- |
| `--cometchat-primary-color`     | Outgoing sticker bubble background |
| `--cometchat-neutral-color-300` | Incoming sticker bubble background |

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/8YlylzCf9CehSaWO/images/ca08378b-extensions_sticker_message_bubble_default-0f8dc6633998822ecd25199af799b2ad.png?fit=max&auto=format&n=8YlylzCf9CehSaWO&q=85&s=8ee8a8a81bf6b768d5baf4d7d5f9f753" width="1280" height="564" data-path="images/ca08378b-extensions_sticker_message_bubble_default-0f8dc6633998822ecd25199af799b2ad.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/-YC7tOebleeoFejE/images/e64d8a88-extensions_sticker_message_bubble_custom-857ab9cc16e651b907e8f03293e403be.png?fit=max&auto=format&n=-YC7tOebleeoFejE&q=85&s=78ee3c8b20dac13cee89ba6ef903d483" width="1280" height="564" data-path="images/e64d8a88-extensions_sticker_message_bubble_custom-857ab9cc16e651b907e8f03293e403be.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Sticker Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message {
      --cometchat-primary-color: #f76808;
    }

    /* Incoming Sticker Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__sticker-message {
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing sticker bubbles change to orange (#f76808); incoming sticker bubbles change to light peach (#feede1).

***

#### Link Preview Bubble

Link previews render inside text message bubbles, so they use the `text-message` type selector.

**Selectors:**

<Tabs>
  <Tab title="Outgoing">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-outgoing .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>

  <Tab title="Incoming">
    ```css lines theme={null}
    .cometchat .cometchat-message-bubble-incoming .cometchat-message-bubble__body.cometchat-message-bubble__text-message
    ```
  </Tab>
</Tabs>

**Tokens used:**

| Token                                    | Controls                                |
| ---------------------------------------- | --------------------------------------- |
| `--cometchat-primary-color`              | Outgoing link preview bubble background |
| `--cometchat-extended-primary-color-900` | Outgoing link preview shade             |
| `--cometchat-neutral-color-400`          | Incoming link preview secondary shade   |
| `--cometchat-neutral-color-300`          | Incoming link preview bubble background |

<Note>
  Styling link preview bubbles also affects regular text message bubbles since they share the same `__text-message` selector. This is by design — link previews are a sub-feature of text messages.
</Note>

Shown below is the default chat interface.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/avBd8wan4jblx26s/images/28503268-extensions_link_preview_message_bubble_default-35dcf065866790a1e388c021a68188b0.png?fit=max&auto=format&n=avBd8wan4jblx26s&q=85&s=06fc09ff51baf5601facd6d6ff7955cc" width="1280" height="918" data-path="images/28503268-extensions_link_preview_message_bubble_default-35dcf065866790a1e388c021a68188b0.png" />
</Frame>

The customized chat interface is displayed below.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/sVDw7GNAn28WGWte/images/4a2aa81e-extensions_link_preview_message_bubble_custom-a79d83c32cc6946d1c35c1803821fe3e.png?fit=max&auto=format&n=sVDw7GNAn28WGWte&q=85&s=607f37b631b74ff3c9bde696ca3e77cb" width="1280" height="918" data-path="images/4a2aa81e-extensions_link_preview_message_bubble_custom-a79d83c32cc6946d1c35c1803821fe3e.png" />
</Frame>

**Complete CSS:**

<Tabs>
  <Tab title="App.css">
    ```css lines theme={null}
    /* Outgoing Link Preview Bubble */
    .cometchat
      .cometchat-message-bubble-outgoing
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-primary-color: #f76808;
      --cometchat-extended-primary-color-900: #fbaa75;
    }

    /* Incoming Link Preview Bubble */
    .cometchat
      .cometchat-message-bubble-incoming
      .cometchat-message-bubble__body.cometchat-message-bubble__text-message {
      --cometchat-neutral-color-400: #fbaa75;
      --cometchat-neutral-color-300: #feede1;
    }
    ```
  </Tab>
</Tabs>

**Expected result:** Outgoing link preview bubbles change to orange (#f76808) with lighter shade (#fbaa75); incoming link preview bubbles change to light peach (#feede1) with orange secondary shade (#fbaa75).