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

​
Overview

The Comment Dialog Primitives API provides 92+ 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

Components are wrapped in a context wrapper that provides shared context to children. 
<VeltCommentDialogContextWrapper annotationId="abc123">
  <VeltCommentDialogHeader />
  <VeltCommentDialogComposer />
</VeltCommentDialogContextWrapper>

​
Pattern 2: ID-Based (Standalone)

Each component receives annotationId directly and works independently. 
<VeltCommentDialogHeader annotationId="abc123" />
<VeltCommentDialogComposer annotationId="abc123" />

​
Common Inputs

All components inherit these base inputs. See CommentDialogCommonProps for the type definition.
React PropHTML AttributeTypeDefaultDescription
annotationIdannotation-idstring-The annotation ID
defaultConditiondefault-conditionbooleantrueWhen false, always shows
inlineCommentSectionModeinline-comment-section-modebooleanfalseInline comment section mode
commentPinSelectedcomment-pin-selectedbooleanfalseComment pin selected state
fullExpandedfull-expandedbooleanfalseFull expansion state

​
Components

​
VeltCommentDialogContextWrapper

Context wrapper that provides shared annotation context to child primitives. Props: CommentDialogContextWrapperProps 
<VeltCommentDialogContextWrapper
  annotationId="abc123"
  commentId="456"
  commentPinSelected={true}
>
  {children}
</VeltCommentDialogContextWrapper>
Props:
PropTypeRequiredDescription
annotationIdstringYes (root)Annotation ID for children
commentIdstringNoComment ID for children
attachmentIdstringNoAttachment ID for children
commentPinSelectedbooleanNoSelection state for children
[key: string]anyNoAny custom attribute passed via context

​
VeltCommentDialogHeader

Header component for the comment dialog. 
<VeltCommentDialogHeader annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogBody

Body container for the comment dialog thread content. 
<VeltCommentDialogBody annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogThreadCard

Complete thread card with all comment metadata and content. See ThreadCardProps. 
<VeltCommentDialogThreadCard
  annotationId="abc123"
  commentObj={commentData}
  commentId={456}
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentObjobjectNoDirect comment object (Priority 1)
commentIdnumberNoComment ID for lookup (Priority 2)
commentIndexnumberNoIndex in comments array (Priority 3)

​
VeltCommentDialogThreadCardAvatar

User avatar for the comment author. See CommentIndexProps. 
<VeltCommentDialogThreadCardAvatar
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardName

Display name of the comment author. See CommentIndexProps. 
<VeltCommentDialogThreadCardName
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardTime

Timestamp of when the comment was created. See CommentIndexProps. 
<VeltCommentDialogThreadCardTime
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardMessage

The comment message content. See CommentIndexProps. 
<VeltCommentDialogThreadCardMessage
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardReactions

Reactions display for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardReactions
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardReactionTool

Tool for adding reactions to a comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardReactionTool
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardRecordings

Recordings attached to the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardRecordings
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardReply

Reply indicator for the thread card. 
<VeltCommentDialogThreadCardReply annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogThreadCardUnread

Unread indicator for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardUnread
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardEdited

Edited indicator for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardEdited
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardDraft

Draft indicator for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardDraft
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardDeviceType

Device type indicator for the comment. See CommentIndexProps. 
<VeltCommentDialogThreadCardDeviceType
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogThreadCardOptions

Options menu for the comment (edit, delete, etc.). See CommentIndexProps. 
<VeltCommentDialogThreadCardOptions
  annotationId="abc123"
  commentIndex={0}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment in array

​
VeltCommentDialogComposer

Complete composer with input, attachments, and action buttons. See ComposerProps. 
<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:
PropTypeRequiredDescription
placeholderstringNoPrimary placeholder (Priority 1)
commentPlaceholderstringNoPlaceholder for new comment
replyPlaceholderstringNoPlaceholder for reply
editPlaceholderstringNoPlaceholder for edit mode
editModebooleanNoEnable edit mode
commentObjobjectNoComment object for edit mode
commentIndexnumberNoIndex of comment being edited
targetComposerElementIdstringNoUnique identifier for programmatic submission
contextobjectNoCustom context data to attach to comment

​
VeltCommentDialogComposerInput

Text input field for composing comments. See ComposerInputProps. 
<VeltCommentDialogComposerInput
  annotationId="abc123"
  placeholder="Type here..."
/>
Props:
PropTypeRequiredDescription
placeholderstringNoInput placeholder text

​
VeltCommentDialogComposerActionButton

Submit/send button for the composer. 
<VeltCommentDialogComposerActionButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerAttachmentButton

Button to add file attachments to comments. 
<VeltCommentDialogComposerAttachmentButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerRecorderButton

Button to add audio/video recordings. 
<VeltCommentDialogComposerRecorderButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerRecorderPlayer

Player for audio/video recordings in the composer. 
<VeltCommentDialogComposerRecorderPlayer annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogComposerFiles

Files display in the composer. 
<VeltCommentDialogComposerFiles annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdown

Complete status dropdown with trigger and content. 
<VeltCommentDialogStatusDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownTrigger

Button that opens the status dropdown. 
<VeltCommentDialogStatusDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownTriggerIcon

Icon for the status dropdown trigger. 
<VeltCommentDialogStatusDropdownTriggerIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownTriggerName

Name display for the status dropdown trigger. 
<VeltCommentDialogStatusDropdownTriggerName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownTriggerArrow

Arrow indicator for the status dropdown trigger. 
<VeltCommentDialogStatusDropdownTriggerArrow annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownContent

Dropdown content container for status options. 
<VeltCommentDialogStatusDropdownContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownContentItem

Individual status item in the dropdown. See StatusDropdownItemProps. 
<VeltCommentDialogStatusDropdownContentItem
  annotationId="abc123"
  statusObj={statusData}
  statusId="open"
  statusIndex={0}
/>
Props:
PropTypeRequiredDescription
statusObjobjectNoDirect status object (Priority 1)
statusIdstringNoStatus ID for lookup (Priority 2)
statusIndexnumberNoIndex in statuses array (Priority 3)

​
VeltCommentDialogStatusDropdownContentItemIcon

Icon for a status dropdown item. 
<VeltCommentDialogStatusDropdownContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatusDropdownContentItemName

Name display for a status dropdown item. 
<VeltCommentDialogStatusDropdownContentItemName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdown

Complete priority dropdown with trigger and content. 
<VeltCommentDialogPriorityDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownTrigger

Button that opens the priority dropdown. 
<VeltCommentDialogPriorityDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownTriggerIcon

Icon for the priority dropdown trigger. 
<VeltCommentDialogPriorityDropdownTriggerIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownTriggerName

Name display for the priority dropdown trigger. 
<VeltCommentDialogPriorityDropdownTriggerName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownTriggerArrow

Arrow indicator for the priority dropdown trigger. 
<VeltCommentDialogPriorityDropdownTriggerArrow annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownContent

Dropdown content container for priority options. 
<VeltCommentDialogPriorityDropdownContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownContentItem

Individual priority item in the dropdown. See PriorityDropdownItemProps. 
<VeltCommentDialogPriorityDropdownContentItem
  annotationId="abc123"
  priorityObj={priorityData}
  priorityId="high"
  priorityIndex={0}
/>
Props:
PropTypeRequiredDescription
priorityObjobjectNoDirect priority object (Priority 1)
priorityIdstringNoPriority ID for lookup (Priority 2)
priorityIndexnumberNoIndex in priorities array (Priority 3)

​
VeltCommentDialogPriorityDropdownContentItemIcon

Icon for a priority dropdown item. 
<VeltCommentDialogPriorityDropdownContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownContentItemName

Name display for a priority dropdown item. 
<VeltCommentDialogPriorityDropdownContentItemName annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriorityDropdownContentItemTick

Tick/checkmark for a priority dropdown item. 
<VeltCommentDialogPriorityDropdownContentItemTick annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdown

Options menu for actions like assignment, editing, and notifications. See OptionsDropdownProps. 
<VeltCommentDialogOptionsDropdown
  annotationId="abc123"
  commentIndex={0}
  enableAssignment={true}
  enableEdit={true}
  enableNotifications={true}
  enablePrivateMode={true}
  enableMarkAsRead={true}
/>
Props:
PropTypeRequiredDescription
commentIndexnumberNoIndex of comment for options
enableAssignmentbooleanNoEnable assignment option
allowAssignmentbooleanNoV4 alias for enableAssignment
enableEditbooleanNoEnable edit option
allowEditbooleanNoV4 alias for enableEdit
enableNotificationsbooleanNoEnable notifications option
allowNotificationsbooleanNoV4 alias for enableNotifications
allowToggleNotificationbooleanNoV4 alias for enableNotifications
enablePrivateModebooleanNoEnable private mode option
allowPrivateModebooleanNoV4 alias for enablePrivateMode
allowChangeCommentAccessModebooleanNoV4 alias for enablePrivateMode
enableMarkAsReadbooleanNoEnable mark as read option
allowMarkAsReadbooleanNoV4 alias for enableMarkAsRead

​
VeltCommentDialogOptionsDropdownTrigger

Trigger button for the options dropdown. 
<VeltCommentDialogOptionsDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContent

Content container for the options dropdown. 
<VeltCommentDialogOptionsDropdownContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentAssign

Assign option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentAssign annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentEdit

Edit option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentEdit annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentDelete

Delete option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentDelete annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentDeleteComment

Delete comment option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentDeleteComment annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentDeleteThread

Delete thread option in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentDeleteThread annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMakePrivate

Make private option container in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentMakePrivate annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMakePrivateEnable

Enable private mode option. 
<VeltCommentDialogOptionsDropdownContentMakePrivateEnable annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMakePrivateDisable

Disable private mode option. 
<VeltCommentDialogOptionsDropdownContentMakePrivateDisable annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentNotification

Notification option container in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentNotification annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentNotificationSubscribe

Subscribe to notifications option. 
<VeltCommentDialogOptionsDropdownContentNotificationSubscribe annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe

Unsubscribe from notifications option. 
<VeltCommentDialogOptionsDropdownContentNotificationUnsubscribe annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMarkAsRead

Mark as read option container in the options dropdown. 
<VeltCommentDialogOptionsDropdownContentMarkAsRead annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead

Mark as read action option. 
<VeltCommentDialogOptionsDropdownContentMarkAsReadMarkRead annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread

Mark as unread action option. 
<VeltCommentDialogOptionsDropdownContentMarkAsReadMarkUnread annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdown

Custom annotation dropdown component. 
<VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTrigger

Trigger button for the custom annotation dropdown. 
<VeltCommentDialogCustomAnnotationDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTriggerArrow

Arrow indicator for the custom annotation dropdown trigger. 
<VeltCommentDialogCustomAnnotationDropdownTriggerArrow annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTriggerList

List container for the custom annotation dropdown trigger. 
<VeltCommentDialogCustomAnnotationDropdownTriggerList annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTriggerListItem

Individual item in the custom annotation dropdown trigger list. See CustomAnnotationItemProps. 
<VeltCommentDialogCustomAnnotationDropdownTriggerListItem
  annotationId="abc123"
  item={itemData}
  index={0}
/>
Props:
PropTypeRequiredDescription
itemobjectNoItem data object
indexnumberNoItem index

​
VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder

Placeholder for the custom annotation dropdown trigger. 
<VeltCommentDialogCustomAnnotationDropdownTriggerPlaceholder annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount

Remaining count indicator for the custom annotation dropdown trigger. 
<VeltCommentDialogCustomAnnotationDropdownTriggerRemainingCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownContent

Content container for the custom annotation dropdown. 
<VeltCommentDialogCustomAnnotationDropdownContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownContentItem

Individual item in the custom annotation dropdown content. See CustomAnnotationItemProps. 
<VeltCommentDialogCustomAnnotationDropdownContentItem
  annotationId="abc123"
  item={itemData}
  index={0}
/>
Props:
PropTypeRequiredDescription
itemobjectNoItem data object
indexnumberNoItem index

​
VeltCommentDialogCustomAnnotationDropdownContentItemIcon

Icon for a custom annotation dropdown item. 
<VeltCommentDialogCustomAnnotationDropdownContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdownContentItemLabel

Label for a custom annotation dropdown item. 
<VeltCommentDialogCustomAnnotationDropdownContentItemLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogReplyAvatars

Container for reply avatars. 
<VeltCommentDialogReplyAvatars annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogReplyAvatarsList

List container for reply avatars. 
<VeltCommentDialogReplyAvatarsList annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogReplyAvatarsListItem

Individual avatar item in the reply avatars list. See ReplyAvatarsListItemProps. 
<VeltCommentDialogReplyAvatarsListItem
  annotationId="abc123"
  user={userData}
  index={0}
/>
Props:
PropTypeRequiredDescription
userUserYesUser data object
indexnumberYesIndex of user in list

​
VeltCommentDialogReplyCount

Reply count display. 
<VeltCommentDialogReplyCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssigneeBanner

Assignee banner container. 
<VeltCommentDialogAssigneeBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssigneeBannerResolved

Resolved state of the assignee banner. 
<VeltCommentDialogAssigneeBannerResolved annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssigneeBannerUnresolved

Unresolved state of the assignee banner. 
<VeltCommentDialogAssigneeBannerUnresolved annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssigneeBannerUnresolveButton

Button to unresolve the assignee banner. 
<VeltCommentDialogAssigneeBannerUnresolveButton annotationId="abc123" />
Props: Common inputs 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 Components page.
The autocomplete panel component accepts the following props for controlling selection mode, ordering, and data source. 
<VeltAutocomplete
  multiSelect={true}
  selectedFirstOrdering={true}
  readOnly={false}
  inline={true}
  contacts={myContacts}
/>
Props:
PropTypeDefaultDescription
multiSelectbooleanfalseAllows selecting multiple contacts
selectedFirstOrderingbooleanfalseShows selected items first in the list
readOnlybooleanfalseDisables user interaction
inlinebooleanfalseRenders the autocomplete inline rather than as a panel
contactsUserContact[]—Overrides the default contact list

​
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 Components page. 
import { VeltWireframe, VeltAutocompleteEmptyWireframe } from '@veltdev/react';

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

​
VeltAutocompleteChip

Standalone autocomplete chip component for rendering selected contact chips. 
<VeltAutocompleteChip
  type="contact"
  email="user@example.com"
  userId="user-1"
/>
Props:
PropTypeRequiredDescription
type'contact' | 'custom' | 'group' | 'loading'NoChip type
emailstringNoContact email
userObjectanyNoUser data object (JSON object or serialized JSON string)
userIdstringNoUser ID

​
VeltAutocompleteOption

Standalone autocomplete option component for rendering contact/custom options. 
<VeltAutocompleteOption
  userId="user-1"
  userObject={userData}
/>
Props:
PropTypeRequiredDescription
userObjectanyNoUser data object (JSON object or serialized JSON string)
userIdstringNoUser ID

​
VeltAutocompleteOptionDescription

Standalone autocomplete option description component. 
<VeltAutocompleteOptionDescription field="email" />
Props:
PropTypeRequiredDescription
fieldstringNoField name to display from the user object

​
VeltAutocompleteOptionIcon

Icon for an autocomplete option. 
<VeltAutocompleteOptionIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteOptionName

Name display for an autocomplete option. 
<VeltAutocompleteOptionName />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteOptionErrorIcon

Error icon for an autocomplete option. 
<VeltAutocompleteOptionErrorIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteGroupOption

Group option in the autocomplete panel. 
<VeltAutocompleteGroupOption />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteTool

Tool component for the autocomplete panel. 
<VeltAutocompleteTool />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteEmpty

Empty state for the autocomplete panel. 
<VeltAutocompleteEmpty />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteChipTooltip

Tooltip for an autocomplete chip. 
<VeltAutocompleteChipTooltip />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteChipTooltipIcon

Icon within the autocomplete chip tooltip. 
<VeltAutocompleteChipTooltipIcon />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteChipTooltipName

Name display within the autocomplete chip tooltip. 
<VeltAutocompleteChipTooltipName />
Props: Common inputs only (see Common Inputs section).

​
VeltAutocompleteChipTooltipDescription

Description within the autocomplete chip tooltip. 
<VeltAutocompleteChipTooltipDescription />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogResolveButton

Button to resolve a comment thread. 
<VeltCommentDialogResolveButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogUnresolveButton

Button to unresolve a comment thread. 
<VeltCommentDialogUnresolveButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).
Button to copy the comment link to clipboard. 
<VeltCommentDialogCopyLink annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCloseButton

Button to close the comment dialog. 
<VeltCommentDialogCloseButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogDeleteButton

Button to delete a comment. 
<VeltCommentDialogDeleteButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPrivateBanner

Banner indicating a comment’s private status. 
<VeltCommentDialogPrivateBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPrivateButton

Button to toggle private mode on a comment. 
<VeltCommentDialogPrivateButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogGhostBanner

Banner displayed for ghost or anonymous comments. 
<VeltCommentDialogGhostBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBanner

Banner displaying the current visibility setting for a comment. 
<VeltCommentDialogVisibilityBanner annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerIcon

Icon within the visibility banner. 
<VeltCommentDialogVisibilityBannerIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerText

Text label within the visibility banner. 
<VeltCommentDialogVisibilityBannerText annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdown

Dropdown for selecting visibility options within the banner. 
<VeltCommentDialogVisibilityBannerDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTrigger

Trigger element for the visibility dropdown. 
<VeltCommentDialogVisibilityBannerDropdownTrigger annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerLabel

Label text within the visibility dropdown trigger. 
<VeltCommentDialogVisibilityBannerDropdownTriggerLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList

Avatar list within the visibility dropdown trigger showing selected users. 
<VeltCommentDialogVisibilityBannerDropdownTriggerAvatarList annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem

Individual avatar within the trigger avatar list. 
<VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListItem annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount

Count of remaining avatars not displayed in the trigger list. 
<VeltCommentDialogVisibilityBannerDropdownTriggerAvatarListRemainingCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownTriggerIcon

Icon within the visibility dropdown trigger. 
<VeltCommentDialogVisibilityBannerDropdownTriggerIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContent

Content container for the visibility dropdown options. 
<VeltCommentDialogVisibilityBannerDropdownContent annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentItemIcon

Icon for a visibility option item in the dropdown. 
<VeltCommentDialogVisibilityBannerDropdownContentItemIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentItemLabel

Label for a visibility option item in the dropdown. 
<VeltCommentDialogVisibilityBannerDropdownContentItemLabel annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPicker

User picker for selecting specific users when visibility is set to selected-people. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPicker annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch

Search container within the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearch annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon

Search icon within the user picker search. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchIcon annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput

Search input field within the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerSearchInput annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader

Header section of the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeader annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount

Count of selected users displayed in the user picker header. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll

Button to unselect all users in the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerHeaderUnselectAll annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem

Individual user item within the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItem annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar

Avatar for a user item in the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemAvatar annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo

Info text for a user item in the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemInfo annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck

Check indicator for a selected user in the user picker. 
<VeltCommentDialogVisibilityBannerDropdownContentUserPickerItemCheck annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogSignIn

Sign-in prompt displayed to unauthenticated users. 
<VeltCommentDialogSignIn annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogNavigationButton

Button for navigating between comments. 
<VeltCommentDialogNavigationButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAttachmentButton

Button for adding file attachments to a comment. 
<VeltCommentDialogAttachmentButton annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogDeviceTypeIcons

Icons indicating the device type used when the comment was created. 
<VeltCommentDialogDeviceTypeIcons annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCommentIndex

Display for the comment’s index position. 
<VeltCommentDialogCommentIndex annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCommentNumber

Display for the comment’s number. 
<VeltCommentDialogCommentNumber annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCommentCategory

Display for the comment’s category. 
<VeltCommentDialogCommentCategory annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogMetadata

Display for comment metadata. 
<VeltCommentDialogMetadata annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogThreads

Container for the comment threads. 
<VeltCommentDialogThreads annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAllComment

View for displaying all comments. 
<VeltCommentDialogAllComment annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogApprove

Approve button for comment approval workflows. 
<VeltCommentDialogApprove annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogUpgrade

Upgrade prompt component. 
<VeltCommentDialogUpgrade annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogMoreReply

Indicator showing additional replies are available. 
<VeltCommentDialogMoreReply annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogHideReply

Button to hide replies in a thread. 
<VeltCommentDialogHideReply annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogToggleReply

Toggle control for showing or hiding replies. 
<VeltCommentDialogToggleReply annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogToggleReplyShow

Show-replies variant of the reply toggle. 
<VeltCommentDialogToggleReplyShow annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogToggleReplyHide

Hide-replies variant of the reply toggle. 
<VeltCommentDialogToggleReplyHide annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogToggleReplyCount

Reply count displayed within the reply toggle. 
<VeltCommentDialogToggleReplyCount annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogSuggestionAction

Container for suggestion accept/reject actions. 
<VeltCommentDialogSuggestionAction annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogSuggestionActionAccept

Button to accept a suggestion. 
<VeltCommentDialogSuggestionActionAccept annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogSuggestionActionReject

Button to reject a suggestion. 
<VeltCommentDialogSuggestionActionReject annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCommentSuggestionStatus

Status indicator for a comment suggestion. 
<VeltCommentDialogCommentSuggestionStatus annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssignDropdown

Dropdown for assigning a comment to a user. 
<VeltCommentDialogAssignDropdown annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogAssignMenu

Menu for assignment options. 
<VeltCommentDialogAssignMenu annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogOptions

Options menu for the comment thread. 
<VeltCommentDialogOptions annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogPriority

Priority selector for the comment. 
<VeltCommentDialogPriority annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogStatus

Status selector for the comment. 
<VeltCommentDialogStatus annotationId="abc123" />
Props: Common inputs only (see Common Inputs section).

​
VeltCommentDialogCustomAnnotationDropdown

Dropdown for custom annotation categories. 
<VeltCommentDialogCustomAnnotationDropdown annotationId="abc123" />
Props: Common inputs 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