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

​
Overview

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe>
        <VeltCommentDialogWireframe.GhostBanner />
        <VeltCommentDialogWireframe.PrivateBanner />
        <VeltCommentDialogWireframe.AssigneeBanner />
        <VeltCommentDialogWireframe.Header />
        <VeltCommentDialogWireframe.PrivateBadge />
        <VeltCommentDialogWireframe.Body />
        <VeltCommentDialogWireframe.Composer />
        <VeltCommentDialogWireframe.AllComment />
        <VeltCommentDialogWireframe.Approve />
        <VeltCommentDialogWireframe.SignIn />
        <VeltCommentDialogWireframe.Upgrade />
        <VeltCommentDialogWireframe.SuggestionAction />
    </VeltCommentDialogWireframe>
</VeltWireframe>

​
Ghost Banner

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.GhostBanner />
</VeltWireframe>

​
Private Banner

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.PrivateBanner />
</VeltWireframe>

​
Assignee Banner

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner>
        <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
        <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
        <VeltCommentDialogWireframe.AssigneeBanner.UserName />
    </VeltCommentDialogWireframe.AssigneeBanner>
</VeltWireframe>

​
Resolve Button (Assignee Banner)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
</VeltWireframe>

​
User Avatar (Assignee Banner)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
</VeltWireframe>

​
User Name (Assignee Banner)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.UserName />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Header>
        // Pin Dialog Header
        <VeltCommentDialogWireframe.Status />
        <VeltCommentDialogWireframe.Priority />
        <VeltCommentDialogWireframe.Options />
        <VeltCommentDialogWireframe.CopyLink />
        <VeltCommentDialogWireframe.ResolveButton />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown>

        // Sidebar Dialog Header
        <VeltCommentDialogWireframe.CommentIndex />
        <VeltCommentDialogWireframe.CommentNumber />
        <VeltCommentDialogWireframe.CommentCategory />
        <VeltCommentDialogWireframe.CommentSuggestionStatus />
        <VeltCommentDialogWireframe.NavigationButton />
    </VeltCommentDialogWireframe.Header>
</VeltWireframe>

​
Status (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status>
        <VeltCommentDialogWireframe.Status.Trigger />
        <VeltCommentDialogWireframe.Status.Content />
    </VeltCommentDialogWireframe.Status>
</VeltWireframe>

​
Trigger (Header Status)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger>
        <VeltCommentDialogWireframe.Status.Trigger.Icon />
        <VeltCommentDialogWireframe.Status.Trigger.Name />
        <VeltCommentDialogWireframe.Status.Trigger.Arrow />
    </VeltCommentDialogWireframe.Status.Trigger>
</VeltWireframe>
Icon (Header Status Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Icon />
</VeltWireframe>
Name (Header Status Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Name />
</VeltWireframe>
Arrow (Header Status Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Status)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content>
        <VeltCommentDialogWireframe.Status.Content.Item />
    </VeltCommentDialogWireframe.Status.Content>
</VeltWireframe>
Item (Header Status Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item>
        <VeltCommentDialogWireframe.Status.Content.Item.Icon />
        <VeltCommentDialogWireframe.Status.Content.Item.Name />
    </VeltCommentDialogWireframe.Status.Content.Item>
</VeltWireframe>
Icon (Header Status Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item.Icon />
</VeltWireframe>
Name (Header Status Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item.Name />
</VeltWireframe>

​
Priority (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority>
        <VeltCommentDialogWireframe.Priority.Trigger />
        <VeltCommentDialogWireframe.Priority.Content />
    </VeltCommentDialogWireframe.Priority>
</VeltWireframe>

​
Trigger (Header Priority)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger>
        <VeltCommentDialogWireframe.Priority.Trigger.Icon />
        <VeltCommentDialogWireframe.Priority.Trigger.Name />
        <VeltCommentDialogWireframe.Priority.Trigger.Arrow />
    </VeltCommentDialogWireframe.Priority.Trigger>
</VeltWireframe>
Icon (Header Priority Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Icon />
</VeltWireframe>
Name (Header Priority Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Name />
</VeltWireframe>
Arrow (Header Priority Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Priority)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content>
        <VeltCommentDialogWireframe.Priority.Content.Item />
    </VeltCommentDialogWireframe.Priority.Content>
</VeltWireframe>
Item (Header Priority Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item>
        <VeltCommentDialogWireframe.Priority.Content.Item.Icon />
        <VeltCommentDialogWireframe.Priority.Content.Item.Name />
        <VeltCommentDialogWireframe.Priority.Content.Item.Tick />
    </VeltCommentDialogWireframe.Priority.Content.Item>
</VeltWireframe>
Icon (Header Priority Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Icon />
</VeltWireframe>
Name (Header Priority Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Name />
</VeltWireframe>
Tick (Header Priority Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Tick />
</VeltWireframe>

​
Options (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options>
        <VeltCommentDialogWireframe.Options.Trigger />
        <VeltCommentDialogWireframe.Options.Content />
    </VeltCommentDialogWireframe.Options>
</VeltWireframe>

​
Trigger (Header Options)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Trigger />
</VeltWireframe>

​
Content (Header Options)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content>
        <VeltCommentDialogWireframe.Options.Content.MakePrivate />
        <VeltCommentDialogWireframe.Options.Content.Assign />
        <VeltCommentDialogWireframe.Options.Content.Edit />
        <VeltCommentDialogWireframe.Options.Content.Delete />
        <VeltCommentDialogWireframe.Options.Content.Notification />
    </VeltCommentDialogWireframe.Options.Content>
</VeltWireframe>
Make Private (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate>
        <VeltCommentDialogWireframe.Options.Content.MakePrivate.Enable />
        <VeltCommentDialogWireframe.Options.Content.MakePrivate.Disable />
    </VeltCommentDialogWireframe.Options.Content.MakePrivate>
</VeltWireframe>
Enable (Header Options Content Make Private)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate.Enable />
</VeltWireframe>
Disable (Header Options Content Make Private)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate.Disable />
</VeltWireframe>
Assign (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Assign />
</VeltWireframe>
Edit (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Edit />
</VeltWireframe>
Delete (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete>
        <VeltCommentDialogWireframe.Options.Content.Delete.Thread />
        <VeltCommentDialogWireframe.Options.Content.Delete.Comment />
    </VeltCommentDialogWireframe.Options.Content.Delete>
</VeltWireframe>
Thread (Header Options Content Delete)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete.Thread />
</VeltWireframe>
Comment (Header Options Content Delete)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete.Comment />
</VeltWireframe>
Notification (Header Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification>
        <VeltCommentDialogWireframe.Options.Content.Notification.Subscribe />
        <VeltCommentDialogWireframe.Options.Content.Notification.Unsubscribe />
    </VeltCommentDialogWireframe.Options.Content.Notification>
</VeltWireframe>
Subscribe (Header Options Content Notification)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification.Subscribe />
</VeltWireframe>
Unsubscribe (Header Options Content Notification)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification.Unsubscribe />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CopyLink />
</VeltWireframe>

​
Resolve Button (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ResolveButton />
</VeltWireframe>

​
Custom Annotation Dropdown (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown>
</VeltWireframe>

​
Trigger (Header Custom Annotation Dropdown)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.RemainingCount />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Placeholder />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Arrow />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger>
</VeltWireframe>
List (Header Custom Annotation Dropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List.Item />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List>
</VeltWireframe>
Item (Header Custom Annotation Dropdown Trigger List)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List.Item />
</VeltWireframe>
Remaining Count (Header Custom Annotation Dropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.RemainingCount />
</VeltWireframe>
Placeholder (Header Custom Annotation Dropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Placeholder />
</VeltWireframe>
Arrow (Header Custom Annotation Dropdown Trigger)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Custom Annotation Dropdown)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Content>
</VeltWireframe>
Item (Header Custom Annotation Dropdown Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Label />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Icon />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item>
</VeltWireframe>
Label (Header Custom Annotation Dropdown Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Label />
</VeltWireframe>
Icon (Header Custom Annotation Dropdown Content Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Icon />
</VeltWireframe>

​
Comment Index (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentIndex />
</VeltWireframe>

​
Comment Number (Header)

The annotation number displays in the comment dialog header, providing a persistent identifier for each comment that remains constant across sessions. This number makes it easy to reference specific comments in team discussions or documentation.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentNumber />
</VeltWireframe>

​
Comment Category (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentCategory />
</VeltWireframe>

​
Comment Suggestion Status (Header)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentSuggestionStatus />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.NavigationButton />
</VeltWireframe>

​
Private Badge

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.PrivateBadge />
</VeltWireframe>

​
Body

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Body>
        <VeltCommentDialogWireframe.Threads />
        <VeltCommentDialogWireframe.ToggleReply />
        <VeltCommentDialogWireframe.ReplyAvatars />
    </VeltCommentDialogWireframe.Body>
</VeltWireframe>

​
Threads (Body)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Threads>
        <VeltCommentDialogWireframe.ThreadCard />
        <VeltCommentDialogWireframe.MoreReply />
    </VeltCommentDialogWireframe.Threads>
</VeltWireframe>

​
Thread Card (Body Threads)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard>
        <VeltCommentDialogWireframe.ThreadCard.Avatar />
        <VeltCommentDialogWireframe.ThreadCard.Name />
        <VeltCommentDialogWireframe.ThreadCard.Time />
        <VeltCommentDialogWireframe.ThreadCard.Unread />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown />
        <VeltCommentDialogWireframe.ThreadCard.Edited />
        <VeltCommentDialogWireframe.ThreadCard.DeviceType />
        <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
        <VeltCommentDialogWireframe.ThreadCard.Options />
        <VeltCommentDialogWireframe.ThreadCard.Message />
        <VeltCommentDialogWireframe.ThreadCard.Reactions />
        <VeltCommentDialogWireframe.ThreadCard.Attachments />
        <VeltCommentDialogWireframe.ThreadCard.Recordings />
        <VeltReactionToolWireframe />
        <VeltReactionPinWireframe />
        <VeltReactionsPanelWireframe />
        <VeltReactionPinTooltipWireframe />
        <VeltAutocompleteChipTooltipWireframe />
    </VeltCommentDialogWireframe.ThreadCard>
</VeltWireframe>
Avatar (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Avatar />
</VeltWireframe>
Name (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Name />
</VeltWireframe>
Unread (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Unread />
</VeltWireframe>
Seen Dropdown (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown>
</VeltWireframe>
Trigger (Body Threads Thread Card Seen Dropdown)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Trigger />
</VeltWireframe>
Content (Body Threads Thread Card Seen Dropdown)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Title />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content>
</VeltWireframe>
Title (Body Threads Thread Card Seen Dropdown Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Title />
</VeltWireframe>
Items (Body Threads Thread Card Seen Dropdown Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items>
</VeltWireframe>
Item (Body Threads Thread Card Seen Dropdown Content Items)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item> 
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Time />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Name />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Avatar />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item> 
</VeltWireframe>
Time (Body Threads Thread Card Seen Dropdown Content Items Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Time />
</VeltWireframe>
Name (Body Threads Thread Card Seen Dropdown Content Items Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Name />
</VeltWireframe>
Avatar (Body Threads Thread Card Seen Dropdown Content Items Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Avatar />
</VeltWireframe>
Time (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Time />
</VeltWireframe>
Device Type (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.DeviceType />
</VeltWireframe>
Edited (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Edited />
</VeltWireframe>
Options (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options>
        <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content />
    </VeltCommentDialogWireframe.ThreadCard.Options>
</VeltWireframe>
Trigger (Body Threads Thread Card Options)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
</VeltWireframe>
Content (Body Threads Thread Card Options)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content>
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete />
    </VeltCommentDialogWireframe.ThreadCard.Options.Content>
</VeltWireframe>
Edit (Body Threads Thread Card Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
</VeltWireframe>
Delete (Body Threads Thread Card Options Content)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Thread />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Comment />
    </VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete>
</VeltWireframe>
Thread (Body Threads Thread Card Options Content Delete)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Thread />
</VeltWireframe>
Comment (Body Threads Thread Card Options Content Delete)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Comment />
</VeltWireframe>
Message (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Message />
</VeltWireframe>
Reaction Tool (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.ReactionTool />
</VeltWireframe>
Reactions (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Reactions />
</VeltWireframe>
Attachments (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other />
    </VeltCommentDialogWireframe.ThreadCard.Attachments>
</VeltWireframe>
Image (Body Threads Thread Card Attachments)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Preview />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Delete />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Download />
    </VeltCommentDialogWireframe.ThreadCard.Attachments.Image>
</VeltWireframe>
Preview (Body Threads Thread Card Attachments Image)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Preview />
</VeltWireframe>
Delete (Body Threads Thread Card Attachments Image)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Delete />
</VeltWireframe>
Download (Body Threads Thread Card Attachments Image)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Download />
</VeltWireframe>
Other (Body Threads Thread Card Attachments)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Delete />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Download />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Icon />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Name />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Size />
    </VeltCommentDialogWireframe.ThreadCard.Attachments.Other>
</VeltWireframe>
Delete (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Delete />
</VeltWireframe>
Download (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Download />
</VeltWireframe>
Icon (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Icon />
</VeltWireframe>
Name (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Name />
</VeltWireframe>
Size (Body Threads Thread Card Attachments Other)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Size />
</VeltWireframe>
Recordings (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Recordings />
</VeltWireframe>
Autocomplete Chip Tooltip (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe>
        <VeltAutocompleteChipTooltipWireframe.Icon />
        <VeltAutocompleteChipTooltipWireframe.Name />
        <VeltAutocompleteChipTooltipWireframe.Description />
    </VeltAutocompleteChipTooltipWireframe>
</VeltWireframe>
Icon (Body Threads Thread Card Autocomplete Chip Tooltip)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Icon />
</VeltWireframe>
Name (Body Threads Thread Card Autocomplete Chip Tooltip)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Name />
</VeltWireframe>
Description (Body Threads Thread Card Autocomplete Chip Tooltip)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Description />
</VeltWireframe>
Reactions Panel (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionsPanelWireframe>
        <VeltReactionsPanelWireframe.Items />
    </VeltReactionsPanelWireframe>
</VeltWireframe>
Items (Body Threads Thread Card Reactions Panel)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items>
        <VeltReactionsPanelWireframe.Items.Item />
    </VeltReactionsPanelWireframe.Items>
</VeltWireframe>
Item (Body Threads Thread Card Reactions Panel Items)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items.Item>
        <VeltReactionsPanelWireframe.Items.Item.Emoji />
    </VeltReactionsPanelWireframe.Items.Item>
</VeltWireframe>
Emoji (Body Threads Thread Card Reactions Panel Items Item)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items.Item.Emoji />
</VeltWireframe>
Reaction Pin (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinWireframe>
        <VeltReactionPinWireframe.Emoji />
        <VeltReactionPinWireframe.Count />
    </VeltReactionPinWireframe>
</VeltWireframe>
Emoji (Body Threads Thread Card Reaction Pin)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinWireframe.Emoji />
</VeltWireframe>
Count (Body Threads Thread Card Reaction Pin)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinWireframe.Count />
</VeltWireframe>
Reaction Pin Tooltip (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe>
        <VeltReactionPinTooltipWireframe.Users />
    </VeltReactionPinTooltipWireframe>
</VeltWireframe>
Users (Body Threads Thread Card Reaction Pin Tooltip)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users>
        <VeltReactionPinTooltipWireframe.Users.User />
    </VeltReactionPinTooltipWireframe.Users>
</VeltWireframe>
User (Body Threads Thread Card Reaction Pin Tooltip Users)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User>
        <VeltReactionPinTooltipWireframe.Users.User.Avatar />
        <VeltReactionPinTooltipWireframe.Users.User.Name />
    </VeltReactionPinTooltipWireframe.Users.User>
</VeltWireframe>
Avatar (Body Threads Thread Card Reaction Pin Tooltip Users User)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User.Avatar />
</VeltWireframe>
Name (Body Threads Thread Card Reaction Pin Tooltip Users User)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User.Name />
</VeltWireframe>
Reaction Tool (Body Threads Thread Card)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltReactionToolWireframe>
        {/* Your custom element */}
    </VeltReactionToolWireframe>
</VeltWireframe>

​
MoreReply (Body Threads)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.MoreReply />
</VeltWireframe>

​
Reply Avatars (Body)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars>
        <VeltCommentDialogWireframe.ReplyAvatars.List />
        <VeltCommentDialogWireframe.ReplyAvatars.RemainingCount />
    </VeltCommentDialogWireframe.ReplyAvatars>
</VeltWireframe>

​
List (Body Reply Avatars)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.List>
        <VeltCommentDialogWireframe.ReplyAvatars.List.Item />
    </VeltCommentDialogWireframe.ReplyAvatars.List>
</VeltWireframe>
Item (Body Reply Avatars List)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.List.Item />
</VeltWireframe>

​
Remaining Count (Body Reply Avatars)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.RemainingCount />
</VeltWireframe>

​
Toggle Reply (Body)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply>
        <VeltCommentDialogWireframe.ToggleReply.Icon />
        <VeltCommentDialogWireframe.ToggleReply.Count />
        <VeltCommentDialogWireframe.ToggleReply.Text />
    </VeltCommentDialogWireframe.ToggleReply>
</VeltWireframe>

​
Icon (Body Toggle Reply)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Icon />
</VeltWireframe>

​
Count (Body Toggle Reply)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Count />
</VeltWireframe>

​
Text (Body Toggle Reply)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Text />
</VeltWireframe>

​
Composer

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer>
        <VeltCommentDialogWireframe.Composer.Avatar />
        <VeltCommentDialogWireframe.Composer.Input />
        <VeltCommentDialogWireframe.Composer.Attachments />
        <VeltCommentDialogWireframe.Composer.Recordings />
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="file | attachments" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
        <VeltCommentDialogWireframe.Composer.AssignUser />
        <VeltAutocompleteOptionWireframe />
        <VeltAutocompleteGroupOptionWireframe />
    </VeltCommentDialogWireframe.Composer>
</VeltWireframe>

​
Avatar (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Avatar />
</VeltWireframe>

​
Attachments (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid />
    </VeltCommentDialogWireframe.Composer.Attachments>
</VeltWireframe>

​
Selected (Composer Attachments)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected>
</VeltWireframe>
Image (Composer Attachments Selected)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Preview />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Delete />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image.Loading />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected.Image>
</VeltWireframe>
Other (Composer Attachments Selected)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Delete />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Loading />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Icon />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Name />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other.Size />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected.Other>
</VeltWireframe>

​
Invalid (Composer Attachments)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Invalid>
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item />
    </VeltCommentDialogWireframe.Composer.Attachments.Invalid>
</VeltWireframe>
Item (Composer Attachments Invalid)
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item>
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Preview />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Message />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item.Delete />
    </VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item>
</VeltWireframe>

​
Recordings (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Recordings />
</VeltWireframe>

​
Input (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Input />
</VeltWireframe>

​
Action Button (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="@" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="autocomplete" hotkey="#" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="file | attachments" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="audio" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="video" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="screen" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
</VeltWireframe>

​
Assign User (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.AssignUser />
</VeltWireframe>

​
Autocomplete Option (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe>
        <VeltAutocompleteOptionWireframe.Icon />
        <VeltAutocompleteOptionWireframe.Name />
        <VeltAutocompleteOptionWireframe.Description field='name' />
        <VeltAutocompleteOptionWireframe.ErrorIcon />
    </VeltAutocompleteOptionWireframe>
</VeltWireframe>

​
Icon (Composer Autocomplete Option)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Icon />
</VeltWireframe>

​
Name (Composer Autocomplete Option)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Name />
</VeltWireframe>

​
Description (Composer Autocomplete Option)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Description field='name' />
</VeltWireframe>

​
Error Icon (Composer Autocomplete Option)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteOptionWireframe.ErrorIcon />
</VeltWireframe>

​
Autocomplete Group Option (Composer)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltAutocompleteGroupOptionWireframe />
</VeltWireframe>

​
All Comment

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.AllComment />
</VeltWireframe>

​
Approve

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Approve />
</VeltWireframe>

​
Sign In

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.SignIn />
</VeltWireframe>

​
Upgrade

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.Upgrade />
</VeltWireframe>

​
Suggestion Action

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction>
        <VeltCommentDialogWireframe.SuggestionAction.Accept />
        <VeltCommentDialogWireframe.SuggestionAction.Reject />
    </VeltCommentDialogWireframe.SuggestionAction>
</VeltWireframe>

​
Accept (Suggestion Action)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction.Accept />
</VeltWireframe>

​
Reject (Suggestion Action)

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction.Reject />
</VeltWireframe>

​
Styling

​
Disable ShadowDOM

  • By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
  • Disable the shadow dom to apply your custom CSS to the component.
Default: true
  • React / Next.js
  • Other Frameworks
Example
<VeltComments dialogShadowDom={false} />
API methods
const commentElement = client.getCommentElement();
commentElement.enableDialogShadowDOM();
commentElement.disableDialogShadowDOM();

​
Dark Mode

By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode. Default: false Below are the examples to enable Dark Mode for comments dialog:
  • React / Next.js
  • Other Frameworks
Example
<VeltComments dialogDarkMode={true}/>
API methods
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

​
Pre-defined Variants

The Comment Dialog has 2 pre-defined variants:
  • dialog: this will customize the Comment Dialog only within Pin, Area, and Text Comments
  • sidebar: this will customize the Comment Dialog only within Sidebar comments
To use them, set the variant name in the wireframe template equal to one of the pre-defined variants. You do not need to add it to the actual Velt component.
  • React / Next.js
  • Other Frameworks
React / Next.js
 <VeltWireframe>
    {/* This pre-defined variant will change the appearance of the Comment Dialog within Pin, Area, and Text comments only */}
    <VeltCommentDialogWireframe variant="dialog">
        ...
    </VeltCommentDialogWireframe>

    {/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */}
    <VeltCommentDialogWireframe variant="sidebar">
        ...
    </VeltCommentDialogWireframe>

    {/* If you dont use any variants, then customization will be applied to the Comment Dialog globally */}
    <VeltCommentDialogWireframe>
        ...
    </VeltCommentDialogWireframe>
</VeltWireframe>