Comment Dialog Primitives

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

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

Usage Patterns

Pattern 1: Context Wrapper (Recommended)

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

React / Next.js
Other Frameworks

<VeltCommentDialogContextWrapper annotationId="abc123">
  <VeltCommentDialogHeader />
  <VeltCommentDialogComposer />
</VeltCommentDialogContextWrapper>

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

React / Next.js
Other Frameworks

<VeltCommentDialogHeader annotationId="abc123" />
<VeltCommentDialogComposer annotationId="abc123" />

<velt-comment-dialog-header annotation-id="abc123"></velt-comment-dialog-header>
<velt-comment-dialog-composer annotation-id="abc123"></velt-comment-dialog-composer>

Common Inputs

All components inherit these base inputs. See 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

React / Next.js
Other Frameworks

<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

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

React / Next.js
Other Frameworks

<VeltCommentDialogHeader annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-header annotation-id="abc123"></velt-comment-dialog-header>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogBody

Body container for the comment dialog thread content.

React / Next.js
Other Frameworks

<VeltCommentDialogBody annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-body annotation-id="abc123"></velt-comment-dialog-body>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogThreadCard

Complete thread card with all comment metadata and content. See ThreadCardProps.

React / Next.js
Other Frameworks

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

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardAvatar
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardName
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardTime
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardMessage
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardMessageShowMore />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-thread-card-message-show-more></velt-comment-dialog-thread-card-message-show-more>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogThreadCardMessageShowLess

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardMessageShowLess />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-thread-card-message-show-less></velt-comment-dialog-thread-card-message-show-less>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogThreadCardReactions

Reactions display for the comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardReactions
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardReactionTool
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogThreadCardRecordings

Recordings attached to the comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardRecordings
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardReply annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-thread-card-reply annotation-id="abc123"></velt-comment-dialog-thread-card-reply>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogThreadCardUnread

Unread indicator for the comment. See CommentIndexProps.

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardUnread
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardEdited
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardDraft
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardDeviceType
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

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

React / Next.js
Other Frameworks

<VeltCommentDialogThreadCardOptions
  annotationId="abc123"
  commentIndex={0}
/>

Props:

Prop	Type	Required	Description
`commentIndex`	`number`	No	Index of comment in array

<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

VeltCommentDialogComposer

Complete composer with input, attachments, and action buttons. See ComposerProps.

React / Next.js
Other Frameworks

<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

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

React / Next.js
Other Frameworks

<VeltCommentDialogComposerInput
  annotationId="abc123"
  placeholder="Type here..."
/>

Props:

Prop	Type	Required	Description
`placeholder`	`string`	No	Input placeholder text

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

React / Next.js
Other Frameworks

<VeltCommentDialogComposerActionButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-composer-action-button annotation-id="abc123"></velt-comment-dialog-composer-action-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogComposerAttachmentButton

Button to add file attachments to comments.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerAttachmentButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-composer-attachment-button annotation-id="abc123"></velt-comment-dialog-composer-attachment-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogComposerRecorderButton

Button to add audio/video recordings.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerRecorderButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-composer-recorder-button annotation-id="abc123"></velt-comment-dialog-composer-recorder-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogComposerRecorderPlayer

Player for audio/video recordings in the composer.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerRecorderPlayer annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-composer-recorder-player annotation-id="abc123"></velt-comment-dialog-composer-recorder-player>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogComposerFiles

Files display in the composer.

React / Next.js
Other Frameworks

<VeltCommentDialogComposerFiles annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-composer-files annotation-id="abc123"></velt-comment-dialog-composer-files>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogComposerAttachmentsImageDownload

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

React / Next.js
Other Frameworks

<VeltCommentDialogComposerAttachmentsImageDownload annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-composer-attachments-image-download annotation-id="abc123"></velt-comment-dialog-composer-attachments-image-download>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogComposerAttachmentsOtherDownload

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

React / Next.js
Other Frameworks

<VeltCommentDialogComposerAttachmentsOtherDownload annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-composer-attachments-other-download annotation-id="abc123"></velt-comment-dialog-composer-attachments-other-download>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogStatusDropdown

Complete status dropdown with trigger and content.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-status-dropdown annotation-id="abc123"></velt-comment-dialog-status-dropdown>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogStatusDropdownTrigger

Button that opens the status dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownTrigger annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-status-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogStatusDropdownTriggerIcon

Icon for the status dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownTriggerIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-status-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-icon>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogStatusDropdownTriggerName

Name display for the status dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownTriggerName annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-status-dropdown-trigger-name annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-name>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogStatusDropdownTriggerArrow

Arrow indicator for the status dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownTriggerArrow annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-status-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-status-dropdown-trigger-arrow>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogStatusDropdownContent

Dropdown content container for status options.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownContent annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-status-dropdown-content annotation-id="abc123"></velt-comment-dialog-status-dropdown-content>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogStatusDropdownContentItem

Individual status item in the dropdown. See StatusDropdownItemProps.

React / Next.js
Other Frameworks

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

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

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownContentItemIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogStatusDropdownContentItemName

Name display for a status dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogStatusDropdownContentItemName annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogPriorityDropdown

Complete priority dropdown with trigger and content.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-priority-dropdown annotation-id="abc123"></velt-comment-dialog-priority-dropdown>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogPriorityDropdownTrigger

Button that opens the priority dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownTrigger annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-priority-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogPriorityDropdownTriggerIcon

Icon for the priority dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownTriggerIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-priority-dropdown-trigger-icon annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-icon>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogPriorityDropdownTriggerName

Name display for the priority dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownTriggerName annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-priority-dropdown-trigger-name annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-name>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogPriorityDropdownTriggerArrow

Arrow indicator for the priority dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownTriggerArrow annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-priority-dropdown-trigger-arrow annotation-id="abc123"></velt-comment-dialog-priority-dropdown-trigger-arrow>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogPriorityDropdownContent

Dropdown content container for priority options.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownContent annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-priority-dropdown-content annotation-id="abc123"></velt-comment-dialog-priority-dropdown-content>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogPriorityDropdownContentItem

Individual priority item in the dropdown. See PriorityDropdownItemProps.

React / Next.js
Other Frameworks

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

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

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownContentItemIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogPriorityDropdownContentItemName

Name display for a priority dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownContentItemName annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogPriorityDropdownContentItemTick

Tick/checkmark for a priority dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogPriorityDropdownContentItemTick annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdown

Options menu for actions like assignment, editing, and notifications. See OptionsDropdownProps.

React / Next.js
Other Frameworks

<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

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

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownTrigger annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-options-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-options-dropdown-trigger>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogOptionsDropdownContent

Content container for the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContent annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-options-dropdown-content annotation-id="abc123"></velt-comment-dialog-options-dropdown-content>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogOptionsDropdownContentAssign

Assign option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentAssign annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-options-dropdown-content-assign annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-assign>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogOptionsDropdownContentEdit

Edit option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentEdit annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-options-dropdown-content-edit annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-edit>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogOptionsDropdownContentDelete

Delete option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentDelete annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-options-dropdown-content-delete annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-delete>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogOptionsDropdownContentDeleteComment

Delete comment option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentDeleteComment annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdownContentDeleteThread

Delete thread option in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentDeleteThread annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdownContentMakePrivate

Make private option container in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMakePrivate annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdownContentMakePrivateEnable

Enable private mode option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMakePrivateEnable annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdownContentMakePrivateDisable

Disable private mode option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMakePrivateDisable annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdownContentNotification

Notification option container in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentNotification annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-options-dropdown-content-notification annotation-id="abc123"></velt-comment-dialog-options-dropdown-content-notification>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogOptionsDropdownContentNotificationSubscribe

Subscribe to notifications option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentNotificationSubscribe annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

Unsubscribe from notifications option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdownContentMarkAsRead

Mark as read option container in the options dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMarkAsRead annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

Mark as read action option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

Mark as unread action option.

React / Next.js
Other Frameworks

<VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogCustomAnnotationDropdown

Custom annotation dropdown component.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-custom-annotation-dropdown annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCustomAnnotationDropdownTrigger

Trigger button for the custom annotation dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTrigger annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-custom-annotation-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-trigger>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCustomAnnotationDropdownTriggerArrow

Arrow indicator for the custom annotation dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerArrow annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogCustomAnnotationDropdownTriggerList

List container for the custom annotation dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerList annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogCustomAnnotationDropdownTriggerListItem

Individual item in the custom annotation dropdown trigger list. See CustomAnnotationItemProps.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerListItem
  annotationId="abc123"
  item={itemData}
  index={0}
/>

Props:

Prop	Type	Required	Description
`item`	`object`	No	Item data object
`index`	`number`	No	Item index

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

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

Remaining count indicator for the custom annotation dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogCustomAnnotationDropdownContent

Content container for the custom annotation dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownContent annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-custom-annotation-dropdown-content annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown-content>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCustomAnnotationDropdownContentItem

Individual item in the custom annotation dropdown content. See CustomAnnotationItemProps.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownContentItem
  annotationId="abc123"
  item={itemData}
  index={0}
/>

Props:

Prop	Type	Required	Description
`item`	`object`	No	Item data object
`index`	`number`	No	Item index

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

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownContentItemIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogCustomAnnotationDropdownContentItemLabel

Label for a custom annotation dropdown item.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdownContentItemLabel annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogReplyAvatars

Container for reply avatars.

React / Next.js
Other Frameworks

<VeltCommentDialogReplyAvatars annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-reply-avatars annotation-id="abc123"></velt-comment-dialog-reply-avatars>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogReplyAvatarsList

List container for reply avatars.

React / Next.js
Other Frameworks

<VeltCommentDialogReplyAvatarsList annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-reply-avatars-list annotation-id="abc123"></velt-comment-dialog-reply-avatars-list>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogReplyAvatarsListItem

Individual avatar item in the reply avatars list. See ReplyAvatarsListItemProps.

React / Next.js
Other Frameworks

<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

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

React / Next.js
Other Frameworks

<VeltCommentDialogReplyCount annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-reply-count annotation-id="abc123"></velt-comment-dialog-reply-count>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogAssigneeBanner

Assignee banner container.

React / Next.js
Other Frameworks

<VeltCommentDialogAssigneeBanner annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-assignee-banner annotation-id="abc123"></velt-comment-dialog-assignee-banner>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogAssigneeBannerResolved

Resolved state of the assignee banner.

React / Next.js
Other Frameworks

<VeltCommentDialogAssigneeBannerResolved annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-assignee-banner-resolved annotation-id="abc123"></velt-comment-dialog-assignee-banner-resolved>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogAssigneeBannerUnresolved

Unresolved state of the assignee banner.

React / Next.js
Other Frameworks

<VeltCommentDialogAssigneeBannerUnresolved annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-assignee-banner-unresolved annotation-id="abc123"></velt-comment-dialog-assignee-banner-unresolved>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogAssigneeBannerUnresolveButton

Button to unresolve the assignee banner.

React / Next.js
Other Frameworks

<VeltCommentDialogAssigneeBannerUnresolveButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-assignee-banner-unresolve-button annotation-id="abc123"></velt-comment-dialog-assignee-banner-unresolve-button>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocomplete

To customize the wireframe appearance of autocomplete options, chips, and tooltips, see the Autocomplete Option and Autocomplete Chip Tooltip sections in the Comment Dialog wireframes page.

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

React / Next.js
Other Frameworks

<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[]`	—	Overrides the default contact list

<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

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

React / Next.js
Other Frameworks

import { VeltWireframe, VeltAutocompleteEmptyWireframe } from '@veltdev/react';

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

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

React / Next.js
Other Frameworks

<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

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

React / Next.js
Other Frameworks

<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

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

React / Next.js
Other Frameworks

<VeltAutocompleteOptionDescription field="email" />

Props:

Prop	Type	Required	Description
`field`	`string`	No	Field name to display from the user object

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

React / Next.js
Other Frameworks

<VeltAutocompleteOptionIcon />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-option-icon></velt-autocomplete-option-icon>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocompleteOptionName

Name display for an autocomplete option.

React / Next.js
Other Frameworks

<VeltAutocompleteOptionName />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-option-name></velt-autocomplete-option-name>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocompleteOptionErrorIcon

Error icon for an autocomplete option.

React / Next.js
Other Frameworks

<VeltAutocompleteOptionErrorIcon />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-option-error-icon></velt-autocomplete-option-error-icon>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocompleteGroupOption

Group option in the autocomplete panel.

React / Next.js
Other Frameworks

<VeltAutocompleteGroupOption />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-group-option></velt-autocomplete-group-option>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocompleteTool

Tool component for the autocomplete panel.

React / Next.js
Other Frameworks

<VeltAutocompleteTool />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-tool></velt-autocomplete-tool>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocompleteEmpty

Empty state for the autocomplete panel.

React / Next.js
Other Frameworks

<VeltAutocompleteEmpty />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-empty></velt-autocomplete-empty>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocompleteChipTooltip

Tooltip for an autocomplete chip.

React / Next.js
Other Frameworks

<VeltAutocompleteChipTooltip />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-chip-tooltip></velt-autocomplete-chip-tooltip>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocompleteChipTooltipIcon

Icon within the autocomplete chip tooltip.

React / Next.js
Other Frameworks

<VeltAutocompleteChipTooltipIcon />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-chip-tooltip-icon></velt-autocomplete-chip-tooltip-icon>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocompleteChipTooltipName

Name display within the autocomplete chip tooltip.

React / Next.js
Other Frameworks

<VeltAutocompleteChipTooltipName />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-chip-tooltip-name></velt-autocomplete-chip-tooltip-name>

Attributes: Common attributes only (see Common Inputs section).

VeltAutocompleteChipTooltipDescription

Description within the autocomplete chip tooltip.

React / Next.js
Other Frameworks

<VeltAutocompleteChipTooltipDescription />

Props: Common inputs only (see Common Inputs section).

<velt-autocomplete-chip-tooltip-description></velt-autocomplete-chip-tooltip-description>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogResolveButton

Button to resolve a comment thread.

React / Next.js
Other Frameworks

<VeltCommentDialogResolveButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-resolve-button annotation-id="abc123"></velt-comment-dialog-resolve-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogUnresolveButton

Button to unresolve a comment thread.

React / Next.js
Other Frameworks

<VeltCommentDialogUnresolveButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-unresolve-button annotation-id="abc123"></velt-comment-dialog-unresolve-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCopyLink

Button to copy the comment link to clipboard.

React / Next.js
Other Frameworks

<VeltCommentDialogCopyLink annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-copy-link annotation-id="abc123"></velt-comment-dialog-copy-link>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCloseButton

Button to close the comment dialog.

React / Next.js
Other Frameworks

<VeltCommentDialogCloseButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-close-button annotation-id="abc123"></velt-comment-dialog-close-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogDeleteButton

Button to delete a comment.

React / Next.js
Other Frameworks

<VeltCommentDialogDeleteButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-delete-button annotation-id="abc123"></velt-comment-dialog-delete-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogPrivateBanner

Banner indicating a comment’s private status.

React / Next.js
Other Frameworks

<VeltCommentDialogPrivateBanner annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-private-banner annotation-id="abc123"></velt-comment-dialog-private-banner>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogPrivateButton

Button to toggle private mode on a comment.

React / Next.js
Other Frameworks

<VeltCommentDialogPrivateButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-private-button annotation-id="abc123"></velt-comment-dialog-private-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogGhostBanner

Banner displayed for ghost or anonymous comments.

React / Next.js
Other Frameworks

<VeltCommentDialogGhostBanner annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-ghost-banner annotation-id="abc123"></velt-comment-dialog-ghost-banner>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogVisibilityBanner

Banner displaying the current visibility setting for a comment.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBanner annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-visibility-banner annotation-id="abc123"></velt-comment-dialog-visibility-banner>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogVisibilityBannerIcon

Icon within the visibility banner.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-visibility-banner-icon annotation-id="abc123"></velt-comment-dialog-visibility-banner-icon>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogVisibilityBannerText

Text label within the visibility banner.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerText annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-visibility-banner-text annotation-id="abc123"></velt-comment-dialog-visibility-banner-text>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogVisibilityBannerDropdown

Dropdown for selecting visibility options within the banner.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-visibility-banner-dropdown annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogVisibilityBannerDropdownTrigger

Trigger element for the visibility dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownTrigger annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-visibility-banner-dropdown-trigger annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-trigger>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogVisibilityBannerDropdownTriggerLabel

Label text within the visibility dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownTriggerLabel annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList

Avatar list within the visibility dropdown trigger showing selected users.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem

Individual avatar within the trigger avatar list.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount

Count of remaining avatars not displayed in the trigger list.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownTriggerIcon

Icon within the visibility dropdown trigger.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownTriggerIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContent

Content container for the visibility dropdown options.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContent annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-visibility-banner-dropdown-content annotation-id="abc123"></velt-comment-dialog-visibility-banner-dropdown-content>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogVisibilityBannerDropdownContentItemIcon

Icon for a visibility option item in the dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentItemIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentItemLabel

Label for a visibility option item in the dropdown.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentItemLabel annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPicker

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

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPicker annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch

Search container within the user picker.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon

Search icon within the user picker search.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput

Search input field within the user picker.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader

Header section of the user picker.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount

Count of selected users displayed in the user picker header.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll

Button to unselect all users in the user picker.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem

Individual user item within the user picker.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar

Avatar for a user item in the user picker.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo

Info text for a user item in the user picker.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck

Check indicator for a selected user in the user picker.

React / Next.js
Other Frameworks

<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<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 section).

VeltCommentDialogSignIn

Sign-in prompt displayed to unauthenticated users.

React / Next.js
Other Frameworks

<VeltCommentDialogSignIn annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-sign-in annotation-id="abc123"></velt-comment-dialog-sign-in>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogNavigationButton

Button for navigating between comments.

React / Next.js
Other Frameworks

<VeltCommentDialogNavigationButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-navigation-button annotation-id="abc123"></velt-comment-dialog-navigation-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogAttachmentButton

Button for adding file attachments to a comment.

React / Next.js
Other Frameworks

<VeltCommentDialogAttachmentButton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-attachment-button annotation-id="abc123"></velt-comment-dialog-attachment-button>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogDeviceTypeIcons

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

React / Next.js
Other Frameworks

<VeltCommentDialogDeviceTypeIcons annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-device-type-icons annotation-id="abc123"></velt-comment-dialog-device-type-icons>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCommentIndex

Display for the comment’s index position.

React / Next.js
Other Frameworks

<VeltCommentDialogCommentIndex annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-comment-index annotation-id="abc123"></velt-comment-dialog-comment-index>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCommentNumber

Display for the comment’s number.

React / Next.js
Other Frameworks

<VeltCommentDialogCommentNumber annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-comment-number annotation-id="abc123"></velt-comment-dialog-comment-number>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCommentCategory

Display for the comment’s category.

React / Next.js
Other Frameworks

<VeltCommentDialogCommentCategory annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-comment-category annotation-id="abc123"></velt-comment-dialog-comment-category>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogMetadata

Display for comment metadata.

React / Next.js
Other Frameworks

<VeltCommentDialogMetadata annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-metadata annotation-id="abc123"></velt-comment-dialog-metadata>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogThreads

Container for the comment threads.

React / Next.js
Other Frameworks

<VeltCommentDialogThreads annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-threads annotation-id="abc123"></velt-comment-dialog-threads>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogAllComment

View for displaying all comments.

React / Next.js
Other Frameworks

<VeltCommentDialogAllComment annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-all-comment annotation-id="abc123"></velt-comment-dialog-all-comment>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogApprove

Approve button for comment approval workflows.

React / Next.js
Other Frameworks

<VeltCommentDialogApprove annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-approve annotation-id="abc123"></velt-comment-dialog-approve>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogUpgrade

Upgrade prompt component.

React / Next.js
Other Frameworks

<VeltCommentDialogUpgrade annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-upgrade annotation-id="abc123"></velt-comment-dialog-upgrade>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogMoreReply

Indicator showing additional replies are available.

React / Next.js
Other Frameworks

<VeltCommentDialogMoreReply annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-more-reply annotation-id="abc123"></velt-comment-dialog-more-reply>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogHideReply

Button to hide replies in a thread.

React / Next.js
Other Frameworks

<VeltCommentDialogHideReply annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-hide-reply annotation-id="abc123"></velt-comment-dialog-hide-reply>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogToggleReply

Toggle control for showing or hiding replies.

React / Next.js
Other Frameworks

<VeltCommentDialogToggleReply annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-toggle-reply annotation-id="abc123"></velt-comment-dialog-toggle-reply>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogToggleReplyShow

Show-replies variant of the reply toggle.

React / Next.js
Other Frameworks

<VeltCommentDialogToggleReplyShow annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-toggle-reply-show annotation-id="abc123"></velt-comment-dialog-toggle-reply-show>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogToggleReplyHide

Hide-replies variant of the reply toggle.

React / Next.js
Other Frameworks

<VeltCommentDialogToggleReplyHide annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-toggle-reply-hide annotation-id="abc123"></velt-comment-dialog-toggle-reply-hide>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogToggleReplyCount

Reply count displayed within the reply toggle.

React / Next.js
Other Frameworks

<VeltCommentDialogToggleReplyCount annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-toggle-reply-count annotation-id="abc123"></velt-comment-dialog-toggle-reply-count>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogSuggestionAction

Container for suggestion accept/reject actions.

React / Next.js
Other Frameworks

<VeltCommentDialogSuggestionAction annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-suggestion-action annotation-id="abc123"></velt-comment-dialog-suggestion-action>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogSuggestionActionAccept

Button to accept a suggestion.

React / Next.js
Other Frameworks

<VeltCommentDialogSuggestionActionAccept annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-suggestion-action-accept annotation-id="abc123"></velt-comment-dialog-suggestion-action-accept>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogSuggestionActionReject

Button to reject a suggestion.

React / Next.js
Other Frameworks

<VeltCommentDialogSuggestionActionReject annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-suggestion-action-reject annotation-id="abc123"></velt-comment-dialog-suggestion-action-reject>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCommentSuggestionStatus

Status indicator for a comment suggestion.

React / Next.js
Other Frameworks

<VeltCommentDialogCommentSuggestionStatus annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-comment-suggestion-status annotation-id="abc123"></velt-comment-dialog-comment-suggestion-status>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogAssignDropdown

Dropdown for assigning a comment to a user.

React / Next.js
Other Frameworks

<VeltCommentDialogAssignDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-assign-dropdown annotation-id="abc123"></velt-comment-dialog-assign-dropdown>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogAssignMenu

Menu for assignment options.

React / Next.js
Other Frameworks

<VeltCommentDialogAssignMenu annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-assign-menu annotation-id="abc123"></velt-comment-dialog-assign-menu>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogOptions

Options menu for the comment thread.

React / Next.js
Other Frameworks

<VeltCommentDialogOptions annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-options annotation-id="abc123"></velt-comment-dialog-options>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogPriority

Priority selector for the comment.

React / Next.js
Other Frameworks

<VeltCommentDialogPriority annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-priority annotation-id="abc123"></velt-comment-dialog-priority>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogStatus

Status selector for the comment.

React / Next.js
Other Frameworks

<VeltCommentDialogStatus annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-status annotation-id="abc123"></velt-comment-dialog-status>

Attributes: Common attributes only (see Common Inputs section).

VeltCommentDialogCustomAnnotationDropdown

Dropdown for custom annotation categories.

React / Next.js
Other Frameworks

<VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-comment-dialog-custom-annotation-dropdown annotation-id="abc123"></velt-comment-dialog-custom-annotation-dropdown>

Attributes: Common attributes only (see 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

Comment Dialog Wireframe Variables Comment Sidebar v1 Wireframes

⌘I

​Overview

​Usage Patterns

​Pattern 1: Context Wrapper (Recommended)

​Pattern 2: ID-Based (Standalone)

​Common Inputs

​Components

​VeltCommentDialogContextWrapper

​VeltCommentDialogHeader

​VeltCommentDialogBody

​VeltCommentDialogThreadCard

​VeltCommentDialogThreadCardAvatar

​VeltCommentDialogThreadCardName

​VeltCommentDialogThreadCardTime

​VeltCommentDialogThreadCardMessage

​VeltCommentDialogThreadCardMessageShowMore

​VeltCommentDialogThreadCardMessageShowLess

​VeltCommentDialogThreadCardReactions

​VeltCommentDialogThreadCardReactionTool

​VeltCommentDialogThreadCardRecordings

​VeltCommentDialogThreadCardReply

​VeltCommentDialogThreadCardUnread

​VeltCommentDialogThreadCardEdited

​VeltCommentDialogThreadCardDraft

​VeltCommentDialogThreadCardDeviceType

​VeltCommentDialogThreadCardOptions

​VeltCommentDialogComposer

​VeltCommentDialogComposerInput

​VeltCommentDialogComposerActionButton

​VeltCommentDialogComposerAttachmentButton

​VeltCommentDialogComposerRecorderButton

​VeltCommentDialogComposerRecorderPlayer

​VeltCommentDialogComposerFiles

​VeltCommentDialogComposerAttachmentsImageDownload

​VeltCommentDialogComposerAttachmentsOtherDownload

​VeltCommentDialogStatusDropdown

​VeltCommentDialogStatusDropdownTrigger

​VeltCommentDialogStatusDropdownTriggerIcon

​VeltCommentDialogStatusDropdownTriggerName

​VeltCommentDialogStatusDropdownTriggerArrow

​VeltCommentDialogStatusDropdownContent

​VeltCommentDialogStatusDropdownContentItem

​VeltCommentDialogStatusDropdownContentItemIcon

​VeltCommentDialogStatusDropdownContentItemName

​VeltCommentDialogPriorityDropdown

​VeltCommentDialogPriorityDropdownTrigger

​VeltCommentDialogPriorityDropdownTriggerIcon

​VeltCommentDialogPriorityDropdownTriggerName

​VeltCommentDialogPriorityDropdownTriggerArrow

​VeltCommentDialogPriorityDropdownContent

​VeltCommentDialogPriorityDropdownContentItem

​VeltCommentDialogPriorityDropdownContentItemIcon

​VeltCommentDialogPriorityDropdownContentItemName

​VeltCommentDialogPriorityDropdownContentItemTick

​VeltCommentDialogOptionsDropdown

​VeltCommentDialogOptionsDropdownTrigger

​VeltCommentDialogOptionsDropdownContent

​VeltCommentDialogOptionsDropdownContentAssign

​VeltCommentDialogOptionsDropdownContentEdit

​VeltCommentDialogOptionsDropdownContentDelete

​VeltCommentDialogOptionsDropdownContentDeleteComment

​VeltCommentDialogOptionsDropdownContentDeleteThread

​VeltCommentDialogOptionsDropdownContentMakePrivate

​VeltCommentDialogOptionsDropdownContentMakePrivateEnable

​VeltCommentDialogOptionsDropdownContentMakePrivateDisable

​VeltCommentDialogOptionsDropdownContentNotification

​VeltCommentDialogOptionsDropdownContentNotificationSubscribe

​VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

​VeltCommentDialogOptionsDropdownContentMarkAsRead

​VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

​VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

​VeltCommentDialogCustomAnnotationDropdown

​VeltCommentDialogCustomAnnotationDropdownTrigger

​VeltCommentDialogCustomAnnotationDropdownTriggerArrow

​VeltCommentDialogCustomAnnotationDropdownTriggerList

​VeltCommentDialogCustomAnnotationDropdownTriggerListItem

​VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

​VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

​VeltCommentDialogCustomAnnotationDropdownContent

​VeltCommentDialogCustomAnnotationDropdownContentItem

​VeltCommentDialogCustomAnnotationDropdownContentItemIcon

Overview

Usage Patterns

Pattern 1: Context Wrapper (Recommended)

Pattern 2: ID-Based (Standalone)

Common Inputs

Components

VeltCommentDialogContextWrapper

VeltCommentDialogHeader

VeltCommentDialogBody

VeltCommentDialogThreadCard

VeltCommentDialogThreadCardAvatar

VeltCommentDialogThreadCardName

VeltCommentDialogThreadCardTime

VeltCommentDialogThreadCardMessage

VeltCommentDialogThreadCardMessageShowMore

VeltCommentDialogThreadCardMessageShowLess

VeltCommentDialogThreadCardReactions

VeltCommentDialogThreadCardReactionTool

VeltCommentDialogThreadCardRecordings

VeltCommentDialogThreadCardReply

VeltCommentDialogThreadCardUnread

VeltCommentDialogThreadCardEdited

VeltCommentDialogThreadCardDraft

VeltCommentDialogThreadCardDeviceType

VeltCommentDialogThreadCardOptions

VeltCommentDialogComposer

VeltCommentDialogComposerInput

VeltCommentDialogComposerActionButton

VeltCommentDialogComposerAttachmentButton

VeltCommentDialogComposerRecorderButton

VeltCommentDialogComposerRecorderPlayer

VeltCommentDialogComposerFiles

VeltCommentDialogComposerAttachmentsImageDownload

VeltCommentDialogComposerAttachmentsOtherDownload

VeltCommentDialogStatusDropdown

VeltCommentDialogStatusDropdownTrigger

VeltCommentDialogStatusDropdownTriggerIcon

VeltCommentDialogStatusDropdownTriggerName

VeltCommentDialogStatusDropdownTriggerArrow

VeltCommentDialogStatusDropdownContent

VeltCommentDialogStatusDropdownContentItem

VeltCommentDialogStatusDropdownContentItemIcon

VeltCommentDialogStatusDropdownContentItemName

VeltCommentDialogPriorityDropdown

VeltCommentDialogPriorityDropdownTrigger

VeltCommentDialogPriorityDropdownTriggerIcon

VeltCommentDialogPriorityDropdownTriggerName

VeltCommentDialogPriorityDropdownTriggerArrow

VeltCommentDialogPriorityDropdownContent

VeltCommentDialogPriorityDropdownContentItem

VeltCommentDialogPriorityDropdownContentItemIcon

VeltCommentDialogPriorityDropdownContentItemName

VeltCommentDialogPriorityDropdownContentItemTick

VeltCommentDialogOptionsDropdown

VeltCommentDialogOptionsDropdownTrigger

VeltCommentDialogOptionsDropdownContent

VeltCommentDialogOptionsDropdownContentAssign

VeltCommentDialogOptionsDropdownContentEdit

VeltCommentDialogOptionsDropdownContentDelete

VeltCommentDialogOptionsDropdownContentDeleteComment

VeltCommentDialogOptionsDropdownContentDeleteThread

VeltCommentDialogOptionsDropdownContentMakePrivate

VeltCommentDialogOptionsDropdownContentMakePrivateEnable

VeltCommentDialogOptionsDropdownContentMakePrivateDisable

VeltCommentDialogOptionsDropdownContentNotification

VeltCommentDialogOptionsDropdownContentNotificationSubscribe

VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

VeltCommentDialogOptionsDropdownContentMarkAsRead

VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

VeltCommentDialogCustomAnnotationDropdown

VeltCommentDialogCustomAnnotationDropdownTrigger

VeltCommentDialogCustomAnnotationDropdownTriggerArrow

VeltCommentDialogCustomAnnotationDropdownTriggerList

VeltCommentDialogCustomAnnotationDropdownTriggerListItem

VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

VeltCommentDialogCustomAnnotationDropdownContent

VeltCommentDialogCustomAnnotationDropdownContentItem

VeltCommentDialogCustomAnnotationDropdownContentItemIcon