> ## 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.

# Poll Bubble

> A self-extracting bubble that renders a poll with its question, selectable options, live vote counts, percentages, and voter avatars.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                                                                                      |
  | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
  | Component      | `CometChatPollBubble`                                                                                                                                                                      |
  | Package        | `@cometchat/chat-uikit-react`                                                                                                                                                              |
  | Import         | `import { CometChatPollBubble } from "@cometchat/chat-uikit-react";`                                                                                                                       |
  | CSS root class | `.cometchat-poll-bubble`                                                                                                                                                                   |
  | Primary output | `onVoteSubmit: (event: CometChatPollVoteEvent) => void` — emits the submitted vote                                                                                                         |
  | Prerequisites  | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user; plus the [Polls extension](/fundamentals/polls) enabled in the Dashboard |
  | Stitching      | None — self-extracting from the SDK message                                                                                                                                                |
  | Full props     | See [Props](#props)                                                                                                                                                                        |
</Accordion>

## Overview

`CometChatPollBubble` renders a poll. It is **self-extracting**: pass the SDK custom `message` and the bubble derives the question, options, per-option vote counts, total votes, and the logged-in user's selected option entirely from the message metadata. Selecting an option submits a vote; the bar fills and counts/avatars update.

<Note>
  **Requires the Polls extension enabled in the [CometChat Dashboard](/fundamentals/polls).** Poll messages (`extension_poll`) are only produced once the Polls extension is turned on for your app. Without it the composer cannot send polls and this bubble never renders. See the [Polls guide](/fundamentals/polls) to enable it, and the [Plugins overview](/ui-kit/react/plugins/overview#built-in-plugins) for how the UI Kit auto-routes poll messages to this bubble.
</Note>

<Info>
  **Live Preview** — interact with the poll bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--poll-message)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble--poll-message&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "550px", border: "1px solid #e0e0e0"}} title="CometChat Poll Bubble — Default" allow="clipboard-write" />

***

## Usage

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatPollBubble } from "@cometchat/chat-uikit-react";

function PollMessage({ message }: { message: CometChat.CustomMessage }) {
  return (
    <CometChatPollBubble
      message={message}
      onVoteSubmit={(e) => console.log("Voted:", e.optionText)}
    />
  );
}
```

***

## Props

### message

The custom message containing poll data in its metadata. Drives all extraction. **Required.**

|          |                           |
| -------- | ------------------------- |
| Type     | `CometChat.CustomMessage` |
| Required | Yes                       |

***

### alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.

|         |                     |
| ------- | ------------------- |
| Type    | `"left" \| "right"` |
| Default | derived             |

***

### disableInteraction

Disable all interaction (e.g. for a thread header preview).

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### onVoteSubmit

Callback when a vote is submitted successfully.

|         |                                           |
| ------- | ----------------------------------------- |
| Type    | `(event: CometChatPollVoteEvent) => void` |
| Default | `undefined`                               |

***

### onVoteError

Callback when a vote submission fails.

|         |                                                |
| ------- | ---------------------------------------------- |
| Type    | `(event: CometChatPollVoteErrorEvent) => void` |
| Default | `undefined`                                    |

***

### className

Additional CSS class applied to the root element.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

## CSS Selectors

| Target              | Selector                                                                |
| ------------------- | ----------------------------------------------------------------------- |
| Root                | `.cometchat-poll-bubble`                                                |
| Incoming / outgoing | `.cometchat-poll-bubble--incoming` / `.cometchat-poll-bubble--outgoing` |
| Option              | `.cometchat-poll-bubble__option`                                        |
| Option text         | `.cometchat-poll-bubble__option-text`                                   |
| Option count        | `.cometchat-poll-bubble__option-count`                                  |
| Option progress bar | `.cometchat-poll-bubble__option-progress-bar`                           |
| Option radio        | `.cometchat-poll-bubble__option-radio`                                  |
| Voter avatars       | `.cometchat-poll-bubble__option-avatars`                                |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Polls Plugin" icon="square-poll-vertical" href="/ui-kit/react/plugins/overview#built-in-plugins">
    Plugin behavior, context menu, and conversation preview
  </Card>

  <Card title="Enable Polls (Dashboard)" icon="square-poll-vertical" href="/fundamentals/polls">
    Turn on the Polls extension that produces these messages
  </Card>

  <Card title="Sticker Bubble" icon="face-smile" href="/ui-kit/react/components/sticker-bubble">
    Render sticker messages
  </Card>

  <Card title="Message Bubble" icon="comment" href="/ui-kit/react/components/message-bubble">
    The wrapper that hosts bubble content
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>