> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-v7-feature-guides.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Voice Note Bubble
> A dedicated bubble for recorded voice notes with waveform playback, rendered when audio messages carry the voice_note metadata tag.
| Field | Value |
| -------------- | ---------------------------------------------------------------------------------------------------------------- |
| Component | `CometChatVoiceNoteBubble` |
| Package | `@cometchat/chat-uikit-react` |
| Import | `import { CometChatVoiceNoteBubble } from "@cometchat/chat-uikit-react";` |
| CSS root class | `.cometchat-audio-bubble` |
| Primary output | None — renders from the SDK message |
| Prerequisites | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user |
| Stitching | None — self-extracting from the SDK message |
| Full props | See [Props](#props) |
## Overview
`CometChatVoiceNoteBubble` renders audio messages that were recorded via the composer's voice recorder. It renders using the `CometChatAudioBubble` waveform player (documented [below](#the-waveform-player)), giving voice notes a compact play/pause + waveform UI.
This bubble renders whenever an audio message carries `audioType: "voice_note"` in its metadata. Voice notes are always standalone — they never participate in batch grid layouts or multi-attachment grouping.
**Routing logic.** The audio plugin automatically routes messages based on metadata:
* `audioType: "voice_note"` → `CometChatVoiceNoteBubble` (this component)
* No `audioType` (attached audio files) → [Audio Bubble](/ui-kit/react/components/audio-bubble) (`CometChatAudiosBubble`)
You don't need to configure this — it's handled automatically by the plugin system.
Key characteristics:
* **Waveform playback** — play/pause, seekable progress bar, elapsed/total time
* **Always standalone** — voice notes are never grouped or batched with other messages
* **Metadata-driven** — only used when the message has `audioType: "voice_note"` in metadata
* **Waveform player** — renders with the `CometChatAudioBubble` player and its CSS selectors
**Live Preview** — interact with the voice note bubble.
[Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-voice-note--default)
***
## Usage
```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatVoiceNoteBubble } from "@cometchat/chat-uikit-react";
function VoiceNoteMessage({ message }: { message: CometChat.MediaMessage }) {
return ;
}
```
***
## How Voice Notes Are Tagged
When a user records audio via the composer's voice recorder, the UIKit stamps `audioType: "voice_note"` into the message metadata before sending:
```json theme={null}
{
"metadata": {
"audioType": "voice_note"
}
}
```
Audio files attached via the attachment menu do **not** receive this tag — they render as the [Audio Bubble](/ui-kit/react/components/audio-bubble) (`CometChatAudiosBubble`) instead.
***
## Props
### message
The audio message (voice note). The bubble renders it with the `CometChatAudioBubble` waveform player. **Required.**
| | |
| -------- | ------------------------ |
| Type | `CometChat.MediaMessage` |
| Required | Yes |
***
### alignment
Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.
| | |
| ------- | ------------------- |
| Type | `"left" \| "right"` |
| Default | derived |
***
### textFormatters
Text formatters applied to any caption.
| | |
| ------- | -------------------------- |
| Type | `CometChatTextFormatter[]` |
| Default | `undefined` |
***
### className
Additional CSS class applied to the root element.
| | |
| ------- | ----------- |
| Type | `string` |
| Default | `undefined` |
***
## The Waveform Player
Voice notes render with the `CometChatAudioBubble` waveform player — a compact single-audio player with play/pause controls, a waveform progress bar, elapsed/total time, and a download control. It self-extracts the audio attachment from the `message`, so it can also be used standalone to render a single audio waveform.
```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAudioBubble } from "@cometchat/chat-uikit-react";
function Waveform({ message }: { message: CometChat.MediaMessage }) {
return ;
}
```
The player accepts the same core props — `message` (required), `alignment`, and `className`.
Attached audio **files** (not voice notes) render as stacked player cards via `CometChatAudiosBubble` — see the [Audio Bubble](/ui-kit/react/components/audio-bubble) page.
***
## CSS Selectors
The voice note renders with the `CometChatAudioBubble` waveform player, which uses these selectors:
| Target | Selector |
| --------------------- | ----------------------------------------------------------------------- |
| Root | `.cometchat-audio-bubble` |
| Sender / receiver | `.cometchat-audio-bubble--sender` / `.cometchat-audio-bubble--receiver` |
| Container | `.cometchat-audio-bubble__container` |
| Play button | `.cometchat-audio-bubble__play-button` |
| Pause button | `.cometchat-audio-bubble__pause-button` |
| Waveform | `.cometchat-audio-bubble__waveform` |
| Progress (background) | `.cometchat-audio-bubble__progress-bg` |
| Progress (foreground) | `.cometchat-audio-bubble__progress-fg` |
| Time | `.cometchat-audio-bubble__time` |
| Download button | `.cometchat-audio-bubble__download-button` |
| Caption | `.cometchat-audio-bubble__caption` |
***
## Next Steps
Batch-aware bubble for attached audio files
Voice recorder and multi-attachment staging
Batch-aware image bubble with grid layouts
Multi-attachment batch grouping in the list