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

> Reference for the 252 Velt Comment Dialog primitive components (React and HTML) you compose to build a fully custom comment dialog UI.

> [!NOTE]
>
> New here? Start with the [Comment Dialog Customization overview](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/overview.md): it explains when to build with primitives versus re-templating the default dialog with wireframes.

> [!TIP]
>
> Explore primitives interactively in our [Storybook](https://storybook.velt.dev/).

## Overview

The Comment Dialog Primitives API provides 252 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.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogContextWrapper annotationId="abc123">
>   <VeltCommentDialogHeader />
>   <VeltCommentDialogComposer />
> </VeltCommentDialogContextWrapper>
> ```

> [tab] 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>
> ```

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

Each component receives `annotationId` directly and works independently.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogHeader annotationId="abc123" />
> <VeltCommentDialogComposer annotationId="abc123" />
> ```

> [tab] 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>
> ```

> [!NOTE]
>
> **If you use both, the context wrapper wins.** An `annotationId` set on a nested primitive does not override the one it inherits, so don't rely on a per-child ID to opt out of the wrapper's scope: render that child outside the wrapper instead.

## Common Inputs

All components inherit these base inputs. See [`CommentDialogCommonProps`](https://velt.dev/docs/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`](https://velt.dev/docs/api-reference/sdk/models/data-models#commentdialogcontextwrapperprops)

> [tab] 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] 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") |

***

### VeltCommentDialogHeader

Header component for the comment dialog.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogHeader annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogBody

Body container for the comment dialog thread content.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogBody annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogThreadCard

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

> [tab] 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] 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) |

***

### VeltCommentDialogThreadCardAvatar

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardName

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardTime

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardMessage

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardMessageShowMore

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardMessageShowMore />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogThreadCardMessageShowLess

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardMessageShowLess />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogThreadCardReactions

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardReactionTool

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardReactionPin

Reaction pin inside a thread card.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardReactionPin
>   annotationId="abc123"
>   reactionId="reaction-1"
>   commentIndex={0}
> />
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `reactionId` | `string` | No | ID of the reaction |
> | `commentObj` | `any \| string` | No | Comment data object (or serialized JSON string) |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `index` | `number \| string` | No | Index of the reaction pin |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-reaction-pin
>   annotation-id="abc123"
>   reaction-id="reaction-1"
>   comment-index="0">
> </velt-comment-dialog-thread-card-reaction-pin>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `reaction-id` | `string` | No | ID of the reaction |
> | `comment-obj` | `string` (JSON) | No | Comment data object as serialized JSON |
> | `comment-index` | `string` | No | Index of comment in array |
> | `index` | `string` | No | Index of the reaction pin |

***

### VeltCommentDialogThreadCardRecordings

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardReply

Reply indicator for the thread card.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardReply annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogThreadCardUnread

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardEdited

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardDraft

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardDeviceType

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardOptions

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

> [tab] 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] 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 |

***

### VeltCommentDialogThreadCardAssignButton

Assign-to button inside a thread card.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAssignButton
>   annotationId="abc123"
>   commentId="456"
> />
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `commentObj` | `any \| string` | No | Comment data object (or serialized JSON string) |
> | `commentId` | `number \| string` | No | ID of the comment |
> | `commentIndex` | `number \| string` | No | Index of comment in array |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-assign-button
>   annotation-id="abc123"
>   comment-id="456">
> </velt-comment-dialog-thread-card-assign-button>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `comment-obj` | `string` (JSON) | No | Comment data object as serialized JSON |
> | `comment-id` | `string` | No | ID of the comment |
> | `comment-index` | `string` | No | Index of comment in array |

***

### VeltCommentDialogThreadCardEditComposer

Inline edit composer inside a thread card.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardEditComposer
>   annotationId="abc123"
>   commentId="456"
> />
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `commentObj` | `any \| string` | No | Comment data object (or serialized JSON string) |
> | `commentId` | `number \| string` | No | ID of the comment |
> | `commentIndex` | `number \| string` | No | Index of comment in array |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-edit-composer
>   annotation-id="abc123"
>   comment-id="456">
> </velt-comment-dialog-thread-card-edit-composer>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `comment-obj` | `string` (JSON) | No | Comment data object as serialized JSON |
> | `comment-id` | `string` | No | ID of the comment |
> | `comment-index` | `string` | No | Index of comment in array |

***

### VeltCommentDialogProgress

Progress row for a comment while `comment.progress.state` is `'active'`. Renders between the last message and the reply composer. See [Progress](https://velt.dev/docs/async-collaboration/comments/customize-behavior.md#progress) for the underlying behavior.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogProgress annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-progress annotation-id="abc123"></velt-comment-dialog-progress>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

> [!NOTE]
>
> Also exposes its children as nested members: `VeltCommentDialogProgress.Dots` and `VeltCommentDialogProgress.Label`.

***

### VeltCommentDialogProgressDots

Animated dots for the progress row. `aria-hidden`.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogProgressDots annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-progress-dots annotation-id="abc123"></velt-comment-dialog-progress-dots>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogProgressLabel

Step label for the progress row. Renders the last step marked `active`, else the last step's label, else the default "Processing…" label. The row's only live region (`role="status"`, `aria-live="polite"`).

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogProgressLabel annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-progress-label annotation-id="abc123"></velt-comment-dialog-progress-label>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogActions

Chip row for `comment.actions`, falling back to `annotation.actions` when the row has no list of its own. See [Actions](https://velt.dev/docs/async-collaboration/comments/customize-behavior.md#actions) for the underlying behavior.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogActions annotationId="abc123" />
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Default | Description |
> | - | - | - | - |
> | `allowAnnotationInheritance` | `boolean` | `true` | HTML/internal only, not on the React wrapper. When `false`, the row only renders a comment-level list. |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-actions annotation-id="abc123"></velt-comment-dialog-actions>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Default | Description |
> | - | - | - | - |
> | `allow-annotation-inheritance` | `string` | `"true"` | When `"false"`, the row only renders a comment-level list. The built-in progress-row mount sets this `false`. |

> [!NOTE]
>
> Also exposes its child as a nested member: `VeltCommentDialogActions.Chip`.

***

### VeltCommentDialogActionChip

A single action chip. Reachable by pointer, `Enter`, and `Space`; carries `aria-label` (the action's `label`, falling back to its `id`); gets `aria-disabled="true"` and `tabindex="-1"` when disabled.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogActionChip annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-action-chip annotation-id="abc123"></velt-comment-dialog-action-chip>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogComposer

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

> [tab] 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] 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 |

***

### VeltCommentDialogComposerInput

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerInput
>   annotationId="abc123"
>   placeholder="Type here..."
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `placeholder` | `string` | No | Input placeholder text |

> [tab] 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 |

***

### VeltCommentDialogComposerActionButton

Submit/send button for the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerActionButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogComposerAttachmentButton

Button to add file attachments to comments.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogComposerRecorderButton

Button to add audio/video recordings.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerRecorderButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogComposerRecorderPlayer

Player for audio/video recordings in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerRecorderPlayer annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogComposerFiles

Files display in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerFiles annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogComposerAttachmentsImageDownload

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsImageDownload annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogComposerAttachmentsOtherDownload

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsOtherDownload annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogStatusDropdown

Complete status dropdown with trigger and content.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogStatusDropdown annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogStatusDropdownTrigger

Button that opens the status dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogStatusDropdownTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogStatusDropdownTriggerIcon

Icon for the status dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogStatusDropdownTriggerIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogStatusDropdownTriggerName

Name display for the status dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogStatusDropdownTriggerName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogStatusDropdownTriggerArrow

Arrow indicator for the status dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogStatusDropdownTriggerArrow annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogStatusDropdownContent

Dropdown content container for status options.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogStatusDropdownContent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogStatusDropdownContentItem

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

> [tab] 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] 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) |

***

### VeltCommentDialogStatusDropdownContentItemIcon

Icon for a status dropdown item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogStatusDropdownContentItemIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogStatusDropdownContentItemName

Name display for a status dropdown item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogStatusDropdownContentItemName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriorityDropdown

Complete priority dropdown with trigger and content.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriorityDropdown annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriorityDropdownTrigger

Button that opens the priority dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriorityDropdownTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriorityDropdownTriggerIcon

Icon for the priority dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriorityDropdownTriggerIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriorityDropdownTriggerName

Name display for the priority dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriorityDropdownTriggerName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriorityDropdownTriggerArrow

Arrow indicator for the priority dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriorityDropdownTriggerArrow annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriorityDropdownContent

Dropdown content container for priority options.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriorityDropdownContent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriorityDropdownContentItem

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

> [tab] 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] 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) |

***

### VeltCommentDialogPriorityDropdownContentItemIcon

Icon for a priority dropdown item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriorityDropdownContentItemIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriorityDropdownContentItemName

Name display for a priority dropdown item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriorityDropdownContentItemName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriorityDropdownContentItemTick

Tick/checkmark for a priority dropdown item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriorityDropdownContentItemTick annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdown

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

> [tab] 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] 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 |

***

### VeltCommentDialogOptionsDropdownTrigger

Trigger button for the options dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContent

Content container for the options dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContent
>   annotationId="abc123"
>   enableEdit={true}
> />
> ```
>
> **Props:** Common inputs (see [Common Inputs](#common-inputs) section) plus:
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `commentObj` | `any \| string` | No | Comment data object (or serialized JSON string) |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `enableAssignment` | `boolean` | No | Shows the assign option |
> | `enableEdit` | `boolean` | No | Shows the edit option |
> | `enableNotifications` | `boolean` | No | Shows the notifications option |
> | `enablePrivateMode` | `boolean` | No | Shows the private mode option |
> | `enableMarkAsRead` | `boolean` | No | Shows the mark-as-read option |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-options-dropdown-content
>   annotation-id="abc123"
>   enable-edit="true">
> </velt-comment-dialog-options-dropdown-content>
> ```
>
> **Attributes:** Common attributes (see [Common Inputs](#common-inputs) section) plus:
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `comment-obj` | `string` (JSON) | No | Comment data object as serialized JSON |
> | `comment-index` | `string` | No | Index of comment in array |
> | `enable-assignment` | `string` | No | Shows the assign option ("true"/"false") |
> | `enable-edit` | `string` | No | Shows the edit option ("true"/"false") |
> | `enable-notifications` | `string` | No | Shows the notifications option ("true"/"false") |
> | `enable-private-mode` | `string` | No | Shows the private mode option ("true"/"false") |
> | `enable-mark-as-read` | `string` | No | Shows the mark-as-read option ("true"/"false") |

***

### VeltCommentDialogOptionsDropdownContentAssign

Assign option in the options dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentAssign annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentEdit

Edit option in the options dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentEdit annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentDelete

Delete option in the options dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentDelete annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentDeleteComment

Delete comment option in the options dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentDeleteComment annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentDeleteThread

Delete thread option in the options dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentDeleteThread annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentMakePrivate

Make private option container in the options dropdown.

> [!NOTE]
>
> This component is automatically suppressed when the visibility-options dropdown is active (`featureState.visibilityOptions === true`), mirroring the banner/badge behavior. The privacy check routes through the shared `isAnnotationPrivate()` utility, so the correct enable/disable variant is shown for annotations whose privacy is expressed via `visibilityConfig.type === 'restricted'` or `'organizationPrivate'`, in addition to the legacy `iam.accessMode === 'private'`.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentMakePrivate annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentMakePrivateEnable

Enable private mode option.

> [!NOTE]
>
> Auto-suppressed when `featureState.visibilityOptions === true`. Shown when `isAnnotationPrivate()` returns `false`: this includes annotations where `iam.accessMode` is not `'private'` and `visibilityConfig.type` is neither `'restricted'` nor `'organizationPrivate'`.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentMakePrivateEnable annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentMakePrivateDisable

Disable private mode option.

> [!NOTE]
>
> Auto-suppressed when `featureState.visibilityOptions === true`. Shown when `isAnnotationPrivate()` returns `true`: this includes annotations where `iam.accessMode === 'private'` (legacy) or `visibilityConfig.type` is `'restricted'` or `'organizationPrivate'`.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentMakePrivateDisable annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentNotification

Notification option container in the options dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentNotification annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentNotificationSubscribe

Subscribe to notifications option.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentNotificationSubscribe annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

Unsubscribe from notifications option.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentMarkAsRead

Mark as read option container in the options dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentMarkAsRead annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

Mark as read action option.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

Mark as unread action option.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCustomAnnotationDropdown

Dropdown for custom annotation categories.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCustomAnnotationDropdownTrigger

Trigger button for the custom annotation dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCustomAnnotationDropdownTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCustomAnnotationDropdownTriggerArrow

Arrow indicator for the custom annotation dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCustomAnnotationDropdownTriggerArrow annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCustomAnnotationDropdownTriggerList

List container for the custom annotation dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCustomAnnotationDropdownTriggerList annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCustomAnnotationDropdownTriggerListItem

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

> [tab] 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] 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 |

***

### VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

Placeholder for the custom annotation dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

Remaining count indicator for the custom annotation dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCustomAnnotationDropdownContent

Content container for the custom annotation dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCustomAnnotationDropdownContent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCustomAnnotationDropdownContentItem

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

> [tab] 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] 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 |

***

### VeltCommentDialogCustomAnnotationDropdownContentItemIcon

Icon for a custom annotation dropdown item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCustomAnnotationDropdownContentItemIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCustomAnnotationDropdownContentItemLabel

Label for a custom annotation dropdown item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCustomAnnotationDropdownContentItemLabel annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogReplyAvatars

Container for reply avatars.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogReplyAvatars annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogReplyAvatarsList

List container for reply avatars.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogReplyAvatarsList annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogReplyAvatarsListItem

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

> [tab] 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] 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 |

***

### VeltCommentDialogReplyCount

Reply count display.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogReplyCount annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogAssigneeBanner

Assignee banner container.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAssigneeBanner annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogAssigneeBannerResolved

Resolved state of the assignee banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAssigneeBannerResolved annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogAssigneeBannerUnresolved

Unresolved state of the assignee banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAssigneeBannerUnresolved annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogAssigneeBannerUnresolveButton

Button to unresolve the assignee banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAssigneeBannerUnresolveButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltAutocomplete

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

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

> [tab] 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[]`](https://velt.dev/docs/api-reference/sdk/models/data-models#usercontact) | — | Overrides the default contact list |

> [tab] 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 |

***

### VeltAutocompletePanel

Standalone autocomplete panel component (e.g. an inline user picker not tied to a text input).

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompletePanel
>   type="contact"
>   multiSelect={true}
>   selectedFirstOrdering={true}
>   defaultCondition={false}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Default | Description |
> | - | - | - | - |
> | `type` | `'contact' \| 'generic'` | `'contact'` | Type of options the panel renders |
> | `hideInput` | `boolean` | `false` | Hides the search input |
> | `placeholder` | `string` | — | Placeholder text for the search input |
> | `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 panel inline |
> | `enableOnFocus` | `boolean` | `false` | Opens the panel when the input receives focus |
> | `position` | `'above' \| 'below' \| 'auto' \| string` | `'auto'` | Position of the panel relative to its anchor |
> | `defaultCondition` | `boolean` | `true` | When `false`, the component always renders regardless of internal state |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-autocomplete-panel
>   type="contact"
>   multi-select="true"
>   selected-first-ordering="true"
>   default-condition="false"
> ></velt-autocomplete-panel>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Default | Description |
> | - | - | - | - |
> | `type` | `'contact' \| 'generic'` | `"contact"` | Type of options the panel renders |
> | `hide-input` | `string` | `"false"` | Hides the search input |
> | `placeholder` | `string` | — | Placeholder text for the search input |
> | `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 panel inline |
> | `enable-on-focus` | `string` | `"false"` | Opens the panel when the input receives focus |
> | `position` | `'above' \| 'below' \| 'auto' \| string` | `"auto"` | Position of the panel relative to its anchor |
> | `default-condition` | `string` | `"true"` | When `"false"`, the component always renders regardless of internal state |

***

### 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](https://velt.dev/docs/ui-customization/features/async/comments/comment-dialog/wireframes.md) page.

> [tab] 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] 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>
> ```

***

### VeltAutocompleteChip

Standalone autocomplete chip component for rendering selected contact chips.

> [tab] 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] 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 |

***

### VeltAutocompleteOption

Standalone autocomplete option component for rendering contact/custom options.

> [tab] 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] 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 |

***

### VeltAutocompleteOptionDescription

Standalone autocomplete option description component.

> [tab] 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] 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 |

***

### VeltAutocompleteOptionIcon

Icon for an autocomplete option.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteOptionIcon />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-autocomplete-option-icon></velt-autocomplete-option-icon>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltAutocompleteOptionName

Name display for an autocomplete option.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteOptionName />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-autocomplete-option-name></velt-autocomplete-option-name>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltAutocompleteOptionErrorIcon

Error icon for an autocomplete option.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteOptionErrorIcon />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltAutocompleteGroupOption

Group option in the autocomplete panel.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteGroupOption />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-autocomplete-group-option></velt-autocomplete-group-option>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltAutocompleteTool

Tool component for the autocomplete panel.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteTool />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-autocomplete-tool></velt-autocomplete-tool>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltAutocompleteEmpty

Empty state for the autocomplete panel.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteEmpty />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-autocomplete-empty></velt-autocomplete-empty>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltAutocompleteChipTooltip

Tooltip for an autocomplete chip.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteChipTooltip />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-autocomplete-chip-tooltip></velt-autocomplete-chip-tooltip>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltAutocompleteChipTooltipIcon

Icon within the autocomplete chip tooltip.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteChipTooltipIcon />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltAutocompleteChipTooltipName

Name display within the autocomplete chip tooltip.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteChipTooltipName />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltAutocompleteChipTooltipDescription

Description within the autocomplete chip tooltip.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltAutocompleteChipTooltipDescription />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogResolveButton

Button to resolve a comment thread.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogResolveButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogUnresolveButton

Button to unresolve a comment thread.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogUnresolveButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCopyLink

Button to copy the comment link to clipboard.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCopyLink annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCloseButton

Button to close the comment dialog.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCloseButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogDeleteButton

Button to delete a comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogDeleteButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPrivateBanner

Banner indicating a comment's private status.

> [!NOTE]
>
> This component is automatically suppressed when the visibility-options dropdown is active (`featureState.visibilityOptions === true`). It treats an annotation as private when `iam.accessMode === 'private'` (legacy) **or** when `visibilityConfig.type` is `'restricted'` or `'organizationPrivate'` (via the shared `isAnnotationPrivate()` utility).

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPrivateBanner annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPrivateButton

Button to toggle private mode on a comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPrivateButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogGhostBanner

Banner displayed for ghost or anonymous comments.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogGhostBanner annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBanner

Banner displaying the current visibility setting for a comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBanner annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerIcon

Icon within the visibility banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerText

Text label within the visibility banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerText annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdown

Dropdown for selecting visibility options within the banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdown annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownTrigger

Trigger element for the visibility dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownTriggerLabel

Label text within the visibility dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownTriggerLabel annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList

Avatar list within the visibility dropdown trigger showing selected users.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem

Individual avatar within the trigger avatar list.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount

Count of remaining avatars not displayed in the trigger list.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownTriggerIcon

Icon within the visibility dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownTriggerIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContent

Content container for the visibility dropdown options.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentItemIcon

Icon for a visibility option item in the dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentItemIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentItemLabel

Label for a visibility option item in the dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentItemLabel annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPicker

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPicker annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentOrgPicker

Team picker for scoping an `organizationPrivate` comment to specific teams (the "Selected Teams" picker); the team analogue of the user picker. It appears automatically in the comment dialog visibility banner once a team list is provided via `contactElement.updateOrgList()`.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentOrgPicker annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-visibility-banner-dropdown-content-org-picker annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content-org-picker>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch

Search container within the user picker.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon

Search icon within the user picker search.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput

Search input field within the user picker.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader

Header section of the user picker.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount

Count of selected users displayed in the user picker header.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll

Button to unselect all users in the user picker.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem

Individual user item within the user picker.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar

Avatar for a user item in the user picker.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo

Info text for a user item in the user picker.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck

Check indicator for a selected user in the user picker.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogSignIn

Sign-in prompt displayed to unauthenticated users.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSignIn annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogNavigationButton

Button for navigating between comments.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogNavigationButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogAttachmentButton

Button for adding file attachments to a comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAttachmentButton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogDeviceTypeIcons

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogDeviceTypeIcons annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCommentIndex

Display for the comment's index position.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCommentIndex annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCommentNumber

Display for the comment's number.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCommentNumber annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCommentCategory

Display for the comment's category.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCommentCategory annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogMetadata

Display for comment metadata.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogMetadata annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogThreads

Container for the comment threads.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreads annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogAllComment

View for displaying all comments.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAllComment annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogApprove

Approve button for comment approval workflows.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogApprove annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogUpgrade

Upgrade prompt component.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogUpgrade annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogMoreReply

Indicator showing additional replies are available.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogMoreReply annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogMoreReplyCount

Renders the hidden reply count (`annotation.comments.length - 2`, clamped to `0`) in the collapsed replies preview divider; shows when more than two comments exist.

In React wireframe mode this is also exposed as the named sub-property `VeltCommentDialogMoreReply.Count`.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogMoreReplyCount annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-more-reply-count annotation-id="abc123"></velt-comment-dialog-more-reply-count>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogMoreReplyText

Renders the pluralized noun in the collapsed replies preview divider (`reply` when one reply is hidden, otherwise `replies`).

In React wireframe mode this is also exposed as the named sub-property `VeltCommentDialogMoreReply.Text`.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogMoreReplyText annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-more-reply-text annotation-id="abc123"></velt-comment-dialog-more-reply-text>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogHideReply

Button to hide replies in a thread.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogHideReply annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogToggleReply

Toggle control for showing or hiding replies.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogToggleReply annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogToggleReplyShow

Show-replies variant of the reply toggle.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogToggleReplyShow annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogToggleReplyHide

Hide-replies variant of the reply toggle.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogToggleReplyHide annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogToggleReplyCount

Reply count displayed within the reply toggle.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogToggleReplyCount annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogCommentSuggestionStatus

Status indicator for a comment suggestion.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogCommentSuggestionStatus annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogAssignDropdown

Dropdown for assigning a comment to a user.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAssignDropdown annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogAssignMenu

Menu for assignment options.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAssignMenu annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogOptions

Options menu for the comment thread.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogOptions annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogPriority

Priority selector for the comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogPriority annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogStatus

Status selector for the comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogStatus annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogSuggestionBanner

Container for the suggestion resolution banner shown after a suggestion is accepted or rejected.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionBanner annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-banner annotation-id="abc123"></velt-comment-dialog-suggestion-banner>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionBannerAvatar

Avatar container within the suggestion resolution banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionBannerAvatar annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-banner-avatar annotation-id="abc123"></velt-comment-dialog-suggestion-banner-avatar>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionBannerAvatarUserImage

User image within the banner avatar.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionBannerAvatarUserImage annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-banner-avatar-user-image annotation-id="abc123"></velt-comment-dialog-suggestion-banner-avatar-user-image>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionBannerAvatarStatusIcon

Status icon within the banner avatar indicating accepted or rejected state.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionBannerAvatarStatusIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-banner-avatar-status-icon annotation-id="abc123"></velt-comment-dialog-suggestion-banner-avatar-status-icon>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionBannerLabel

Text label in the banner describing the resolution action (e.g. "Accepted" or "Rejected").

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionBannerLabel annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-banner-label annotation-id="abc123"></velt-comment-dialog-suggestion-banner-label>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionBannerSeparator

Visual separator between the label and the resolver user name in the banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionBannerSeparator annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-banner-separator annotation-id="abc123"></velt-comment-dialog-suggestion-banner-separator>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionBannerResolverUserName

Display name of the user who resolved the suggestion.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionBannerResolverUserName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-banner-resolver-user-name annotation-id="abc123"></velt-comment-dialog-suggestion-banner-resolver-user-name>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionBannerTimestamp

Timestamp showing when the suggestion was resolved.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionBannerTimestamp annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-banner-timestamp annotation-id="abc123"></velt-comment-dialog-suggestion-banner-timestamp>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderTimestamp

Relative timestamp displayed in the suggestion header.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderTimestamp annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-timestamp annotation-id="abc123"></velt-comment-dialog-suggestion-header-timestamp>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderMenu

Overflow menu (3-dot) in the suggestion header.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderMenu annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-menu annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderMenuTrigger

Trigger button that opens the suggestion header overflow menu.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderMenuTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-menu-trigger annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-trigger>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderMenuContent

Content container for the suggestion header overflow menu.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderMenuContent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-menu-content annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-content>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderMenuContentItem

Individual item within the suggestion header overflow menu.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderMenuContentItem annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-menu-content-item annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-content-item>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderMenuContentItemIcon

Icon for an individual suggestion header menu item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderMenuContentItemIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-menu-content-item-icon annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-content-item-icon>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderMenuContentItemLabel

Label for an individual suggestion header menu item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderMenuContentItemLabel annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-menu-content-item-label annotation-id="abc123"></velt-comment-dialog-suggestion-header-menu-content-item-label>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionBody

Body of the suggestion card, displaying the suggestion title and content.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionBody annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-body annotation-id="abc123"></velt-comment-dialog-suggestion-body>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionFooter

Footer container of the suggestion card.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionFooter annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-footer annotation-id="abc123"></velt-comment-dialog-suggestion-footer>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionFooterOpenComment

"Open Comment" affordance in the suggestion footer that navigates to the full comment thread.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionFooterOpenComment annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-footer-open-comment annotation-id="abc123"></velt-comment-dialog-suggestion-footer-open-comment>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionActions

Accept/reject button group for the suggestion.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionActions annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-actions annotation-id="abc123"></velt-comment-dialog-suggestion-actions>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionActionAccept

Button to accept the suggestion.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionActionAccept annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogSuggestionActionReject

Button to reject the suggestion.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionActionReject annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltCommentDialogAssigneeBannerResolveButton

Resolve button inside the assignee banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAssigneeBannerResolveButton
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-assignee-banner-resolve-button
>   annotation-id="abc123">
> </velt-comment-dialog-assignee-banner-resolve-button>
> ```

***

### VeltCommentDialogAssigneeBannerUserAvatar

Avatar of the assigned user in the assignee banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAssigneeBannerUserAvatar
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-assignee-banner-user-avatar
>   annotation-id="abc123">
> </velt-comment-dialog-assignee-banner-user-avatar>
> ```

***

### VeltCommentDialogAssigneeBannerUserName

Name of the assigned user in the assignee banner.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogAssigneeBannerUserName
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-assignee-banner-user-name
>   annotation-id="abc123">
> </velt-comment-dialog-assignee-banner-user-name>
> ```

***

### VeltCommentDialogComposerAssignUser

Assign-user control in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAssignUser
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-assign-user
>   annotation-id="abc123">
> </velt-comment-dialog-composer-assign-user>
> ```

***

### VeltCommentDialogComposerAvatar

Current user's avatar in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAvatar
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-avatar
>   annotation-id="abc123">
> </velt-comment-dialog-composer-avatar>
> ```

***

### VeltCommentDialogComposerPrivateBadge

Badge shown in the composer when the comment will be private.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerPrivateBadge
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-private-badge
>   annotation-id="abc123">
> </velt-comment-dialog-composer-private-badge>
> ```

***

### VeltCommentDialogComposerRecordings

Recordings attached in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerRecordings
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-recordings
>   annotation-id="abc123">
> </velt-comment-dialog-composer-recordings>
> ```

***

### VeltCommentDialogComposerFormatToolbar

Rich-text formatting toolbar in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerFormatToolbar
>   annotationId="abc123"
>   editMode={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `editMode` | `boolean` | No | Whether the composer is in edit mode |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-format-toolbar
>   annotation-id="abc123"
>   edit-mode="true">
> </velt-comment-dialog-composer-format-toolbar>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `edit-mode` | `string` | No | Whether the composer is in edit mode |

***

### VeltCommentDialogComposerFormatToolbarButton

A single formatting button in the composer's toolbar. Set `type` to pick which one.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerFormatToolbarButton
>   annotationId="abc123"
>   type="bold"
>   editMode={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `type` | `'bold' \| 'italic' \| 'underline' \| 'strikethrough'` | No | Which variant to render |
> | `editMode` | `boolean` | No | Whether the composer is in edit mode |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-format-toolbar-button
>   annotation-id="abc123"
>   type="bold"
>   edit-mode="true">
> </velt-comment-dialog-composer-format-toolbar-button>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `type` | `string` | No | Which variant to render |
> | `edit-mode` | `string` | No | Whether the composer is in edit mode |

***

### VeltCommentDialogComposerAttachments

Container for the attachments staged in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachments
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments
>   annotation-id="abc123">
> </velt-comment-dialog-composer-attachments>
> ```

***

### VeltCommentDialogComposerAttachmentsSelected

The set of attachments currently selected in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsSelected
>   annotationId="abc123"
>   isEditMode={true}
>   loading={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `files` | `any[]` | No | The attachment objects |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |
> | `loading` | `boolean` | No | Whether the attachment is still uploading |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-selected
>   annotation-id="abc123"
>   is-edit-mode="true"
>   loading="true">
> </velt-comment-dialog-composer-attachments-selected>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `files` | `string (JSON)` | No | The attachment objects |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |
> | `loading` | `string` | No | Whether the attachment is still uploading |

***

### VeltCommentDialogComposerAttachmentsImage

An image attachment staged in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsImage
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
>   loading={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |
> | `loading` | `boolean` | No | Whether the attachment is still uploading |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-image
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true"
>   loading="true">
> </velt-comment-dialog-composer-attachments-image>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |
> | `loading` | `string` | No | Whether the attachment is still uploading |

***

### VeltCommentDialogComposerAttachmentsImagePreview

Preview thumbnail of a staged image attachment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsImagePreview
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-image-preview
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true">
> </velt-comment-dialog-composer-attachments-image-preview>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |

***

### VeltCommentDialogComposerAttachmentsImageDelete

Delete control on a staged image attachment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsImageDelete
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
>   loading={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |
> | `loading` | `boolean` | No | Whether the attachment is still uploading |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-image-delete
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true"
>   loading="true">
> </velt-comment-dialog-composer-attachments-image-delete>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |
> | `loading` | `string` | No | Whether the attachment is still uploading |

***

### VeltCommentDialogComposerAttachmentsImageLoading

Loading indicator shown while a staged image uploads.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsImageLoading
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
>   loading={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |
> | `loading` | `boolean` | No | Whether the attachment is still uploading |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-image-loading
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true"
>   loading="true">
> </velt-comment-dialog-composer-attachments-image-loading>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |
> | `loading` | `string` | No | Whether the attachment is still uploading |

***

### VeltCommentDialogComposerAttachmentsOther

A non-image attachment staged in the composer.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsOther
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
>   loading={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |
> | `loading` | `boolean` | No | Whether the attachment is still uploading |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-other
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true"
>   loading="true">
> </velt-comment-dialog-composer-attachments-other>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |
> | `loading` | `string` | No | Whether the attachment is still uploading |

***

### VeltCommentDialogComposerAttachmentsOtherIcon

File-type icon for a staged non-image attachment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsOtherIcon
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-other-icon
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true">
> </velt-comment-dialog-composer-attachments-other-icon>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |

***

### VeltCommentDialogComposerAttachmentsOtherName

File name of a staged non-image attachment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsOtherName
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-other-name
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true">
> </velt-comment-dialog-composer-attachments-other-name>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |

***

### VeltCommentDialogComposerAttachmentsOtherSize

File size of a staged non-image attachment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsOtherSize
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-other-size
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true">
> </velt-comment-dialog-composer-attachments-other-size>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |

***

### VeltCommentDialogComposerAttachmentsOtherDelete

Delete control on a staged non-image attachment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsOtherDelete
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
>   loading={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |
> | `loading` | `boolean` | No | Whether the attachment is still uploading |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-other-delete
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true"
>   loading="true">
> </velt-comment-dialog-composer-attachments-other-delete>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |
> | `loading` | `string` | No | Whether the attachment is still uploading |

***

### VeltCommentDialogComposerAttachmentsOtherLoading

Loading indicator shown while a staged non-image attachment uploads.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsOtherLoading
>   annotationId="abc123"
>   fileIndex={0}
>   isEditMode={true}
>   loading={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |
> | `isEditMode` | `boolean` | No | Whether the composer is editing an existing comment |
> | `loading` | `boolean` | No | Whether the attachment is still uploading |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-other-loading
>   annotation-id="abc123"
>   file-index="0"
>   is-edit-mode="true"
>   loading="true">
> </velt-comment-dialog-composer-attachments-other-loading>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |
> | `is-edit-mode` | `string` | No | Whether the composer is editing an existing comment |
> | `loading` | `string` | No | Whether the attachment is still uploading |

***

### VeltCommentDialogComposerAttachmentsInvalid

Container for attachments the composer rejected.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsInvalid
>   annotationId="abc123"
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `files` | `any[]` | No | The attachment objects |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-invalid
>   annotation-id="abc123">
> </velt-comment-dialog-composer-attachments-invalid>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `files` | `string (JSON)` | No | The attachment objects |

***

### VeltCommentDialogComposerAttachmentsInvalidItem

A single rejected attachment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsInvalidItem
>   annotationId="abc123"
>   fileIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-invalid-item
>   annotation-id="abc123"
>   file-index="0">
> </velt-comment-dialog-composer-attachments-invalid-item>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |

***

### VeltCommentDialogComposerAttachmentsInvalidItemPreview

Preview of a rejected attachment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsInvalidItemPreview
>   annotationId="abc123"
>   fileIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-invalid-item-preview
>   annotation-id="abc123"
>   file-index="0">
> </velt-comment-dialog-composer-attachments-invalid-item-preview>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |

***

### VeltCommentDialogComposerAttachmentsInvalidItemMessage

Message explaining why an attachment was rejected.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsInvalidItemMessage
>   annotationId="abc123"
>   fileIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-invalid-item-message
>   annotation-id="abc123"
>   file-index="0">
> </velt-comment-dialog-composer-attachments-invalid-item-message>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |

***

### VeltCommentDialogComposerAttachmentsInvalidItemDelete

Delete control on a rejected attachment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogComposerAttachmentsInvalidItemDelete
>   annotationId="abc123"
>   fileIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `file` | `any` | No | The attachment object |
> | `fileIndex` | `number \| string` | No | Index of the attachment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-composer-attachments-invalid-item-delete
>   annotation-id="abc123"
>   file-index="0">
> </velt-comment-dialog-composer-attachments-invalid-item-delete>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `file` | `string (JSON)` | No | The attachment object |
> | `file-index` | `string` | No | Index of the attachment |

***

### VeltCommentDialogThreadCardAttachments

Container for the attachments on a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachments
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentId` | `string` | No | ID of the attachment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0">
> </velt-comment-dialog-thread-card-attachments>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-id` | `string` | No | ID of the attachment |

***

### VeltCommentDialogThreadCardAttachmentsImage

An image attachment on a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsImage
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-image
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-image>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardAttachmentsImagePreview

Preview thumbnail of an image attachment on a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsImagePreview
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-image-preview
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-image-preview>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardAttachmentsImageDelete

Delete control on an image attachment of a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsImageDelete
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-image-delete
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-image-delete>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardAttachmentsImageDownload

Download control on an image attachment of a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsImageDownload
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-image-download
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-image-download>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardAttachmentsOther

A non-image attachment on a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsOther
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-other
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-other>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardAttachmentsOtherIcon

File-type icon for a non-image attachment on a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsOtherIcon
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-other-icon
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-other-icon>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardAttachmentsOtherName

File name of a non-image attachment on a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsOtherName
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-other-name
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-other-name>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardAttachmentsOtherSize

File size of a non-image attachment on a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsOtherSize
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-other-size
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-other-size>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardAttachmentsOtherDelete

Delete control on a non-image attachment of a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsOtherDelete
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-other-delete
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-other-delete>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardAttachmentsOtherDownload

Download control on a non-image attachment of a posted comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardAttachmentsOtherDownload
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   attachmentIndex={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `any \| string` | No | The attachment object |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `attachmentIndex` | `number \| string` | No | Index of the attachment in the comment |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-attachments-other-download
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   attachment-index="0">
> </velt-comment-dialog-thread-card-attachments-other-download>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `attachment` | `string (JSON)` | No | The attachment object |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `attachment-index` | `string` | No | Index of the attachment in the comment |

***

### VeltCommentDialogThreadCardSeenDropdown

Dropdown listing the users who have seen the comment.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardSeenDropdown
>   annotationId="abc123"
>   commentId={0}
>   commentIndex={0}
>   enableSeenByUsers={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string` | No | Comment ID for lookup |
> | `commentIndex` | `number \| string` | No | Index of comment in array |
> | `enableSeenByUsers` | `boolean \| string` | No | Whether seen-by tracking is on |
> | `isDraft` | `boolean \| string` | No | Whether the comment is an unsent draft |
> | `viewCount` | `number \| string` | No | Number of views |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-seen-dropdown
>   annotation-id="abc123"
>   comment-id="0"
>   comment-index="0"
>   enable-seen-by-users="true">
> </velt-comment-dialog-thread-card-seen-dropdown>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `comment-index` | `string` | No | Index of comment in array |
> | `enable-seen-by-users` | `string` | No | Whether seen-by tracking is on |
> | `is-draft` | `string` | No | Whether the comment is an unsent draft |
> | `view-count` | `string` | No | Number of views |

***

### VeltCommentDialogThreadCardSeenDropdownTrigger

Trigger that opens the seen-by dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardSeenDropdownTrigger
>   annotationId="abc123"
>   isDropdownOpen={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `isDropdownOpen` | `boolean` | No | Whether the dropdown is open |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-seen-dropdown-trigger
>   annotation-id="abc123"
>   is-dropdown-open="true">
> </velt-comment-dialog-thread-card-seen-dropdown-trigger>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `is-dropdown-open` | `string` | No | Whether the dropdown is open |

***

### VeltCommentDialogThreadCardSeenDropdownContent

Content panel of the seen-by dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardSeenDropdownContent
>   annotationId="abc123"
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `commentObj` | `any \| string` | No | Direct comment object |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-seen-dropdown-content
>   annotation-id="abc123">
> </velt-comment-dialog-thread-card-seen-dropdown-content>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |

***

### VeltCommentDialogThreadCardSeenDropdownContentTitle

Title row of the seen-by dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardSeenDropdownContentTitle
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-seen-dropdown-content-title
>   annotation-id="abc123">
> </velt-comment-dialog-thread-card-seen-dropdown-content-title>
> ```

***

### VeltCommentDialogThreadCardSeenDropdownContentItems

List of viewers in the seen-by dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardSeenDropdownContentItems
>   annotationId="abc123"
>   commentId={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `commentId` | `number \| string \| null` | No | Comment ID for lookup |
> | `views` | `any[]` | No | The view records |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-seen-dropdown-content-items
>   annotation-id="abc123"
>   comment-id="0">
> </velt-comment-dialog-thread-card-seen-dropdown-content-items>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `comment-id` | `string` | No | Comment ID for lookup |
> | `views` | `string (JSON)` | No | The view records |

***

### VeltCommentDialogThreadCardSeenDropdownContentItem

A single viewer row in the seen-by dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardSeenDropdownContentItem
>   annotationId="abc123"
>   viewedAt={0}
>   index={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `commentObj` | `any \| string` | No | Direct comment object |
> | `view` | `any \| string` | No | The view record |
> | `user` | `any \| string` | No | The viewing user |
> | `userName` | `string \| null` | No | Viewer name |
> | `userEmail` | `string \| null` | No | Viewer email |
> | `viewedAt` | `number \| string \| null` | No | Timestamp the comment was viewed |
> | `index` | `number \| string` | No | Index in the list |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-seen-dropdown-content-item
>   annotation-id="abc123"
>   viewed-at="0"
>   index="0">
> </velt-comment-dialog-thread-card-seen-dropdown-content-item>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `comment-obj` | `string (JSON)` | No | Direct comment object |
> | `view` | `string (JSON)` | No | The view record |
> | `user` | `string (JSON)` | No | The viewing user |
> | `user-name` | `string` | No | Viewer name |
> | `user-email` | `string` | No | Viewer email |
> | `viewed-at` | `string` | No | Timestamp the comment was viewed |
> | `index` | `string` | No | Index in the list |

***

### VeltCommentDialogThreadCardSeenDropdownContentItemAvatar

Viewer's avatar in a seen-by row.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardSeenDropdownContentItemAvatar
>   annotationId="abc123"
>   index={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `view` | `any \| string` | No | The view record |
> | `user` | `any \| string` | No | The viewing user |
> | `userName` | `string \| null` | No | Viewer name |
> | `userEmail` | `string \| null` | No | Viewer email |
> | `index` | `number \| string` | No | Index in the list |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-seen-dropdown-content-item-avatar
>   annotation-id="abc123"
>   index="0">
> </velt-comment-dialog-thread-card-seen-dropdown-content-item-avatar>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `view` | `string (JSON)` | No | The view record |
> | `user` | `string (JSON)` | No | The viewing user |
> | `user-name` | `string` | No | Viewer name |
> | `user-email` | `string` | No | Viewer email |
> | `index` | `string` | No | Index in the list |

***

### VeltCommentDialogThreadCardSeenDropdownContentItemName

Viewer's name in a seen-by row.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardSeenDropdownContentItemName
>   annotationId="abc123"
>   index={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `view` | `any \| string` | No | The view record |
> | `user` | `any \| string` | No | The viewing user |
> | `userName` | `string \| null` | No | Viewer name |
> | `userEmail` | `string \| null` | No | Viewer email |
> | `index` | `number \| string` | No | Index in the list |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-seen-dropdown-content-item-name
>   annotation-id="abc123"
>   index="0">
> </velt-comment-dialog-thread-card-seen-dropdown-content-item-name>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `view` | `string (JSON)` | No | The view record |
> | `user` | `string (JSON)` | No | The viewing user |
> | `user-name` | `string` | No | Viewer name |
> | `user-email` | `string` | No | Viewer email |
> | `index` | `string` | No | Index in the list |

***

### VeltCommentDialogThreadCardSeenDropdownContentItemTime

Time the viewer saw the comment, in a seen-by row.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogThreadCardSeenDropdownContentItemTime
>   annotationId="abc123"
>   viewedAt={0}
>   index={0}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `view` | `any \| string` | No | The view record |
> | `viewedAt` | `number \| string \| null` | No | Timestamp the comment was viewed |
> | `userName` | `string \| null` | No | Viewer name |
> | `userEmail` | `string \| null` | No | Viewer email |
> | `index` | `number \| string` | No | Index in the list |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-thread-card-seen-dropdown-content-item-time
>   annotation-id="abc123"
>   viewed-at="0"
>   index="0">
> </velt-comment-dialog-thread-card-seen-dropdown-content-item-time>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `view` | `string (JSON)` | No | The view record |
> | `viewed-at` | `string` | No | Timestamp the comment was viewed |
> | `user-name` | `string` | No | Viewer name |
> | `user-email` | `string` | No | Viewer email |
> | `index` | `string` | No | Index in the list |

***

### VeltCommentDialogVisibilityDropdown

Dropdown for switching a comment between public and private.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityDropdown
>   annotationId="abc123"
>   disabled={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `disabled` | `boolean` | No | Disable the control |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-visibility-dropdown
>   annotation-id="abc123"
>   disabled="true">
> </velt-comment-dialog-visibility-dropdown>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `disabled` | `string` | No | Disable the control |

***

### VeltCommentDialogVisibilityDropdownTrigger

Trigger that opens the visibility dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityDropdownTrigger
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-visibility-dropdown-trigger
>   annotation-id="abc123">
> </velt-comment-dialog-visibility-dropdown-trigger>
> ```

***

### VeltCommentDialogVisibilityDropdownTriggerIcon

Icon on the visibility dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityDropdownTriggerIcon
>   annotationId="abc123"
> />
> ```

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

***

### VeltCommentDialogVisibilityDropdownTriggerLabel

Label on the visibility dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityDropdownTriggerLabel
>   annotationId="abc123"
> />
> ```

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

***

### VeltCommentDialogVisibilityDropdownContent

Content panel of the visibility dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityDropdownContent
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-visibility-dropdown-content
>   annotation-id="abc123">
> </velt-comment-dialog-visibility-dropdown-content>
> ```

***

### VeltCommentDialogVisibilityDropdownContentPublic

The public option in the visibility dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityDropdownContentPublic
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-visibility-dropdown-content-public
>   annotation-id="abc123">
> </velt-comment-dialog-visibility-dropdown-content-public>
> ```

***

### VeltCommentDialogVisibilityDropdownContentPrivate

The private option in the visibility dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityDropdownContentPrivate
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-visibility-dropdown-content-private
>   annotation-id="abc123">
> </velt-comment-dialog-visibility-dropdown-content-private>
> ```

***

### VeltCommentDialogVisibilityBannerDropdownContentItem

An option in the visibility banner's dropdown. Set `type` to pick which one.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogVisibilityBannerDropdownContentItem
>   annotationId="abc123"
>   type="restrictedSelf"
> />
> ```
>
> **Props:**
>
> | Prop | Type | Required | Description |
> | - | - | - | - |
> | `type` | `'restrictedSelf' \| 'restrictedSelectedPeople' \| 'organizationPrivate' \| 'public'` | No | Which variant to render |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-visibility-banner-dropdown-content-item
>   annotation-id="abc123"
>   type="restrictedSelf">
> </velt-comment-dialog-visibility-banner-dropdown-content-item>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Required | Description |
> | - | - | - | - |
> | `type` | `string` | No | Which variant to render |

***

### VeltCommentDialogToggleReplyIcon

Icon on the show/hide replies toggle.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogToggleReplyIcon
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-toggle-reply-icon
>   annotation-id="abc123">
> </velt-comment-dialog-toggle-reply-icon>
> ```

***

### VeltCommentDialogToggleReplyText

Label on the show/hide replies toggle.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogToggleReplyText
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-toggle-reply-text
>   annotation-id="abc123">
> </velt-comment-dialog-toggle-reply-text>
> ```

***

### VeltCommentDialogReplyAvatarsRemainingCount

The "+N" overflow count on the reply avatar list.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogReplyAvatarsRemainingCount
>   annotationId="abc123"
> />
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-reply-avatars-remaining-count
>   annotation-id="abc123">
> </velt-comment-dialog-reply-avatars-remaining-count>
> ```

***

## VeltCommentDialogSuggestion

Primitive components for rendering the suggestion card within a comment dialog. The card renders for any suggestion annotation (human-authored or AI-agent-authored) with the header identity varying by source (see [VeltCommentDialogSuggestionHeaderAgent](#veltcommentdialogsuggestionheaderagent) and [VeltCommentDialogSuggestionHeaderAuthor](#veltcommentdialogsuggestionheaderauthor)).

Props: [`CommentDialogSuggestionProps`](https://velt.dev/docs/api-reference/sdk/models/data-models#commentdialogsuggestionprops)

***

### VeltCommentDialogSuggestion

Container for the suggestion card.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestion annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion annotation-id="abc123"></velt-comment-dialog-suggestion>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeader

Header section of the suggestion card, containing identity, timestamp, and menu.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeader annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header annotation-id="abc123"></velt-comment-dialog-suggestion-header>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderAgent

Agent-identity variant of the suggestion header, shown when the source is an AI agent.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderAgent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-agent annotation-id="abc123"></velt-comment-dialog-suggestion-header-agent>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderAuthor

Human-author variant of the suggestion header, shown when the source is a human user.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderAuthor annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-author annotation-id="abc123"></velt-comment-dialog-suggestion-header-author>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderAgentAvatar

Agent avatar displayed in the agent-identity header variant.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderAgentAvatar annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-agent-avatar annotation-id="abc123"></velt-comment-dialog-suggestion-header-agent-avatar>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderAgentName

Agent display name shown in the agent-identity header variant.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderAgentName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-agent-name annotation-id="abc123"></velt-comment-dialog-suggestion-header-agent-name>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderAuthorAvatar

Human author avatar displayed in the author-identity header variant.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderAuthorAvatar annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-author-avatar annotation-id="abc123"></velt-comment-dialog-suggestion-header-author-avatar>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltCommentDialogSuggestionHeaderAuthorName

Human author name shown in the author-identity header variant.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogSuggestionHeaderAuthorName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-comment-dialog-suggestion-header-author-name annotation-id="abc123"></velt-comment-dialog-suggestion-header-author-name>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

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

* [Data Models](https://velt.dev/docs/api-reference/sdk/models/data-models.md#comment-dialog-primitives)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.