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

​
Overview

<VeltWireframe>
    <VeltCommentDialogWireframe>
        <VeltCommentDialogWireframe.GhostBanner />
        <VeltCommentDialogWireframe.PrivateBanner />
        <VeltCommentDialogWireframe.AssigneeBanner />
        <VeltCommentDialogWireframe.Header />
        <VeltCommentDialogWireframe.PrivateBadge />
        <VeltCommentDialogWireframe.Body />
        <VeltCommentDialogWireframe.Composer />
        <VeltCommentDialogWireframe.VisibilityBanner />
        <VeltCommentDialogWireframe.AllComment />
        <VeltCommentDialogWireframe.Approve />
        <VeltCommentDialogWireframe.SignIn />
        <VeltCommentDialogWireframe.Upgrade />
        <VeltCommentDialogWireframe.SuggestionAction />
    </VeltCommentDialogWireframe>
</VeltWireframe>

​
Ghost Banner

<VeltWireframe>
    <VeltCommentDialogWireframe.GhostBanner />
</VeltWireframe>

​
Private Banner

<VeltWireframe>
    <VeltCommentDialogWireframe.PrivateBanner />
</VeltWireframe>

​
Assignee Banner

<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner>
        <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
        <VeltCommentDialogWireframe.AssigneeBanner.UnresolveButton />
        <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
        <VeltCommentDialogWireframe.AssigneeBanner.UserName />
    </VeltCommentDialogWireframe.AssigneeBanner>
</VeltWireframe>

​
Resolve Button (Assignee Banner)

<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.ResolveButton />
</VeltWireframe>

​
Unresolve Button (Assignee Banner)

<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.UnresolveButton />
</VeltWireframe>

​
User Avatar (Assignee Banner)

<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.UserAvatar />
</VeltWireframe>

​
User Name (Assignee Banner)

<VeltWireframe>
    <VeltCommentDialogWireframe.AssigneeBanner.UserName />
</VeltWireframe>

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

<VeltWireframe>
    <VeltCommentDialogWireframe.Status>
        <VeltCommentDialogWireframe.Status.Trigger />
        <VeltCommentDialogWireframe.Status.Content />
    </VeltCommentDialogWireframe.Status>
</VeltWireframe>

​
Trigger (Header Status)

<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger>
        <VeltCommentDialogWireframe.Status.Trigger.Icon />
        <VeltCommentDialogWireframe.Status.Trigger.Name />
        <VeltCommentDialogWireframe.Status.Trigger.Arrow />
    </VeltCommentDialogWireframe.Status.Trigger>
</VeltWireframe>
Icon (Header Status Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Icon />
</VeltWireframe>
Name (Header Status Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Name />
</VeltWireframe>
Arrow (Header Status Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Status)

<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content>
        <VeltCommentDialogWireframe.Status.Content.Item />
    </VeltCommentDialogWireframe.Status.Content>
</VeltWireframe>
Item (Header Status Content)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item.Icon />
</VeltWireframe>
Name (Header Status Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.Status.Content.Item.Name />
</VeltWireframe>

​
Priority (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.Priority>
        <VeltCommentDialogWireframe.Priority.Trigger />
        <VeltCommentDialogWireframe.Priority.Content />
    </VeltCommentDialogWireframe.Priority>
</VeltWireframe>

​
Trigger (Header Priority)

<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger>
        <VeltCommentDialogWireframe.Priority.Trigger.Icon />
        <VeltCommentDialogWireframe.Priority.Trigger.Name />
        <VeltCommentDialogWireframe.Priority.Trigger.Arrow />
    </VeltCommentDialogWireframe.Priority.Trigger>
</VeltWireframe>
Icon (Header Priority Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Icon />
</VeltWireframe>
Name (Header Priority Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Name />
</VeltWireframe>
Arrow (Header Priority Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Priority)

<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content>
        <VeltCommentDialogWireframe.Priority.Content.Item />
    </VeltCommentDialogWireframe.Priority.Content>
</VeltWireframe>
Item (Header Priority Content)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Icon />
</VeltWireframe>
Name (Header Priority Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Name />
</VeltWireframe>
Tick (Header Priority Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.Priority.Content.Item.Tick />
</VeltWireframe>

​
Options (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.Options>
        <VeltCommentDialogWireframe.Options.Trigger />
        <VeltCommentDialogWireframe.Options.Content />
    </VeltCommentDialogWireframe.Options>
</VeltWireframe>

​
Trigger (Header Options)

<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Trigger />
</VeltWireframe>

​
Content (Header Options)

<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content>
        <VeltCommentDialogWireframe.Options.Content.MarkAsRead />
        <VeltCommentDialogWireframe.Options.Content.MakePrivate />
        <VeltCommentDialogWireframe.Options.Content.Assign />
        <VeltCommentDialogWireframe.Options.Content.Edit />
        <VeltCommentDialogWireframe.Options.Content.Delete />
        <VeltCommentDialogWireframe.Options.Content.Notification />
    </VeltCommentDialogWireframe.Options.Content>
</VeltWireframe>
Mark As Read (Header Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MarkAsRead />
</VeltWireframe>
Make Private (Header Options Content)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate.Enable />
</VeltWireframe>
Disable (Header Options Content Make Private)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.MakePrivate.Disable />
</VeltWireframe>
Assign (Header Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Assign />
</VeltWireframe>
Edit (Header Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Edit />
</VeltWireframe>
Delete (Header Options Content)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete.Thread />
</VeltWireframe>
Comment (Header Options Content Delete)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Delete.Comment />
</VeltWireframe>
Notification (Header Options Content)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification.Subscribe />
</VeltWireframe>
Unsubscribe (Header Options Content Notification)
<VeltWireframe>
    <VeltCommentDialogWireframe.Options.Content.Notification.Unsubscribe />
</VeltWireframe>

<VeltWireframe>
    <VeltCommentDialogWireframe.CopyLink />
</VeltWireframe>

​
Resolve Button (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.ResolveButton />
</VeltWireframe>

​
Custom Annotation Dropdown (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger />
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown>
</VeltWireframe>

​
Trigger (Header Custom Annotation Dropdown)

<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List.Item />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List>
</VeltWireframe>
Item (Header Custom Annotation Dropdown Trigger List)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.List.Item />
</VeltWireframe>
Remaining Count (Header Custom Annotation Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.RemainingCount />
</VeltWireframe>
Placeholder (Header Custom Annotation Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Placeholder />
</VeltWireframe>
Arrow (Header Custom Annotation Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Trigger.Arrow />
</VeltWireframe>

​
Content (Header Custom Annotation Dropdown)

<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content>
        <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item />
    </VeltCommentDialogWireframe.CustomAnnotationDropdown.Content>
</VeltWireframe>
Item (Header Custom Annotation Dropdown Content)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Label />
</VeltWireframe>
Icon (Header Custom Annotation Dropdown Content Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.CustomAnnotationDropdown.Content.Item.Icon />
</VeltWireframe>

​
Comment Index (Header)

<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. 
<VeltWireframe>
    <VeltCommentDialogWireframe.CommentNumber />
</VeltWireframe>

​
Comment Category (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.CommentCategory />
</VeltWireframe>

​
Comment Suggestion Status (Header)

<VeltWireframe>
    <VeltCommentDialogWireframe.CommentSuggestionStatus />
</VeltWireframe>

<VeltWireframe>
    <VeltCommentDialogWireframe.NavigationButton />
</VeltWireframe>

​
Private Badge

<VeltWireframe>
    <VeltCommentDialogWireframe.PrivateBadge />
</VeltWireframe>

​
Body

<VeltWireframe>
    <VeltCommentDialogWireframe.Body>
        <VeltCommentDialogWireframe.Threads />
        <VeltCommentDialogWireframe.ToggleReply />
        <VeltCommentDialogWireframe.HideReply />
        <VeltCommentDialogWireframe.ReplyAvatars />
    </VeltCommentDialogWireframe.Body>
</VeltWireframe>

​
Threads (Body)

<VeltWireframe>
    <VeltCommentDialogWireframe.Threads>
        <VeltCommentDialogWireframe.ThreadCard />
        <VeltCommentDialogWireframe.MoreReply />
    </VeltCommentDialogWireframe.Threads>
</VeltWireframe>

​
Thread Card (Body Threads)

<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.EditComposer />
        <VeltCommentDialogWireframe.ThreadCard.Reactions />
        <VeltCommentDialogWireframe.ThreadCard.ReactionPin />
        <VeltCommentDialogWireframe.ThreadCard.Attachments />
        <VeltCommentDialogWireframe.ThreadCard.Recordings />
        <VeltCommentDialogWireframe.ThreadCard.Reply />
        <VeltCommentDialogWireframe.ThreadCard.AssignButton />
        <VeltReactionToolWireframe />
        <VeltReactionPinWireframe />
        <VeltReactionsPanelWireframe />
        <VeltReactionPinTooltipWireframe />
        <VeltAutocompleteChipTooltipWireframe />
    </VeltCommentDialogWireframe.ThreadCard>
</VeltWireframe>
Avatar (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Avatar />
</VeltWireframe>
Name (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Name />
</VeltWireframe>
Unread (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Unread />
</VeltWireframe>
Seen Dropdown (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown>
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content />
    </VeltCommentDialogWireframe.ThreadCard.SeenDropdown>
</VeltWireframe>
Trigger (Body Threads Thread Card Seen Dropdown)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Trigger />
</VeltWireframe>
Content (Body Threads Thread Card Seen Dropdown)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Title />
</VeltWireframe>
Items (Body Threads Thread Card Seen Dropdown Content)
<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)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Time />
</VeltWireframe>
Name (Body Threads Thread Card Seen Dropdown Content Items Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Name />
</VeltWireframe>
Avatar (Body Threads Thread Card Seen Dropdown Content Items Item)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.SeenDropdown.Content.Items.Item.Avatar />
</VeltWireframe>
Time (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Time />
</VeltWireframe>
Device Type (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.DeviceType />
</VeltWireframe>
Edited (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Edited />
</VeltWireframe>
Options (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options>
        <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content />
    </VeltCommentDialogWireframe.ThreadCard.Options>
</VeltWireframe>
Trigger (Body Threads Thread Card Options)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Trigger />
</VeltWireframe>
Content (Body Threads Thread Card Options)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content>
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.MarkAsRead />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
        <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete />
    </VeltCommentDialogWireframe.ThreadCard.Options.Content>
</VeltWireframe>
Mark As Read (Body Threads Thread Card Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.MarkAsRead />
</VeltWireframe>
Edit (Body Threads Thread Card Options Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Edit />
</VeltWireframe>
Delete (Body Threads Thread Card Options Content)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Thread />
</VeltWireframe>
Comment (Body Threads Thread Card Options Content Delete)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Options.Content.Delete.Comment />
</VeltWireframe>
Message (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Message />
</VeltWireframe>
ShowMore (Body Threads Thread Card Message)
Visible when message truncation is enabled and the message exceeds the line limit. Clicking expands the message. 
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Message.ShowMore />
</VeltWireframe>
ShowLess (Body Threads Thread Card Message)
Visible when an expanded truncated message is shown. Clicking collapses it back. 
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Message.ShowLess />
</VeltWireframe>
EditComposer (Body Threads Thread Card)
Conditionally renders when a comment is being edited. 
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.EditComposer />
</VeltWireframe>
Reaction Tool (Body Threads Thread Card)
Use excludeReactionIds to hide specific reactions from the reaction picker. 
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.ReactionTool excludeReactionIds={['thumbs-up', 'heart']} />
</VeltWireframe>
Reactions (Body Threads Thread Card)
Use excludeReactionIds to hide specific reactions from display. 
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Reactions excludeReactionIds={['thumbs-up', 'heart']} />
</VeltWireframe>
ReactionPin (Body Threads Thread Card)
Display a specific reaction as a pinned standalone element. 
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.ReactionPin reactionId="thumbs-up" />
</VeltWireframe>
Props:
Attachments (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments>
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Image />
        <VeltCommentDialogWireframe.ThreadCard.Attachments.Other />
    </VeltCommentDialogWireframe.ThreadCard.Attachments>
</VeltWireframe>
Image (Body Threads Thread Card Attachments)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Preview />
</VeltWireframe>
Delete (Body Threads Thread Card Attachments Image)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Delete />
</VeltWireframe>
Download (Body Threads Thread Card Attachments Image)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Image.Download />
</VeltWireframe>
Other (Body Threads Thread Card Attachments)
<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)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Delete />
</VeltWireframe>
Download (Body Threads Thread Card Attachments Other)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Download />
</VeltWireframe>
Icon (Body Threads Thread Card Attachments Other)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Icon />
</VeltWireframe>
Name (Body Threads Thread Card Attachments Other)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Name />
</VeltWireframe>
Size (Body Threads Thread Card Attachments Other)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Attachments.Other.Size />
</VeltWireframe>
Recordings (Body Threads Thread Card)
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Recordings />
</VeltWireframe>
Autocomplete Chip Tooltip (Body Threads Thread Card)
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe>
        <VeltAutocompleteChipTooltipWireframe.Icon />
        <VeltAutocompleteChipTooltipWireframe.Name />
        <VeltAutocompleteChipTooltipWireframe.Description />
    </VeltAutocompleteChipTooltipWireframe>
</VeltWireframe>
Icon (Body Threads Thread Card Autocomplete Chip Tooltip)
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Icon />
</VeltWireframe>
Name (Body Threads Thread Card Autocomplete Chip Tooltip)
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Name />
</VeltWireframe>
Description (Body Threads Thread Card Autocomplete Chip Tooltip)
<VeltWireframe>
    <VeltAutocompleteChipTooltipWireframe.Description />
</VeltWireframe>
Reactions Panel (Body Threads Thread Card)
<VeltWireframe>
    <VeltReactionsPanelWireframe>
        <VeltReactionsPanelWireframe.Items />
    </VeltReactionsPanelWireframe>
</VeltWireframe>
Items (Body Threads Thread Card Reactions Panel)
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items>
        <VeltReactionsPanelWireframe.Items.Item />
    </VeltReactionsPanelWireframe.Items>
</VeltWireframe>
Item (Body Threads Thread Card Reactions Panel Items)
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items.Item>
        <VeltReactionsPanelWireframe.Items.Item.Emoji />
    </VeltReactionsPanelWireframe.Items.Item>
</VeltWireframe>
Emoji (Body Threads Thread Card Reactions Panel Items Item)
<VeltWireframe>
    <VeltReactionsPanelWireframe.Items.Item.Emoji />
</VeltWireframe>
Reaction Pin (Body Threads Thread Card)
<VeltWireframe>
    <VeltReactionPinWireframe>
        <VeltReactionPinWireframe.Emoji />
        <VeltReactionPinWireframe.Count />
    </VeltReactionPinWireframe>
</VeltWireframe>
Emoji (Body Threads Thread Card Reaction Pin)
<VeltWireframe>
    <VeltReactionPinWireframe.Emoji />
</VeltWireframe>
Count (Body Threads Thread Card Reaction Pin)
<VeltWireframe>
    <VeltReactionPinWireframe.Count />
</VeltWireframe>
Reaction Pin Tooltip (Body Threads Thread Card)
<VeltWireframe>
    <VeltReactionPinTooltipWireframe>
        <VeltReactionPinTooltipWireframe.Users />
    </VeltReactionPinTooltipWireframe>
</VeltWireframe>
Users (Body Threads Thread Card Reaction Pin Tooltip)
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users>
        <VeltReactionPinTooltipWireframe.Users.User />
    </VeltReactionPinTooltipWireframe.Users>
</VeltWireframe>
User (Body Threads Thread Card Reaction Pin Tooltip Users)
<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)
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User.Avatar />
</VeltWireframe>
Name (Body Threads Thread Card Reaction Pin Tooltip Users User)
<VeltWireframe>
    <VeltReactionPinTooltipWireframe.Users.User.Name />
</VeltWireframe>
Reaction Tool (Body Threads Thread Card)
<VeltWireframe>
    <VeltReactionToolWireframe>
        {/* Your custom element */}
    </VeltReactionToolWireframe>
</VeltWireframe>
Reply (Body Threads Thread Card)
The Reply component provides a quick reply button on each comment thread card, enabling users to respond directly without expanding the full comment dialog. This streamlines the commenting workflow in collaborative environments. This button is hidden by default and can be enabled through wireframe customization. 
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.Reply />
</VeltWireframe>
Assign Button (Body Threads Thread Card)
The Assign Button component allows you to customize the assign button that appears on individual comment thread cards. 
<VeltWireframe>
    <VeltCommentDialogWireframe.ThreadCard.AssignButton />
</VeltWireframe>

​
MoreReply (Body Threads)

<VeltWireframe>
    <VeltCommentDialogWireframe.MoreReply />
</VeltWireframe>

​
Reply Avatars (Body)

<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars>
        <VeltCommentDialogWireframe.ReplyAvatars.List />
        <VeltCommentDialogWireframe.ReplyAvatars.RemainingCount />
    </VeltCommentDialogWireframe.ReplyAvatars>
</VeltWireframe>

​
List (Body Reply Avatars)

<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.List>
        <VeltCommentDialogWireframe.ReplyAvatars.List.Item />
    </VeltCommentDialogWireframe.ReplyAvatars.List>
</VeltWireframe>
Item (Body Reply Avatars List)
<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.List.Item />
</VeltWireframe>

​
Remaining Count (Body Reply Avatars)

<VeltWireframe>
    <VeltCommentDialogWireframe.ReplyAvatars.RemainingCount />
</VeltWireframe>

​
Toggle Reply (Body)

<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply>
        <VeltCommentDialogWireframe.ToggleReply.Icon />
        <VeltCommentDialogWireframe.ToggleReply.Count />
        <VeltCommentDialogWireframe.ToggleReply.Text />
    </VeltCommentDialogWireframe.ToggleReply>
</VeltWireframe>

​
Icon (Body Toggle Reply)

<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Icon />
</VeltWireframe>

​
Count (Body Toggle Reply)

<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Count />
</VeltWireframe>

​
Text (Body Toggle Reply)

<VeltWireframe>
    <VeltCommentDialogWireframe.ToggleReply.Text />
</VeltWireframe>

​
Hide Reply (Body)

The Hide Reply component adds a button to hide replies in the comment dialog, letting you control when replies are visible to match your workflow. 
<VeltWireframe>
    <VeltCommentDialogWireframe.HideReply />
</VeltWireframe>

​
Composer

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer>
        <VeltCommentDialogWireframe.Composer.Avatar />
        <VeltCommentDialogWireframe.Composer.Input />
        <VeltCommentDialogWireframe.Composer.Attachments />
        <VeltCommentDialogWireframe.Composer.Recordings />
        <VeltCommentDialogWireframe.Composer.FormatToolbar />
        <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="format" />
        <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
        <VeltCommentDialogWireframe.Composer.AssignUser />
        <VeltAutocompleteOptionWireframe />
        <VeltAutocompleteGroupOptionWireframe />
    </VeltCommentDialogWireframe.Composer>
</VeltWireframe>

​
Avatar (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Avatar />
</VeltWireframe>

​
Attachments (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected />
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid />
    </VeltCommentDialogWireframe.Composer.Attachments>
</VeltWireframe>

​
Selected (Composer Attachments)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Selected>
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Image />
        <VeltCommentDialogWireframe.Composer.Attachments.Selected.Other />
    </VeltCommentDialogWireframe.Composer.Attachments.Selected>
</VeltWireframe>
Image (Composer Attachments Selected)
<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)
<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)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Attachments.Invalid>
        <VeltCommentDialogWireframe.Composer.Attachments.Invalid.Item />
    </VeltCommentDialogWireframe.Composer.Attachments.Invalid>
</VeltWireframe>
Item (Composer Attachments Invalid)
<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)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Recordings />
</VeltWireframe>

​
Input (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.Input />
</VeltWireframe>

​
Format Toolbar (Composer)

The format toolbar contains text formatting buttons (bold, italic, underline, strikethrough). 
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.FormatToolbar>
      <VeltCommentDialogWireframe.Composer.FormatToolbar.Button type="bold" />
      <VeltCommentDialogWireframe.Composer.FormatToolbar.Button type="italic" />
      <VeltCommentDialogWireframe.Composer.FormatToolbar.Button type="underline" />
      <VeltCommentDialogWireframe.Composer.FormatToolbar.Button type="strikethrough" />
    </VeltCommentDialogWireframe.Composer.FormatToolbar>
</VeltWireframe>

​
Button (Composer Format Toolbar)

Individual format button with type: bold, italic, underline, or strikethrough. 
<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.FormatToolbar.Button type="bold" />
</VeltWireframe>

​
Action Button (Composer)

Supports types: autocomplete, file, attachments, audio, video, screen, format, submit. 
<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="format" />
    <VeltCommentDialogWireframe.Composer.ActionButton type="submit" />
</VeltWireframe>

​
Assign User (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.Composer.AssignUser />
</VeltWireframe>

​
Visibility Dropdown (Composer)

<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityDropdown>
        <VeltCommentDialogWireframe.VisibilityDropdown.Trigger>
            <VeltCommentDialogWireframe.VisibilityDropdown.Trigger.Label />
            <VeltCommentDialogWireframe.VisibilityDropdown.Trigger.Icon />
        </VeltCommentDialogWireframe.VisibilityDropdown.Trigger>
        <VeltCommentDialogWireframe.VisibilityDropdown.Content>
            <VeltCommentDialogWireframe.VisibilityDropdown.Content.Public />
            <VeltCommentDialogWireframe.VisibilityDropdown.Content.Private />
        </VeltCommentDialogWireframe.VisibilityDropdown.Content>
    </VeltCommentDialogWireframe.VisibilityDropdown>
</VeltWireframe>

​
Trigger (Composer Visibility Dropdown)

<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityDropdown.Trigger>
        <VeltCommentDialogWireframe.VisibilityDropdown.Trigger.Label />
        <VeltCommentDialogWireframe.VisibilityDropdown.Trigger.Icon />
    </VeltCommentDialogWireframe.VisibilityDropdown.Trigger>
</VeltWireframe>
Label (Composer Visibility Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityDropdown.Trigger.Label />
</VeltWireframe>
Icon (Composer Visibility Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityDropdown.Trigger.Icon />
</VeltWireframe>

​
Content (Composer Visibility Dropdown)

<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityDropdown.Content>
        <VeltCommentDialogWireframe.VisibilityDropdown.Content.Public />
        <VeltCommentDialogWireframe.VisibilityDropdown.Content.Private />
    </VeltCommentDialogWireframe.VisibilityDropdown.Content>
</VeltWireframe>
Public (Composer Visibility Dropdown Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityDropdown.Content.Public />
</VeltWireframe>
Private (Composer Visibility Dropdown Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityDropdown.Content.Private />
</VeltWireframe>

​
Autocomplete Option (Composer)

For standalone autocomplete primitive components (e.g., VeltAutocompleteOption, VeltAutocompleteChip), see the Autocomplete Primitives section.
<VeltWireframe>
    <VeltAutocompleteOptionWireframe>
        <VeltAutocompleteOptionWireframe.Icon />
        <VeltAutocompleteOptionWireframe.Name />
        <VeltAutocompleteOptionWireframe.Description field='name' />
        <VeltAutocompleteOptionWireframe.ErrorIcon />
    </VeltAutocompleteOptionWireframe>
</VeltWireframe>

​
Icon (Composer Autocomplete Option)

<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Icon />
</VeltWireframe>

​
Name (Composer Autocomplete Option)

<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Name />
</VeltWireframe>

​
Description (Composer Autocomplete Option)

<VeltWireframe>
    <VeltAutocompleteOptionWireframe.Description field='name' />
</VeltWireframe>

​
Error Icon (Composer Autocomplete Option)

<VeltWireframe>
    <VeltAutocompleteOptionWireframe.ErrorIcon />
</VeltWireframe>

​
Autocomplete Group Option (Composer)

<VeltWireframe>
    <VeltAutocompleteGroupOptionWireframe />
</VeltWireframe>

​
Visibility Banner

Displays below the composer to let users set per-comment visibility. The selectedVisibility data variable exposes the current CommentVisibilityOptionType. 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner>
        <VeltCommentDialogWireframe.VisibilityBanner.Icon />
        <VeltCommentDialogWireframe.VisibilityBanner.Text />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown />
    </VeltCommentDialogWireframe.VisibilityBanner>
</VeltWireframe>

​
Icon (Visibility Banner)

<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Icon />
</VeltWireframe>

​
Text (Visibility Banner)

<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Text />
</VeltWireframe>

<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown>
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content />
    </VeltCommentDialogWireframe.VisibilityBanner.Dropdown>
</VeltWireframe>

​
Trigger (Visibility Banner Dropdown)

<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger>
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.Label />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.Icon />
    </VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger>
</VeltWireframe>
Label (Visibility Banner Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.Label />
</VeltWireframe>
AvatarList (Visibility Banner Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList>
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList.Item />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList.RemainingCount />
    </VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList>
</VeltWireframe>
Item (Visibility Banner Dropdown Trigger AvatarList) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList.Item />
</VeltWireframe>
RemainingCount (Visibility Banner Dropdown Trigger AvatarList) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.AvatarList.RemainingCount />
</VeltWireframe>
Icon (Visibility Banner Dropdown Trigger)
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Trigger.Icon />
</VeltWireframe>

​
Content (Visibility Banner Dropdown)

<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content>
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item type="public" />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item type="org-users" />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item type="personal" />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item type="selected-people" />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker />
    </VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content>
</VeltWireframe>
Item (Visibility Banner Dropdown Content)
Accepts type: 'public' | 'org-users' | 'personal' | 'selected-people'. 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item type="public">
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item.Icon />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item.Label />
    </VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item>
</VeltWireframe>
Icon (Visibility Banner Dropdown Content Item) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item.Icon />
</VeltWireframe>
Label (Visibility Banner Dropdown Content Item) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.Item.Label />
</VeltWireframe>
UserPicker (Visibility Banner Dropdown Content)
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker>
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item />
    </VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker>
</VeltWireframe>
Search (Visibility Banner Dropdown Content UserPicker) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search>
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search.Icon />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search.Input />
    </VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search>
</VeltWireframe>
Icon (Visibility Banner Dropdown Content UserPicker Search) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search.Icon />
</VeltWireframe>
Input (Visibility Banner Dropdown Content UserPicker Search) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Search.Input />
</VeltWireframe>
Header (Visibility Banner Dropdown Content UserPicker) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header>
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header.Count />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header.UnselectAll />
    </VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header>
</VeltWireframe>
Count (Visibility Banner Dropdown Content UserPicker Header) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header.Count />
</VeltWireframe>
UnselectAll (Visibility Banner Dropdown Content UserPicker Header) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Header.UnselectAll />
</VeltWireframe>
Item (Visibility Banner Dropdown Content UserPicker) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item>
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item.Avatar />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item.Info />
        <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item.Check />
    </VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item>
</VeltWireframe>
Avatar (Visibility Banner Dropdown Content UserPicker Item) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item.Avatar />
</VeltWireframe>
Info (Visibility Banner Dropdown Content UserPicker Item) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item.Info />
</VeltWireframe>
Check (Visibility Banner Dropdown Content UserPicker Item) 
<VeltWireframe>
    <VeltCommentDialogWireframe.VisibilityBanner.Dropdown.Content.UserPicker.Item.Check />
</VeltWireframe>

​
All Comment

<VeltWireframe>
    <VeltCommentDialogWireframe.AllComment />
</VeltWireframe>

​
Approve

<VeltWireframe>
    <VeltCommentDialogWireframe.Approve />
</VeltWireframe>

​
Sign In

<VeltWireframe>
    <VeltCommentDialogWireframe.SignIn />
</VeltWireframe>

​
Upgrade

<VeltWireframe>
    <VeltCommentDialogWireframe.Upgrade />
</VeltWireframe>

​
Suggestion Action

<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction>
        <VeltCommentDialogWireframe.SuggestionAction.Accept />
        <VeltCommentDialogWireframe.SuggestionAction.Reject />
    </VeltCommentDialogWireframe.SuggestionAction>
</VeltWireframe>

​
Accept (Suggestion Action)

<VeltWireframe>
    <VeltCommentDialogWireframe.SuggestionAction.Accept />
</VeltWireframe>

​
Reject (Suggestion Action)

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