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

# Comment Dialog Primitives

> 94+ primitive components for building custom Comment Dialog interfaces with maximum flexibility.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

The Comment Dialog Primitives API provides 94+ granular components that can be used independently to build completely custom comment interfaces. Each primitive can be used standalone or composed together for maximum customization flexibility.

## Usage Patterns

### Pattern 1: Context Wrapper (Recommended)

Components are wrapped in a context wrapper that provides shared context to children.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogContextWrapper annotationId="abc123">
      <VeltCommentDialogHeader />
      <VeltCommentDialogComposer />
    </VeltCommentDialogContextWrapper>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-context-wrapper annotation-id="abc123">
      <velt-comment-dialog-header></velt-comment-dialog-header>
      <velt-comment-dialog-composer></velt-comment-dialog-composer>
    </velt-comment-dialog-context-wrapper>
    ```
  </Tab>
</Tabs>

### Pattern 2: ID-Based (Standalone)

Each component receives `annotationId` directly and works independently.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogHeader annotationId="abc123" />
    <VeltCommentDialogComposer annotationId="abc123" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-header annotation-id="abc123"></velt-comment-dialog-header>
    <velt-comment-dialog-composer annotation-id="abc123"></velt-comment-dialog-composer>
    ```
  </Tab>
</Tabs>

## Common Inputs

All components inherit these base inputs. See [`CommentDialogCommonProps`](/api-reference/sdk/models/data-models#commentdialogcommonprops) for the type definition.

| React Prop                 | HTML Attribute                | Type      | Default     | Description                 |
| -------------------------- | ----------------------------- | --------- | ----------- | --------------------------- |
| `annotationId`             | `annotation-id`               | `string`  | -           | The annotation ID           |
| `defaultCondition`         | `default-condition`           | `boolean` | `undefined` | When false, always shows    |
| `inlineCommentSectionMode` | `inline-comment-section-mode` | `boolean` | `false`     | Inline comment section mode |
| `commentPinSelected`       | `comment-pin-selected`        | `boolean` | `false`     | Comment pin selected state  |
| `fullExpanded`             | `full-expanded`               | `boolean` | `false`     | Full expansion state        |

***

## Components

### VeltCommentDialogContextWrapper

Context wrapper that provides shared annotation context to child primitives.

Props: [`CommentDialogContextWrapperProps`](/api-reference/sdk/models/data-models#commentdialogcontextwrapperprops)

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogContextWrapper
      annotationId="abc123"
      commentId="456"
      commentPinSelected={true}
    >
      {children}
    </VeltCommentDialogContextWrapper>
    ```

    **Props:**

    | Prop                 | Type      | Required   | Description                             |
    | -------------------- | --------- | ---------- | --------------------------------------- |
    | `annotationId`       | `string`  | Yes (root) | Annotation ID for children              |
    | `commentId`          | `string`  | No         | Comment ID for children                 |
    | `attachmentId`       | `string`  | No         | Attachment ID for children              |
    | `commentPinSelected` | `boolean` | No         | Selection state for children            |
    | `[key: string]`      | `any`     | No         | Any custom attribute passed via context |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-context-wrapper
      annotation-id="abc123"
      comment-id="456"
      comment-pin-selected="true">
    </velt-comment-dialog-context-wrapper>
    ```

    **Attributes:**

    | Attribute              | Type     | Required   | Description                      |
    | ---------------------- | -------- | ---------- | -------------------------------- |
    | `annotation-id`        | `string` | Yes (root) | Annotation ID for children       |
    | `comment-id`           | `string` | No         | Comment ID for children          |
    | `attachment-id`        | `string` | No         | Attachment ID for children       |
    | `comment-pin-selected` | `string` | No         | Selection state ("true"/"false") |
  </Tab>
</Tabs>

***

### VeltCommentDialogHeader

Header component for the comment dialog.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogHeader annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-header annotation-id="abc123"></velt-comment-dialog-header>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogBody

Body container for the comment dialog thread content.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogBody annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-body annotation-id="abc123"></velt-comment-dialog-body>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCard

Complete thread card with all comment metadata and content. See [`ThreadCardProps`](/api-reference/sdk/models/data-models#threadcardprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCard
      annotationId="abc123"
      commentObj={commentData}
      commentId={456}
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description                          |
    | -------------- | -------- | -------- | ------------------------------------ |
    | `commentObj`   | `object` | No       | Direct comment object (Priority 1)   |
    | `commentId`    | `number` | No       | Comment ID for lookup (Priority 2)   |
    | `commentIndex` | `number` | No       | Index in comments array (Priority 3) |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card
      annotation-id="abc123"
      comment-obj='{"commentId": 456, "message": "..."}'
      comment-id="456"
      comment-index="0">
    </velt-comment-dialog-thread-card>
    ```

    **Attributes:**

    | Attribute       | Type            | Required | Description                          |
    | --------------- | --------------- | -------- | ------------------------------------ |
    | `comment-obj`   | `string (JSON)` | No       | Direct comment object (Priority 1)   |
    | `comment-id`    | `string`        | No       | Comment ID for lookup (Priority 2)   |
    | `comment-index` | `string`        | No       | Index in comments array (Priority 3) |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardAvatar

User avatar for the comment author. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardAvatar
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-avatar
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-avatar>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardName

Display name of the comment author. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardName
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-name
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-name>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardTime

Timestamp of when the comment was created. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardTime
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-time
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-time>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardMessage

The comment message content. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardMessage
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-message
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-message>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardMessageShowMore

Show-more toggle that appears when message truncation is enabled and the message exceeds the configured line limit; clicking expands the full message.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardMessageShowMore />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-message-show-more></velt-comment-dialog-thread-card-message-show-more>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardMessageShowLess

Show-less toggle that collapses an expanded truncated message back to the truncated state.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardMessageShowLess />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-message-show-less></velt-comment-dialog-thread-card-message-show-less>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardReactions

Reactions display for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardReactions
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-reactions
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-reactions>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardReactionTool

Tool for adding reactions to a comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardReactionTool
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-reaction-tool
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-reaction-tool>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardRecordings

Recordings attached to the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardRecordings
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-recordings
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-recordings>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardReply

Reply indicator for the thread card.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardReply annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-reply annotation-id="abc123"></velt-comment-dialog-thread-card-reply>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardUnread

Unread indicator for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardUnread
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-unread
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-unread>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardEdited

Edited indicator for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardEdited
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-edited
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-edited>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardDraft

Draft indicator for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardDraft
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-draft
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-draft>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardDeviceType

Device type indicator for the comment. See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardDeviceType
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-device-type
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-device-type>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogThreadCardOptions

Options menu for the comment (edit, delete, etc.). See [`CommentIndexProps`](/api-reference/sdk/models/data-models#commentindexprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreadCardOptions
      annotationId="abc123"
      commentIndex={0}
    />
    ```

    **Props:**

    | Prop           | Type     | Required | Description               |
    | -------------- | -------- | -------- | ------------------------- |
    | `commentIndex` | `number` | No       | Index of comment in array |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-thread-card-options
      annotation-id="abc123"
      comment-index="0">
    </velt-comment-dialog-thread-card-options>
    ```

    **Attributes:**

    | Attribute       | Type     | Required | Description               |
    | --------------- | -------- | -------- | ------------------------- |
    | `comment-index` | `string` | No       | Index of comment in array |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposer

Complete composer with input, attachments, and action buttons. See [`ComposerProps`](/api-reference/sdk/models/data-models#composerprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposer
      annotationId="abc123"
      placeholder="Write a comment..."
      commentPlaceholder="Add a comment"
      replyPlaceholder="Write a reply"
      editPlaceholder="Edit your comment"
      editMode={false}
      commentObj={null}
      commentIndex={0}
      targetComposerElementId="composer-1"
      context={{ projectId: 'abc123' }}
    />
    ```

    **Props:**

    | Prop                      | Type      | Required | Description                                   |
    | ------------------------- | --------- | -------- | --------------------------------------------- |
    | `placeholder`             | `string`  | No       | Primary placeholder (Priority 1)              |
    | `commentPlaceholder`      | `string`  | No       | Placeholder for new comment                   |
    | `replyPlaceholder`        | `string`  | No       | Placeholder for reply                         |
    | `editPlaceholder`         | `string`  | No       | Placeholder for edit mode                     |
    | `editMode`                | `boolean` | No       | Enable edit mode                              |
    | `commentObj`              | `object`  | No       | Comment object for edit mode                  |
    | `commentIndex`            | `number`  | No       | Index of comment being edited                 |
    | `targetComposerElementId` | `string`  | No       | Unique identifier for programmatic submission |
    | `context`                 | `object`  | No       | Custom context data to attach to comment      |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer
      annotation-id="abc123"
      placeholder="Write a comment..."
      commentplaceholder="Add a comment"
      replyplaceholder="Write a reply"
      editplaceholder="Edit your comment"
      edit-mode="false"
      comment-index="0"
      target-composer-element-id="composer-1"
      context='{"projectId": "abc123"}'>
    </velt-comment-dialog-composer>
    ```

    **Attributes:**

    | Attribute                    | Type            | Required | Description                                   |
    | ---------------------------- | --------------- | -------- | --------------------------------------------- |
    | `placeholder`                | `string`        | No       | Primary placeholder (Priority 1)              |
    | `commentplaceholder`         | `string`        | No       | Placeholder for new comment                   |
    | `replyplaceholder`           | `string`        | No       | Placeholder for reply                         |
    | `editplaceholder`            | `string`        | No       | Placeholder for edit mode                     |
    | `edit-mode`                  | `string`        | No       | Enable edit mode ("true"/"false")             |
    | `comment-obj`                | `string (JSON)` | No       | Comment object for edit mode                  |
    | `comment-index`              | `string`        | No       | Index of comment being edited                 |
    | `target-composer-element-id` | `string`        | No       | Unique identifier for programmatic submission |
    | `context`                    | `string (JSON)` | No       | Custom context data to attach to comment      |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerInput

Text input field for composing comments. See [`ComposerInputProps`](/api-reference/sdk/models/data-models#composerinputprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerInput
      annotationId="abc123"
      placeholder="Type here..."
    />
    ```

    **Props:**

    | Prop          | Type     | Required | Description            |
    | ------------- | -------- | -------- | ---------------------- |
    | `placeholder` | `string` | No       | Input placeholder text |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-input
      annotation-id="abc123"
      placeholder="Type here...">
    </velt-comment-dialog-composer-input>
    ```

    **Attributes:**

    | Attribute     | Type     | Required | Description            |
    | ------------- | -------- | -------- | ---------------------- |
    | `placeholder` | `string` | No       | Input placeholder text |
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerActionButton

Submit/send button for the composer.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerActionButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-action-button annotation-id="abc123"></velt-comment-dialog-composer-action-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentButton

Button to add file attachments to comments.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachment-button annotation-id="abc123"></velt-comment-dialog-composer-attachment-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerRecorderButton

Button to add audio/video recordings.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerRecorderButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-recorder-button annotation-id="abc123"></velt-comment-dialog-composer-recorder-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerRecorderPlayer

Player for audio/video recordings in the composer.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerRecorderPlayer annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-recorder-player annotation-id="abc123"></velt-comment-dialog-composer-recorder-player>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerFiles

Files display in the composer.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerFiles annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-files annotation-id="abc123"></velt-comment-dialog-composer-files>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsImageDownload

Download button for image attachments in the comment dialog composer when in edit mode.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsImageDownload annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-image-download annotation-id="abc123"></velt-comment-dialog-composer-attachments-image-download>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogComposerAttachmentsOtherDownload

Download button for non-image file attachments in the comment dialog composer when in edit mode.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogComposerAttachmentsOtherDownload annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-composer-attachments-other-download annotation-id="abc123"></velt-comment-dialog-composer-attachments-other-download>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdown

Complete status dropdown with trigger and content.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdown annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown annotation-id="abc123"></velt-comment-dialog-status-dropdown>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdownTrigger

Button that opens the status dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdownTrigger annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdownTriggerIcon

Icon for the status dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdownTriggerIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdownTriggerName

Name display for the status dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdownTriggerName annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-trigger-name annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdownTriggerArrow

Arrow indicator for the status dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdownTriggerArrow annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-arrow>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdownContent

Dropdown content container for status options.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdownContent annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-content annotation-id="abc123"></velt-comment-dialog-status-dropdown-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdownContentItem

Individual status item in the dropdown. See [`StatusDropdownItemProps`](/api-reference/sdk/models/data-models#statusdropdownitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdownContentItem
      annotationId="abc123"
      statusObj={statusData}
      statusId="open"
      statusIndex={0}
    />
    ```

    **Props:**

    | Prop          | Type     | Required | Description                          |
    | ------------- | -------- | -------- | ------------------------------------ |
    | `statusObj`   | `object` | No       | Direct status object (Priority 1)    |
    | `statusId`    | `string` | No       | Status ID for lookup (Priority 2)    |
    | `statusIndex` | `number` | No       | Index in statuses array (Priority 3) |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-content-item
      annotation-id="abc123"
      status-obj='{"id": "open", "name": "Open"}'
      status-id="open"
      status-index="0">
    </velt-comment-dialog-status-dropdown-content-item>
    ```

    **Attributes:**

    | Attribute      | Type            | Required | Description                          |
    | -------------- | --------------- | -------- | ------------------------------------ |
    | `status-obj`   | `string (JSON)` | No       | Direct status object (Priority 1)    |
    | `status-id`    | `string`        | No       | Status ID for lookup (Priority 2)    |
    | `status-index` | `string`        | No       | Index in statuses array (Priority 3) |
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdownContentItemIcon

Icon for a status dropdown item.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdownContentItemIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-content-item-icon annotation-id="abc123"></velt-comment-dialog-status-dropdown-content-item-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogStatusDropdownContentItemName

Name display for a status dropdown item.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatusDropdownContentItemName annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status-dropdown-content-item-name annotation-id="abc123"></velt-comment-dialog-status-dropdown-content-item-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdown

Complete priority dropdown with trigger and content.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdown annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown annotation-id="abc123"></velt-comment-dialog-priority-dropdown>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownTrigger

Button that opens the priority dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownTrigger annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownTriggerIcon

Icon for the priority dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownTriggerIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownTriggerName

Name display for the priority dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownTriggerName annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-trigger-name annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownTriggerArrow

Arrow indicator for the priority dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownTriggerArrow annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-arrow>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownContent

Dropdown content container for priority options.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownContent annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownContentItem

Individual priority item in the dropdown. See [`PriorityDropdownItemProps`](/api-reference/sdk/models/data-models#prioritydropdownitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownContentItem
      annotationId="abc123"
      priorityObj={priorityData}
      priorityId="high"
      priorityIndex={0}
    />
    ```

    **Props:**

    | Prop            | Type     | Required | Description                            |
    | --------------- | -------- | -------- | -------------------------------------- |
    | `priorityObj`   | `object` | No       | Direct priority object (Priority 1)    |
    | `priorityId`    | `string` | No       | Priority ID for lookup (Priority 2)    |
    | `priorityIndex` | `number` | No       | Index in priorities array (Priority 3) |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content-item
      annotation-id="abc123"
      priority-obj='{"id": "high", "name": "High"}'
      priority-id="high"
      priority-index="0">
    </velt-comment-dialog-priority-dropdown-content-item>
    ```

    **Attributes:**

    | Attribute        | Type            | Required | Description                            |
    | ---------------- | --------------- | -------- | -------------------------------------- |
    | `priority-obj`   | `string (JSON)` | No       | Direct priority object (Priority 1)    |
    | `priority-id`    | `string`        | No       | Priority ID for lookup (Priority 2)    |
    | `priority-index` | `string`        | No       | Index in priorities array (Priority 3) |
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownContentItemIcon

Icon for a priority dropdown item.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownContentItemIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content-item-icon annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content-item-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownContentItemName

Name display for a priority dropdown item.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownContentItemName annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content-item-name annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content-item-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriorityDropdownContentItemTick

Tick/checkmark for a priority dropdown item.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriorityDropdownContentItemTick annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority-dropdown-content-item-tick annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content-item-tick>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdown

Options menu for actions like assignment, editing, and notifications. See [`OptionsDropdownProps`](/api-reference/sdk/models/data-models#optionsdropdownprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdown
      annotationId="abc123"
      commentIndex={0}
      enableAssignment={true}
      enableEdit={true}
      enableNotifications={true}
      enablePrivateMode={true}
      enableMarkAsRead={true}
    />
    ```

    **Props:**

    | Prop                           | Type      | Required | Description                      |
    | ------------------------------ | --------- | -------- | -------------------------------- |
    | `commentIndex`                 | `number`  | No       | Index of comment for options     |
    | `enableAssignment`             | `boolean` | No       | Enable assignment option         |
    | `allowAssignment`              | `boolean` | No       | V4 alias for enableAssignment    |
    | `enableEdit`                   | `boolean` | No       | Enable edit option               |
    | `allowEdit`                    | `boolean` | No       | V4 alias for enableEdit          |
    | `enableNotifications`          | `boolean` | No       | Enable notifications option      |
    | `allowNotifications`           | `boolean` | No       | V4 alias for enableNotifications |
    | `allowToggleNotification`      | `boolean` | No       | V4 alias for enableNotifications |
    | `enablePrivateMode`            | `boolean` | No       | Enable private mode option       |
    | `allowPrivateMode`             | `boolean` | No       | V4 alias for enablePrivateMode   |
    | `allowChangeCommentAccessMode` | `boolean` | No       | V4 alias for enablePrivateMode   |
    | `enableMarkAsRead`             | `boolean` | No       | Enable mark as read option       |
    | `allowMarkAsRead`              | `boolean` | No       | V4 alias for enableMarkAsRead    |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown
      annotation-id="abc123"
      comment-index="0"
      enable-assignment="true"
      enable-edit="true"
      enable-notifications="true"
      enable-private-mode="true"
      enable-mark-as-read="true">
    </velt-comment-dialog-options-dropdown>
    ```

    **Attributes:**

    | Attribute                          | Type     | Required | Description                       |
    | ---------------------------------- | -------- | -------- | --------------------------------- |
    | `comment-index`                    | `string` | No       | Index of comment for options      |
    | `enable-assignment`                | `string` | No       | Enable assignment option          |
    | `allow-assignment`                 | `string` | No       | V4 alias for enable-assignment    |
    | `enable-edit`                      | `string` | No       | Enable edit option                |
    | `allow-edit`                       | `string` | No       | V4 alias for enable-edit          |
    | `enable-notifications`             | `string` | No       | Enable notifications option       |
    | `allow-notifications`              | `string` | No       | V4 alias for enable-notifications |
    | `allow-toggle-notification`        | `string` | No       | V4 alias for enable-notifications |
    | `enable-private-mode`              | `string` | No       | Enable private mode option        |
    | `allow-private-mode`               | `string` | No       | V4 alias for enable-private-mode  |
    | `allow-change-comment-access-mode` | `string` | No       | V4 alias for enable-private-mode  |
    | `enable-mark-as-read`              | `string` | No       | Enable mark as read option        |
    | `allow-mark-as-read`               | `string` | No       | V4 alias for enable-mark-as-read  |
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownTrigger

Trigger button for the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownTrigger annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-options-dropdown-trigger>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContent

Content container for the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContent annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content annotation-id="abc123"></velt-comment-dialog-options-dropdown-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentAssign

Assign option in the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentAssign annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-assign annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-assign>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentEdit

Edit option in the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentEdit annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-edit annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-edit>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentDelete

Delete option in the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentDelete annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-delete annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-delete>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentDeleteComment

Delete comment option in the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentDeleteComment annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-delete-comment annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-delete-comment>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentDeleteThread

Delete thread option in the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentDeleteThread annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-delete-thread annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-delete-thread>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentMakePrivate

Make private option container in the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentMakePrivate annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-make-private annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-make-private>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentMakePrivateEnable

Enable private mode option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentMakePrivateEnable annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-make-private-enable annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-make-private-enable>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentMakePrivateDisable

Disable private mode option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentMakePrivateDisable annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-make-private-disable annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-make-private-disable>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentNotification

Notification option container in the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentNotification annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-notification annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-notification>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentNotificationSubscribe

Subscribe to notifications option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentNotificationSubscribe annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-notification-subscribe annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-notification-subscribe>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

Unsubscribe from notifications option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-notification-unsubscribe annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-notification-unsubscribe>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentMarkAsRead

Mark as read option container in the options dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentMarkAsRead annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-mark-as-read annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-mark-as-read>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

Mark as read action option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-mark-as-read-mark-read annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-mark-as-read-mark-read>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

Mark as unread action option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options-dropdown-content-mark-as-read-mark-unread annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-mark-as-read-mark-unread>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdown

Custom annotation dropdown component.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownTrigger

Trigger button for the custom annotation dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownTrigger annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownTriggerArrow

Arrow indicator for the custom annotation dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownTriggerArrow annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger-arrow>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownTriggerList

List container for the custom annotation dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownTriggerList annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-list annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger-list>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownTriggerListItem

Individual item in the custom annotation dropdown trigger list. See [`CustomAnnotationItemProps`](/api-reference/sdk/models/data-models#customannotationitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownTriggerListItem
      annotationId="abc123"
      item={itemData}
      index={0}
    />
    ```

    **Props:**

    | Prop    | Type     | Required | Description      |
    | ------- | -------- | -------- | ---------------- |
    | `item`  | `object` | No       | Item data object |
    | `index` | `number` | No       | Item index       |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-list-item
      annotation-id="abc123"
      item='{"id": "1", "label": "Item"}'
      index="0">
    </velt-comment-dialog-custom-annotation-dropdown-trigger-list-item>
    ```

    **Attributes:**

    | Attribute | Type            | Required | Description      |
    | --------- | --------------- | -------- | ---------------- |
    | `item`    | `string (JSON)` | No       | Item data object |
    | `index`   | `string`        | No       | Item index       |
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

Placeholder for the custom annotation dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-placeholder annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger-placeholder>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

Remaining count indicator for the custom annotation dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-trigger-remaining-count annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger-remaining-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownContent

Content container for the custom annotation dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownContent annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-content annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownContentItem

Individual item in the custom annotation dropdown content. See [`CustomAnnotationItemProps`](/api-reference/sdk/models/data-models#customannotationitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownContentItem
      annotationId="abc123"
      item={itemData}
      index={0}
    />
    ```

    **Props:**

    | Prop    | Type     | Required | Description      |
    | ------- | -------- | -------- | ---------------- |
    | `item`  | `object` | No       | Item data object |
    | `index` | `number` | No       | Item index       |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-content-item
      annotation-id="abc123"
      item='{"id": "1", "label": "Item"}'
      index="0">
    </velt-comment-dialog-custom-annotation-dropdown-content-item>
    ```

    **Attributes:**

    | Attribute | Type            | Required | Description      |
    | --------- | --------------- | -------- | ---------------- |
    | `item`    | `string (JSON)` | No       | Item data object |
    | `index`   | `string`        | No       | Item index       |
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownContentItemIcon

Icon for a custom annotation dropdown item.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownContentItemIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-content-item-icon annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-content-item-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdownContentItemLabel

Label for a custom annotation dropdown item.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdownContentItemLabel annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown-content-item-label annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-content-item-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogReplyAvatars

Container for reply avatars.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogReplyAvatars annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-reply-avatars annotation-id="abc123"></velt-comment-dialog-reply-avatars>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogReplyAvatarsList

List container for reply avatars.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogReplyAvatarsList annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-reply-avatars-list annotation-id="abc123"></velt-comment-dialog-reply-avatars-list>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogReplyAvatarsListItem

Individual avatar item in the reply avatars list. See [`ReplyAvatarsListItemProps`](/api-reference/sdk/models/data-models#replyavatarslistitemprops).

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogReplyAvatarsListItem
      annotationId="abc123"
      user={userData}
      index={0}
    />
    ```

    **Props:**

    | Prop    | Type     | Required | Description           |
    | ------- | -------- | -------- | --------------------- |
    | `user`  | `User`   | Yes      | User data object      |
    | `index` | `number` | Yes      | Index of user in list |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-reply-avatars-list-item
      annotation-id="abc123"
      user='{"userId": "1", "name": "John"}'
      index="0">
    </velt-comment-dialog-reply-avatars-list-item>
    ```

    **Attributes:**

    | Attribute | Type            | Required | Description           |
    | --------- | --------------- | -------- | --------------------- |
    | `user`    | `string (JSON)` | Yes      | User data object      |
    | `index`   | `string`        | Yes      | Index of user in list |
  </Tab>
</Tabs>

***

### VeltCommentDialogReplyCount

Reply count display.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogReplyCount annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-reply-count annotation-id="abc123"></velt-comment-dialog-reply-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogAssigneeBanner

Assignee banner container.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogAssigneeBanner annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner annotation-id="abc123"></velt-comment-dialog-assignee-banner>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogAssigneeBannerResolved

Resolved state of the assignee banner.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogAssigneeBannerResolved annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner-resolved annotation-id="abc123"></velt-comment-dialog-assignee-banner-resolved>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogAssigneeBannerUnresolved

Unresolved state of the assignee banner.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogAssigneeBannerUnresolved annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner-unresolved annotation-id="abc123"></velt-comment-dialog-assignee-banner-unresolved>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogAssigneeBannerUnresolveButton

Button to unresolve the assignee banner.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogAssigneeBannerUnresolveButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assignee-banner-unresolve-button annotation-id="abc123"></velt-comment-dialog-assignee-banner-unresolve-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocomplete

<Tip>
  To customize the **wireframe appearance** of autocomplete options, chips, and tooltips, see the [Autocomplete Option](/ui-customization/features/async/comments/comment-dialog/wireframes#autocomplete-option-composer) and [Autocomplete Chip Tooltip](/ui-customization/features/async/comments/comment-dialog/wireframes#autocomplete-chip-tooltip-body-threads-thread-card) sections in the Comment Dialog wireframes page.
</Tip>

The autocomplete panel component accepts the following props for controlling selection mode, ordering, and data source.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocomplete
      multiSelect={true}
      selectedFirstOrdering={true}
      readOnly={false}
      inline={true}
      contacts={myContacts}
    />
    ```

    **Props:**

    | Prop                    | Type                                                                 | Default | Description                                            |
    | ----------------------- | -------------------------------------------------------------------- | ------- | ------------------------------------------------------ |
    | `multiSelect`           | `boolean`                                                            | `false` | Allows selecting multiple contacts                     |
    | `selectedFirstOrdering` | `boolean`                                                            | `false` | Shows selected items first in the list                 |
    | `readOnly`              | `boolean`                                                            | `false` | Disables user interaction                              |
    | `inline`                | `boolean`                                                            | `false` | Renders the autocomplete inline rather than as a panel |
    | `contacts`              | [`UserContact[]`](/api-reference/sdk/models/data-models#usercontact) | —       | Overrides the default contact list                     |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete
      multi-select="true"
      selected-first-ordering="true"
      read-only="false"
      inline="true"
    ></velt-autocomplete>
    ```

    **Attributes:**

    | Attribute                 | Type     | Default   | Description                                            |
    | ------------------------- | -------- | --------- | ------------------------------------------------------ |
    | `multi-select`            | `string` | `"false"` | Allows selecting multiple contacts                     |
    | `selected-first-ordering` | `string` | `"false"` | Shows selected items first in the list                 |
    | `read-only`               | `string` | `"false"` | Disables user interaction                              |
    | `inline`                  | `string` | `"false"` | Renders the autocomplete inline rather than as a panel |
  </Tab>
</Tabs>

***

### VeltAutocompleteEmptyWireframe

Customize the empty state shown when the autocomplete panel has no results. This is a wireframe component — for more wireframe customization patterns, see the [Comment Dialog wireframes](/ui-customization/features/async/comments/comment-dialog/wireframes) page.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    import { VeltWireframe, VeltAutocompleteEmptyWireframe } from '@veltdev/react';

    <VeltWireframe>
      <VeltAutocompleteEmptyWireframe>
        <div className="my-empty-state">No results found</div>
      </VeltAutocompleteEmptyWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe>
      <velt-autocomplete-empty-wireframe>
        <div class="my-empty-state">No results found</div>
      </velt-autocomplete-empty-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

***

### VeltAutocompleteChip

Standalone autocomplete chip component for rendering selected contact chips.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteChip
      type="contact"
      email="user@example.com"
      userId="user-1"
    />
    ```

    **Props:**

    | Prop         | Type                                            | Required | Description                                              |
    | ------------ | ----------------------------------------------- | -------- | -------------------------------------------------------- |
    | `type`       | `'contact' \| 'custom' \| 'group' \| 'loading'` | No       | Chip type                                                |
    | `email`      | `string`                                        | No       | Contact email                                            |
    | `userObject` | `any`                                           | No       | User data object (JSON object or serialized JSON string) |
    | `userId`     | `string`                                        | No       | User ID                                                  |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip
      type="contact"
      email="user@example.com"
      user-id="user-1"
    ></velt-autocomplete-chip>
    ```

    **Attributes:**

    | Attribute     | Type                                            | Required | Description                         |
    | ------------- | ----------------------------------------------- | -------- | ----------------------------------- |
    | `type`        | `'contact' \| 'custom' \| 'group' \| 'loading'` | No       | Chip type                           |
    | `email`       | `string`                                        | No       | Contact email                       |
    | `user-object` | `string` (JSON)                                 | No       | User data object as serialized JSON |
    | `user-id`     | `string`                                        | No       | User ID                             |
  </Tab>
</Tabs>

***

### VeltAutocompleteOption

Standalone autocomplete option component for rendering contact/custom options.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteOption
      userId="user-1"
      userObject={userData}
    />
    ```

    **Props:**

    | Prop         | Type     | Required | Description                                              |
    | ------------ | -------- | -------- | -------------------------------------------------------- |
    | `userObject` | `any`    | No       | User data object (JSON object or serialized JSON string) |
    | `userId`     | `string` | No       | User ID                                                  |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option
      user-id="user-1"
    ></velt-autocomplete-option>
    ```

    **Attributes:**

    | Attribute     | Type            | Required | Description                         |
    | ------------- | --------------- | -------- | ----------------------------------- |
    | `user-object` | `string` (JSON) | No       | User data object as serialized JSON |
    | `user-id`     | `string`        | No       | User ID                             |
  </Tab>
</Tabs>

***

### VeltAutocompleteOptionDescription

Standalone autocomplete option description component.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteOptionDescription field="email" />
    ```

    **Props:**

    | Prop    | Type     | Required | Description                                |
    | ------- | -------- | -------- | ------------------------------------------ |
    | `field` | `string` | No       | Field name to display from the user object |
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option-description field="email"></velt-autocomplete-option-description>
    ```

    **Attributes:**

    | Attribute | Type     | Required | Description                                |
    | --------- | -------- | -------- | ------------------------------------------ |
    | `field`   | `string` | No       | Field name to display from the user object |
  </Tab>
</Tabs>

***

### VeltAutocompleteOptionIcon

Icon for an autocomplete option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteOptionIcon />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option-icon></velt-autocomplete-option-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocompleteOptionName

Name display for an autocomplete option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteOptionName />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option-name></velt-autocomplete-option-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocompleteOptionErrorIcon

Error icon for an autocomplete option.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteOptionErrorIcon />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-option-error-icon></velt-autocomplete-option-error-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocompleteGroupOption

Group option in the autocomplete panel.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteGroupOption />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-group-option></velt-autocomplete-group-option>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocompleteTool

Tool component for the autocomplete panel.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteTool />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-tool></velt-autocomplete-tool>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocompleteEmpty

Empty state for the autocomplete panel.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteEmpty />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-empty></velt-autocomplete-empty>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocompleteChipTooltip

Tooltip for an autocomplete chip.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteChipTooltip />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip-tooltip></velt-autocomplete-chip-tooltip>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocompleteChipTooltipIcon

Icon within the autocomplete chip tooltip.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteChipTooltipIcon />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip-tooltip-icon></velt-autocomplete-chip-tooltip-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocompleteChipTooltipName

Name display within the autocomplete chip tooltip.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteChipTooltipName />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip-tooltip-name></velt-autocomplete-chip-tooltip-name>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltAutocompleteChipTooltipDescription

Description within the autocomplete chip tooltip.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteChipTooltipDescription />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-autocomplete-chip-tooltip-description></velt-autocomplete-chip-tooltip-description>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogResolveButton

Button to resolve a comment thread.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogResolveButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-resolve-button annotation-id="abc123"></velt-comment-dialog-resolve-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogUnresolveButton

Button to unresolve a comment thread.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogUnresolveButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-unresolve-button annotation-id="abc123"></velt-comment-dialog-unresolve-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCopyLink

Button to copy the comment link to clipboard.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCopyLink annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-copy-link annotation-id="abc123"></velt-comment-dialog-copy-link>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCloseButton

Button to close the comment dialog.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCloseButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-close-button annotation-id="abc123"></velt-comment-dialog-close-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogDeleteButton

Button to delete a comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogDeleteButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-delete-button annotation-id="abc123"></velt-comment-dialog-delete-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPrivateBanner

Banner indicating a comment's private status.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPrivateBanner annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-private-banner annotation-id="abc123"></velt-comment-dialog-private-banner>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPrivateButton

Button to toggle private mode on a comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPrivateButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-private-button annotation-id="abc123"></velt-comment-dialog-private-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogGhostBanner

Banner displayed for ghost or anonymous comments.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogGhostBanner annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-ghost-banner annotation-id="abc123"></velt-comment-dialog-ghost-banner>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBanner

Banner displaying the current visibility setting for a comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBanner annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner annotation-id="abc123"></velt-comment-dialog-visibility-banner>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerIcon

Icon within the visibility banner.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-icon annotation-id="abc123"></velt-comment-dialog-visibility-banner-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerText

Text label within the visibility banner.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerText annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-text annotation-id="abc123"></velt-comment-dialog-visibility-banner-text>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdown

Dropdown for selecting visibility options within the banner.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdown annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownTrigger

Trigger element for the visibility dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownTrigger annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownTriggerLabel

Label text within the visibility dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownTriggerLabel annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-label annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList

Avatar list within the visibility dropdown trigger showing selected users.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem

Individual avatar within the trigger avatar list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-item annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount

Count of remaining avatars not displayed in the trigger list.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-remaining-count annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-avatar-list-remaining-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownTriggerIcon

Icon within the visibility dropdown trigger.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownTriggerIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContent

Content container for the visibility dropdown options.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContent annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentItemIcon

Icon for a visibility option item in the dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentItemIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-item-icon annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-item-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentItemLabel

Label for a visibility option item in the dropdown.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentItemLabel annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-item-label annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-item-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPicker

User picker for selecting specific users when visibility is set to `selected-people`.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPicker annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch

Search container within the user picker.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon

Search icon within the user picker search.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-icon annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput

Search input field within the user picker.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-input annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-search-input>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader

Header section of the user picker.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount

Count of selected users displayed in the user picker header.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-count annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll

Button to unselect all users in the user picker.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-unselect-all annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-header-unselect-all>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem

Individual user item within the user picker.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar

Avatar for a user item in the user picker.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-avatar annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-avatar>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo

Info text for a user item in the user picker.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-info annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-info>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck

Check indicator for a selected user in the user picker.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-check annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-user-picker-item-check>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogSignIn

Sign-in prompt displayed to unauthenticated users.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogSignIn annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-sign-in annotation-id="abc123"></velt-comment-dialog-sign-in>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogNavigationButton

Button for navigating between comments.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogNavigationButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-navigation-button annotation-id="abc123"></velt-comment-dialog-navigation-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogAttachmentButton

Button for adding file attachments to a comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogAttachmentButton annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-attachment-button annotation-id="abc123"></velt-comment-dialog-attachment-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogDeviceTypeIcons

Icons indicating the device type used when the comment was created.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogDeviceTypeIcons annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-device-type-icons annotation-id="abc123"></velt-comment-dialog-device-type-icons>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCommentIndex

Display for the comment's index position.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCommentIndex annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-comment-index annotation-id="abc123"></velt-comment-dialog-comment-index>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCommentNumber

Display for the comment's number.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCommentNumber annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-comment-number annotation-id="abc123"></velt-comment-dialog-comment-number>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCommentCategory

Display for the comment's category.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCommentCategory annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-comment-category annotation-id="abc123"></velt-comment-dialog-comment-category>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogMetadata

Display for comment metadata.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogMetadata annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-metadata annotation-id="abc123"></velt-comment-dialog-metadata>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogThreads

Container for the comment threads.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogThreads annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-threads annotation-id="abc123"></velt-comment-dialog-threads>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogAllComment

View for displaying all comments.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogAllComment annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-all-comment annotation-id="abc123"></velt-comment-dialog-all-comment>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogApprove

Approve button for comment approval workflows.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogApprove annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-approve annotation-id="abc123"></velt-comment-dialog-approve>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogUpgrade

Upgrade prompt component.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogUpgrade annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-upgrade annotation-id="abc123"></velt-comment-dialog-upgrade>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogMoreReply

Indicator showing additional replies are available.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogMoreReply annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-more-reply annotation-id="abc123"></velt-comment-dialog-more-reply>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogHideReply

Button to hide replies in a thread.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogHideReply annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-hide-reply annotation-id="abc123"></velt-comment-dialog-hide-reply>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogToggleReply

Toggle control for showing or hiding replies.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogToggleReply annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply annotation-id="abc123"></velt-comment-dialog-toggle-reply>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogToggleReplyShow

Show-replies variant of the reply toggle.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogToggleReplyShow annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply-show annotation-id="abc123"></velt-comment-dialog-toggle-reply-show>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogToggleReplyHide

Hide-replies variant of the reply toggle.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogToggleReplyHide annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply-hide annotation-id="abc123"></velt-comment-dialog-toggle-reply-hide>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogToggleReplyCount

Reply count displayed within the reply toggle.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogToggleReplyCount annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-toggle-reply-count annotation-id="abc123"></velt-comment-dialog-toggle-reply-count>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogSuggestionAction

Container for suggestion accept/reject actions.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogSuggestionAction annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-action annotation-id="abc123"></velt-comment-dialog-suggestion-action>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogSuggestionActionAccept

Button to accept a suggestion.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogSuggestionActionAccept annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-action-accept annotation-id="abc123"></velt-comment-dialog-suggestion-action-accept>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogSuggestionActionReject

Button to reject a suggestion.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogSuggestionActionReject annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-suggestion-action-reject annotation-id="abc123"></velt-comment-dialog-suggestion-action-reject>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCommentSuggestionStatus

Status indicator for a comment suggestion.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCommentSuggestionStatus annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-comment-suggestion-status annotation-id="abc123"></velt-comment-dialog-comment-suggestion-status>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogAssignDropdown

Dropdown for assigning a comment to a user.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogAssignDropdown annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assign-dropdown annotation-id="abc123"></velt-comment-dialog-assign-dropdown>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogAssignMenu

Menu for assignment options.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogAssignMenu annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-assign-menu annotation-id="abc123"></velt-comment-dialog-assign-menu>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogOptions

Options menu for the comment thread.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogOptions annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-options annotation-id="abc123"></velt-comment-dialog-options>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogPriority

Priority selector for the comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogPriority annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-priority annotation-id="abc123"></velt-comment-dialog-priority>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogStatus

Status selector for the comment.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogStatus annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-status annotation-id="abc123"></velt-comment-dialog-status>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltCommentDialogCustomAnnotationDropdown

Dropdown for custom annotation categories.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />
    ```

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-custom-annotation-dropdown annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

## Notes

* **Attribute Naming:** HTML uses kebab-case, React uses camelCase
* **Boolean Values:** HTML uses "true"/"false" strings, React uses actual booleans
* **Object Values:** HTML uses JSON strings, React uses actual objects
* **Required vs Optional:** `annotationId` is required when using standalone mode, not required inside context wrapper

## API Reference

* [Comment Dialog Primitives API](/api-reference/sdk/api/api-methods#comment-dialog-primitives)
* [Data Models](/api-reference/sdk/models/data-models#comment-dialog-primitives)