> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Comment Dialog Wireframes
> Wireframe components for building custom Comment Dialog interfaces with maximum flexibility.
We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
## Overview
```jsx theme={null}
```
```html theme={null}
```
## Ghost Banner
```jsx theme={null}
```
```html theme={null}
```
## Private Banner
```jsx theme={null}
```
```html theme={null}
```
## Assignee Banner
```jsx theme={null}
```
```html theme={null}
```
### Resolve Button (Assignee Banner)
```jsx theme={null}
```
```html theme={null}
```
### Unresolve Button (Assignee Banner)
```jsx theme={null}
```
```html theme={null}
```
### User Avatar (Assignee Banner)
```jsx theme={null}
```
```html theme={null}
```
### User Name (Assignee Banner)
```jsx theme={null}
```
```html theme={null}
```
## Header
```jsx theme={null}
// Pin Dialog Header
// Sidebar Dialog Header
```
```html theme={null}
```
### Status (Header)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=64e0f3ae76a5c30b76795cd4b99f4208)
```jsx theme={null}
```
```html theme={null}
```
#### Trigger (Header Status)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=e3e2a89629d404a738d974170a95f0da)
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Header Status Trigger)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=881358ba2e98d823e5f1159391cc2eee)
```jsx theme={null}
```
```html theme={null}
```
##### **Name (Header Status Trigger)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=514d5057301bc0bac4baa32ecb35dfa7)
```jsx theme={null}
```
```html theme={null}
```
##### **Arrow (Header Status Trigger)**
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=9ac37faf9ad8c7c297cb4087f8c5b30e)
```jsx theme={null}
```
```html theme={null}
```
#### Content (Header Status)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=ff153039708c9e89f0c03cf93150370e)
```jsx theme={null}
```
```html theme={null}
```
##### **Item (Header Status Content)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=b5a7ac0f874cbc4a36eb77a208df7968)
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Header Status Content Item)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=1373f271afcf048ff41853cc02f07f33)
```jsx theme={null}
```
```html theme={null}
```
##### **Name (Header Status Content Item)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=936c09200bedb3853507968d3f9418f0)
```jsx theme={null}
```
```html theme={null}
```
### Priority (Header)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=7f3e41fa47957b231d43a0f246c42827)
```jsx theme={null}
```
```html theme={null}
```
#### Trigger (Header Priority)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=ab838e039b8f11423792eb196205fc11)
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Header Priority Trigger)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=3422f7b2b815124ad570c0054d3441f8)
```jsx theme={null}
```
```html theme={null}
```
##### **Name (Header Priority Trigger)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=0ba4c3a0a48da4595a1a189e6dfbae37)
```jsx theme={null}
```
```html theme={null}
```
##### **Arrow (Header Priority Trigger)**
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=aa9bc78a6af4ebf32413caff0f295b17)
```jsx theme={null}
```
```html theme={null}
```
#### Content (Header Priority)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=9c33296d7babdd2b467c4bfcb621e4c8)
```jsx theme={null}
```
```html theme={null}
```
##### **Item (Header Priority Content)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=1906c8a05b54cc4d064ee247828eb824)
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Header Priority Content Item)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=c6df74e0c107d8e7ccc7618826d95c3f)
```jsx theme={null}
```
```html theme={null}
```
##### **Name (Header Priority Content Item)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=aa0ada111467b5ae591df65ae78c6b51)
```jsx theme={null}
```
```html theme={null}
```
##### **Tick (Header Priority Content Item)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=a5601807c4025e42291569ad1733daa4)
```jsx theme={null}
```
```html theme={null}
```
### Options (Header)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=9452b4100b750c2661fbe4bfb00943cd)
```jsx theme={null}
```
```html theme={null}
```
#### Trigger (Header Options)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=a21fbb36d8de6eb3a0c801ad86e7eb2f)
```jsx theme={null}
```
```html theme={null}
```
#### Content (Header Options)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=8a52449b60fb24f48962543d59bf2fb4)
```jsx theme={null}
```
```html theme={null}
```
##### **Mark As Read (Header Options Content)**
```jsx theme={null}
```
```html theme={null}
```
##### **Make Private (Header Options Content)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=0516d89b6ab6df9abafde146743faa53)
```jsx theme={null}
```
```html theme={null}
```
##### **Enable (Header Options Content Make Private)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=a409b7faaf9a793c22bfb01cb80e2a5a)
```jsx theme={null}
```
```html theme={null}
```
##### **Disable (Header Options Content Make Private)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e1f61d8806c8d4a4d5db06dfd2120fb8)
```jsx theme={null}
```
```html theme={null}
```
##### **Assign (Header Options Content)**
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=e08752fe16b93ca0b13d21c50ba83e9f)
```jsx theme={null}
```
```html theme={null}
```
##### **Edit (Header Options Content)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=8b2be2b55eec2b925265f6a275c562f8)
```jsx theme={null}
```
```html theme={null}
```
##### **Delete (Header Options Content)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=3964289444d500a39cbdf9bfddf8d9a8)
```jsx theme={null}
```
```html theme={null}
```
##### **Thread (Header Options Content Delete)**
```jsx theme={null}
```
```html theme={null}
```
##### **Comment (Header Options Content Delete)**
```jsx theme={null}
```
```html theme={null}
```
##### **Notification (Header Options Content)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=66d3c84f562c82a041a211c5af25f246)
```jsx theme={null}
```
```html theme={null}
```
##### **Subscribe (Header Options Content Notification)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=6eb5817cc362a6678dde7648d7647021)
```jsx theme={null}
```
```html theme={null}
```
##### **Unsubscribe (Header Options Content Notification)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=9ce682ca90f55c2f15ff02f674f11647)
```jsx theme={null}
```
```html theme={null}
```
### Copy Link (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=fbf09bba5b0e72eca1993cd4d7097f46)
```jsx theme={null}
```
```html theme={null}
```
### Resolve Button (Header)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=cc78efb60985896f3833dd6dec886489)
```jsx theme={null}
```
```html theme={null}
```
### Custom Annotation Dropdown (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=a17bf04fcbbf25931a88e7bb43d0f8f1)
```jsx theme={null}
```
```html theme={null}
```
#### Trigger (Header Custom Annotation Dropdown)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=0e7c14be51e89f19aae6b58ef2e7ff53)
```jsx theme={null}
```
```html theme={null}
```
##### **List (Header Custom Annotation Dropdown Trigger)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=ce88b2e90d0eac0e61cd19c6ab8ec193)
```jsx theme={null}
```
```html theme={null}
```
##### **Item (Header Custom Annotation Dropdown Trigger List)**
```jsx theme={null}
```
```html theme={null}
```
##### **Remaining Count (Header Custom Annotation Dropdown Trigger)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=7131de0cfad834fb4cf273be0ae58048)
```jsx theme={null}
```
```html theme={null}
```
##### **Placeholder (Header Custom Annotation Dropdown Trigger)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=7c3ff26befc5a239933c3039a7da5653)
```jsx theme={null}
```
```html theme={null}
```
##### **Arrow (Header Custom Annotation Dropdown Trigger)**
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=189a367b3afa11226b20e6ae0376ff3c)
```jsx theme={null}
```
```html theme={null}
```
#### Content (Header Custom Annotation Dropdown)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=b393e02617bc7dbd067a6c5be12f0b02)
```jsx theme={null}
```
```html theme={null}
```
##### **Item (Header Custom Annotation Dropdown Content)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=71effc4645fcf806db5e07bf3ef312fc)
```jsx theme={null}
```
```html theme={null}
```
##### **Label (Header Custom Annotation Dropdown Content Item)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=49f69f6652be8f2483978029bd9605f3)
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Header Custom Annotation Dropdown Content Item)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e185e37b99070e1eadd182a5b4cbd11f)
```jsx theme={null}
```
```html theme={null}
```
### Comment Index (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=761e53b7424a49fcb0a5eb75983c21dd)
```jsx theme={null}
```
```html theme={null}
```
### 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.
```jsx theme={null}
```
```html theme={null}
```
### Comment Category (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=ef22e8aa3cc3559eb0e2615e64c5e66a)
```jsx theme={null}
```
```html theme={null}
```
### Comment Suggestion Status (Header)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=4a3495083bca62d4df42965e60a922b7)
```jsx theme={null}
```
```html theme={null}
```
### Navigation Button (Header)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=634215731ce1295b36c5c0dc4237b7d7)
```jsx theme={null}
```
```html theme={null}
```
## Private Badge
```jsx theme={null}
```
```html theme={null}
```
## Body
```jsx theme={null}
```
```html theme={null}
```
### Threads (Body)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=92adcf86083b4f1ce1cb5d1a62dfc53b)
```jsx theme={null}
```
```html theme={null}
```
#### Thread Card (Body Threads)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=a6b802a4e2bae90f82f7b05b30081f1d)
```jsx theme={null}
```
```html theme={null}
```
##### **Avatar (Body Threads Thread Card)**
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=b19aabdbe6ae6b69ef62080c7b3104e6)
```jsx theme={null}
```
```html theme={null}
```
##### **Name (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=c8d9bc2f3cf22656db7084fce2372744)
```jsx theme={null}
```
```html theme={null}
```
##### **Unread (Body Threads Thread Card)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=bd4ffb6ec34fb8d1401bc0ecfb611992)
```jsx theme={null}
```
```html theme={null}
```
##### **Seen Dropdown (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=5fbf2b16c6e8a26c68241ff5dc5174e6)
```jsx theme={null}
```
```html theme={null}
```
##### **Trigger (Body Threads Thread Card Seen Dropdown)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=fdfcef2d023cc5bcb1265642d237a442)
```jsx theme={null}
```
```html theme={null}
```
##### **Content (Body Threads Thread Card Seen Dropdown)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=8fa30559d2c33d3b8b772762cc686263)
```jsx theme={null}
```
```html theme={null}
```
##### **Title (Body Threads Thread Card Seen Dropdown Content)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=427ef7d49b9df4e34f5073561d14d873)
```jsx theme={null}
```
```html theme={null}
```
##### **Items (Body Threads Thread Card Seen Dropdown Content)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=793d28194c98e84394f8c82d89f7d6dc)
```jsx theme={null}
```
```html theme={null}
```
##### **Item (Body Threads Thread Card Seen Dropdown Content Items)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=fca98407341af48443fdd12e69344300)
```jsx theme={null}
```
```html theme={null}
```
##### **Time (Body Threads Thread Card Seen Dropdown Content Items Item)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=db8cd1e45e32a50a7af419c0cbb722aa)
```jsx theme={null}
```
```html theme={null}
```
##### **Name (Body Threads Thread Card Seen Dropdown Content Items Item)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=5902d911308bbc80d349be6ae5c41bd7)
```jsx theme={null}
```
```html theme={null}
```
##### **Avatar (Body Threads Thread Card Seen Dropdown Content Items Item)**
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=ad07a02dc35454fee7eb76f7e8a7d759)
```jsx theme={null}
```
```html theme={null}
```
##### **Time (Body Threads Thread Card)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=4e8e256486ef4cc84a61b8260561a001)
```jsx theme={null}
```
```html theme={null}
```
##### **Device Type (Body Threads Thread Card)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=f03a17067d0f92d901937c82bc9a6fab)
```jsx theme={null}
```
```html theme={null}
```
##### **Edited (Body Threads Thread Card)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=f687d776e9dbe87bb56f37ead6b95000)
```jsx theme={null}
```
```html theme={null}
```
##### **Options (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=456c2fd5416ead98e0df9eb6b199c207)
```jsx theme={null}
```
```html theme={null}
```
##### **Trigger (Body Threads Thread Card Options)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=791032c17c309fc14944152f8844c77c)
```jsx theme={null}
```
```html theme={null}
```
##### **Content (Body Threads Thread Card Options)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=c82c2e39f127d38b93dca7d2a82b9951)
```jsx theme={null}
```
```html theme={null}
```
##### **Mark As Read (Body Threads Thread Card Options Content)**
```jsx theme={null}
```
```html theme={null}
```
##### **Edit (Body Threads Thread Card Options Content)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=8974aace9ed4d8abf260d53eb53ac5ad)
```jsx theme={null}
```
```html theme={null}
```
##### **Delete (Body Threads Thread Card Options Content)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=89735013a02ecae0e74545525131830a)
```jsx theme={null}
```
```html theme={null}
```
##### **Thread (Body Threads Thread Card Options Content Delete)**
```jsx theme={null}
```
```html theme={null}
```
##### **Comment (Body Threads Thread Card Options Content Delete)**
```jsx theme={null}
```
```html theme={null}
```
##### **Message (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=fd62d8bcf7b68cc4c194450f17bd650a)
```jsx theme={null}
```
```html theme={null}
```
##### **ShowMore (Body Threads Thread Card Message)**
Visible when message truncation is enabled and the message exceeds the line limit. Clicking expands the message.
```jsx theme={null}
```
```html theme={null}
```
##### **ShowLess (Body Threads Thread Card Message)**
Visible when an expanded truncated message is shown. Clicking collapses it back.
```jsx theme={null}
```
```html theme={null}
```
##### **EditComposer (Body Threads Thread Card)**
Conditionally renders when a comment is being edited.
```jsx theme={null}
```
```html theme={null}
```
##### **Reaction Tool (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=aaf9c12a223b6d0a040467c266b2f298)
Use `excludeReactionIds` to hide specific reactions from the reaction picker.
```jsx theme={null}
```
```html theme={null}
```
##### **Reactions (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=260fdbc7cccba96e89a0126a12b45e4b)
Use `excludeReactionIds` to hide specific reactions from display.
```jsx theme={null}
```
```html theme={null}
```
##### **ReactionPin (Body Threads Thread Card)**
Display a specific reaction as a pinned standalone element.
```jsx theme={null}
```
```html theme={null}
```
**Props**:
* `reactionId` ([`IVeltCommentDialogThreadCardReactionPinProps`](/api-reference/sdk/models/data-models#iveltcommentdialogthreadcardreactionpinprops)): Unique identifier of the reaction to pin and display
##### **Attachments (Body Threads Thread Card)**
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=a58fcfd2897691128f32ecfc67728e30)
```jsx theme={null}
```
```html theme={null}
```
##### **Image (Body Threads Thread Card Attachments)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=f95ad6093576f909fbc8369a1b3dffbf)
```jsx theme={null}
```
```html theme={null}
```
##### **Preview (Body Threads Thread Card Attachments Image)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=adfd7cb8750345f73416119b2bf23774)
```jsx theme={null}
```
```html theme={null}
```
##### **Delete (Body Threads Thread Card Attachments Image)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=cf43b48613c3bfb143e971a0bd79f553)
```jsx theme={null}
```
```html theme={null}
```
##### **Download (Body Threads Thread Card Attachments Image)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=f6014813860807740bccfca724299a85)
```jsx theme={null}
```
```html theme={null}
```
##### **Other (Body Threads Thread Card Attachments)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=c80a08f1a6edb7942e4d671ede34c27d)
```jsx theme={null}
```
```html theme={null}
```
##### **Delete (Body Threads Thread Card Attachments Other)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=6879d8b6b077e1c7b8c4ee854199fb20)
```jsx theme={null}
```
```html theme={null}
```
##### **Download (Body Threads Thread Card Attachments Other)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=aa7918f577f25647e7d4e5c008a3aeed)
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Body Threads Thread Card Attachments Other)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=15b2b652460b4863dbfa27e4fd1da0d8)
```jsx theme={null}
```
```html theme={null}
```
##### **Name (Body Threads Thread Card Attachments Other)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=f89d84ebb000f4a9c2e1f071033b0d59)
```jsx theme={null}
```
```html theme={null}
```
##### **Size (Body Threads Thread Card Attachments Other)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=e7643e8c0219ef6d98e979e335ab5de4)
```jsx theme={null}
```
```html theme={null}
```
##### **Recordings (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=281d948ef02ac809df40d4f00268746b)
```jsx theme={null}
```
```html theme={null}
```
##### **Autocomplete Chip Tooltip (Body Threads Thread Card)**
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=795d7eaaa55db39a5c4611a13163b644)
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Body Threads Thread Card Autocomplete Chip Tooltip)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=4b3f7c1cc12c97af6c408538d937fd5b)
```jsx theme={null}
```
```html theme={null}
```
##### **Name (Body Threads Thread Card Autocomplete Chip Tooltip)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=349fadb6f0365f2fd6e0511ea051dbcc)
```jsx theme={null}
```
```html theme={null}
```
##### **Description (Body Threads Thread Card Autocomplete Chip Tooltip)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=4cf4118868c42c95032ba6f7208aab67)
```jsx theme={null}
```
```html theme={null}
```
##### **Reactions Panel (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=22cbadec5556d1893b1b93301366cadc)
```jsx theme={null}
```
```html theme={null}
```
##### **Items (Body Threads Thread Card Reactions Panel)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=393c719dbc9a90405632db48adda2b09)
```jsx theme={null}
```
```html theme={null}
```
##### **Item (Body Threads Thread Card Reactions Panel Items)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=a1b25ddd63748f8741ced7909f8968b6)
```jsx theme={null}
```
```html theme={null}
```
##### **Emoji (Body Threads Thread Card Reactions Panel Items Item)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=652132ebf168511aeb78cdd4427e21ce)
```jsx theme={null}
```
```html theme={null}
```
##### **Reaction Pin (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=fbc11f0f154796c12665ae61fffd8377)
```jsx theme={null}
```
```html theme={null}
```
##### **Emoji (Body Threads Thread Card Reaction Pin)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e7bcbeaeebfe23471610192c17f632e5)
```jsx theme={null}
```
```html theme={null}
```
##### **Count (Body Threads Thread Card Reaction Pin)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=9e75de6b7691133c5ac530d93b2a45bc)
```jsx theme={null}
```
```html theme={null}
```
##### **Reaction Pin Tooltip (Body Threads Thread Card)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=02c7a6023b0765fa4b0f583f8084370a)
```jsx theme={null}
```
```html theme={null}
```
##### **Users (Body Threads Thread Card Reaction Pin Tooltip)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=67241b3c119150c344fdd895bfd2cc1c)
```jsx theme={null}
```
```html theme={null}
```
##### **User (Body Threads Thread Card Reaction Pin Tooltip Users)**
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=052f51c49cdb44666f2a39d48d8dc3e6)
```jsx theme={null}
```
```html theme={null}
```
##### **Avatar (Body Threads Thread Card Reaction Pin Tooltip Users User)**
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=165e75f1f7d252c31fe8ee44cf1a2e26)
```jsx theme={null}
```
```html theme={null}
```
##### **Name (Body Threads Thread Card Reaction Pin Tooltip Users User)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=15e1a1b3fe79aecd5780824a38a6b04b)
```jsx theme={null}
```
```html theme={null}
```
##### **Reaction Tool (Body Threads Thread Card)**
```jsx theme={null}
{/* Your custom element */}
```
```html theme={null}
```
##### **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.
```jsx theme={null}
```
```html theme={null}
```
##### **Assign Button (Body Threads Thread Card)**
The Assign Button component allows you to customize the assign button that appears on individual comment thread cards.
```jsx theme={null}
```
```html theme={null}
```
#### MoreReply (Body Threads)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=4af3a57b028bab4d17ca9cbc2722762d)
```jsx theme={null}
```
```html theme={null}
```
### Reply Avatars (Body)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=760d9b64e290b4949e7558ce0f5c5506)
```jsx theme={null}
```
```html theme={null}
```
#### List (Body Reply Avatars)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=19f3923f8f130ae3556a90393e16f933)
```jsx theme={null}
```
```html theme={null}
```
##### **Item (Body Reply Avatars List)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=952ef1cba5420ce7a7a1b300819334c2)
```jsx theme={null}
```
```html theme={null}
```
#### Remaining Count (Body Reply Avatars)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=08443c0dc604d59883452692285fa666)
```jsx theme={null}
```
```html theme={null}
```
### Toggle Reply (Body)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=f7ecacd5a45a9979fe936e5abc676697)
```jsx theme={null}
```
```html theme={null}
```
#### Icon (Body Toggle Reply)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=c2af8fc746c793205a00c9613d9a5e47)
```jsx theme={null}
```
```html theme={null}
```
#### Count (Body Toggle Reply)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=bea5ce45d268ecc6fe8596681effb805)
```jsx theme={null}
```
```html theme={null}
```
#### Text (Body Toggle Reply)
.png?fit=max&auto=format&n=Qt-6RgpPL1jVldHd&q=85&s=3b5fb03fe7b1f8a9ced96db0fdf30fb3)
```jsx theme={null}
```
```html theme={null}
```
### 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.
```jsx theme={null}
```
```html theme={null}
```
## Composer
```jsx theme={null}
```
```html theme={null}
```
### Avatar (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=ab1c48b29bea9af3140120c9bad8852a)
```jsx theme={null}
```
```html theme={null}
```
### Attachments (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=d0dae21e5d631a4f49cbba6a4d256ff9)
```jsx theme={null}
```
```html theme={null}
```
#### Selected (Composer Attachments)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=f431e624edbb4cbda7016bba282cd82b)
```jsx theme={null}
```
```html theme={null}
```
##### **Image (Composer Attachments Selected)**
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=24ebcd0fcc600f0f2c87315c28b8cfc6)
```jsx theme={null}
```
```html theme={null}
```
##### **Other (Composer Attachments Selected)**
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=0dbf7296cc69ba2748a74d8c32784c05)
```jsx theme={null}
```
```html theme={null}
```
#### Invalid (Composer Attachments)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e79d8ba08511d5148657eda647b47f14)
```jsx theme={null}
```
```html theme={null}
```
##### **Item (Composer Attachments Invalid)**
```jsx theme={null}
```
```html theme={null}
```
### Recordings (Composer)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=7fbe0065f1f8e1e19efad937283a2a22)
```jsx theme={null}
```
```html theme={null}
```
### Input (Composer)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=33e47748e24c55a9fcc4991bd3b57980)
```jsx theme={null}
```
```html theme={null}
```
### Format Toolbar (Composer)
The format toolbar contains text formatting buttons (bold, italic, underline, strikethrough).
```jsx theme={null}
```
```html theme={null}
```
#### Button (Composer Format Toolbar)
Individual format button with type: `bold`, `italic`, `underline`, or `strikethrough`.
```jsx theme={null}
```
```html theme={null}
```
### Action Button (Composer)
Supports types: `autocomplete`, `file`, `attachments`, `audio`, `video`, `screen`, `format`, `submit`.
```jsx theme={null}
```
```html theme={null}
```
### Assign User (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=cb91db82e189bbddbdb06832908f59e9)
```jsx theme={null}
```
```html theme={null}
```
### Visibility Dropdown (Composer)
```jsx theme={null}
```
```html theme={null}
```
#### Trigger (Composer Visibility Dropdown)
```jsx theme={null}
```
```html theme={null}
```
##### **Label (Composer Visibility Dropdown Trigger)**
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Composer Visibility Dropdown Trigger)**
```jsx theme={null}
```
```html theme={null}
```
#### Content (Composer Visibility Dropdown)
```jsx theme={null}
```
```html theme={null}
```
##### **Public (Composer Visibility Dropdown Content)**
```jsx theme={null}
```
```html theme={null}
```
##### **Private (Composer Visibility Dropdown Content)**
```jsx theme={null}
```
```html theme={null}
```
### Autocomplete Option (Composer)
For standalone autocomplete primitive components (e.g., `VeltAutocompleteOption`, `VeltAutocompleteChip`), see the [Autocomplete Primitives](/ui-customization/features/async/comments/comment-dialog/primitives#veltautocomplete) section.
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=2b265d465cff1f1e8c2eaafeb98771b4)
```jsx theme={null}
```
```html theme={null}
```
#### Icon (Composer Autocomplete Option)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=3d68c247287d354a74c1de7ad92414d7)
```jsx theme={null}
```
```html theme={null}
```
#### Name (Composer Autocomplete Option)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=2ae93a65726cdf02d89232deedb57f3f)
```jsx theme={null}
```
```html theme={null}
```
#### Description (Composer Autocomplete Option)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=e39ef81a8ddcd0fe8ac3e4fe26dbddc4)
```jsx theme={null}
```
```html theme={null}
```
#### Error Icon (Composer Autocomplete Option)
.png?fit=max&auto=format&n=D3H57YRXE5hyzieb&q=85&s=b7978fad684c077b12519c4e2e5bb315)
```jsx theme={null}
```
```html theme={null}
```
### Autocomplete Group Option (Composer)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=5f05b218b694299b5cf9cc5de32b290b)
```jsx theme={null}
```
```html theme={null}
```
## Visibility Banner
Displays below the composer to let users set per-comment visibility. The `selectedVisibility` data variable exposes the current [`CommentVisibilityOptionType`](/api-reference/sdk/models/data-models#commentvisibilityoptiontype).
```jsx theme={null}
```
```html theme={null}
```
### Icon (Visibility Banner)
```jsx theme={null}
```
```html theme={null}
```
### Text (Visibility Banner)
```jsx theme={null}
```
```html theme={null}
```
### Dropdown (Visibility Banner)
```jsx theme={null}
```
```html theme={null}
```
#### Trigger (Visibility Banner Dropdown)
```jsx theme={null}
```
```html theme={null}
```
##### **Label (Visibility Banner Dropdown Trigger)**
```jsx theme={null}
```
```html theme={null}
```
##### **AvatarList (Visibility Banner Dropdown Trigger)**
```jsx theme={null}
```
```html theme={null}
```
**Item (Visibility Banner Dropdown Trigger AvatarList)**
```jsx theme={null}
```
```html theme={null}
```
**RemainingCount (Visibility Banner Dropdown Trigger AvatarList)**
```jsx theme={null}
```
```html theme={null}
```
##### **Icon (Visibility Banner Dropdown Trigger)**
```jsx theme={null}
```
```html theme={null}
```
#### Content (Visibility Banner Dropdown)
```jsx theme={null}
```
```html theme={null}
```
##### **Item (Visibility Banner Dropdown Content)**
Accepts `type`: `'public' | 'org-users' | 'personal' | 'selected-people'`.
```jsx theme={null}
```
```html theme={null}
```
**Icon (Visibility Banner Dropdown Content Item)**
```jsx theme={null}
```
```html theme={null}
```
**Label (Visibility Banner Dropdown Content Item)**
```jsx theme={null}
```
```html theme={null}
```
##### **UserPicker (Visibility Banner Dropdown Content)**
```jsx theme={null}
```
```html theme={null}
```
**Search (Visibility Banner Dropdown Content UserPicker)**
```jsx theme={null}
```
```html theme={null}
```
**Icon (Visibility Banner Dropdown Content UserPicker Search)**
```jsx theme={null}
```
```html theme={null}
```
**Input (Visibility Banner Dropdown Content UserPicker Search)**
```jsx theme={null}
```
```html theme={null}
```
**Header (Visibility Banner Dropdown Content UserPicker)**
```jsx theme={null}
```
```html theme={null}
```
**Count (Visibility Banner Dropdown Content UserPicker Header)**
```jsx theme={null}
```
```html theme={null}
```
**UnselectAll (Visibility Banner Dropdown Content UserPicker Header)**
```jsx theme={null}
```
```html theme={null}
```
**Item (Visibility Banner Dropdown Content UserPicker)**
```jsx theme={null}
```
```html theme={null}
```
**Avatar (Visibility Banner Dropdown Content UserPicker Item)**
```jsx theme={null}
```
```html theme={null}
```
**Info (Visibility Banner Dropdown Content UserPicker Item)**
```jsx theme={null}
```
```html theme={null}
```
**Check (Visibility Banner Dropdown Content UserPicker Item)**
```jsx theme={null}
```
```html theme={null}
```
## All Comment
```jsx theme={null}
```
```html theme={null}
```
## Approve
```jsx theme={null}
```
```html theme={null}
```
## Sign In
```jsx theme={null}
```
```html theme={null}
```
## Upgrade
```jsx theme={null}
```
```html theme={null}
```
## Suggestion Action
```jsx theme={null}
```
```html theme={null}
```
### Accept (Suggestion Action)
.png?fit=max&auto=format&n=CZVTE7gW-9aTlZ5H&q=85&s=936e71735aca68925513d8e4d3e4b904)
```jsx theme={null}
```
```html theme={null}
```
### Reject (Suggestion Action)
.png?fit=max&auto=format&n=5zFLWa7VGpD2-PbL&q=85&s=efa7664a01398002cbbd2618be3664c7)
```jsx theme={null}
```
```html theme={null}
```
## 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**
```jsx theme={null}
```
##### **API methods**
```jsx theme={null}
const commentElement = client.getCommentElement();
commentElement.enableDialogShadowDOM();
commentElement.disableDialogShadowDOM();
```
##### **Example**
```
```
##### **API methods**
```jsx theme={null}
const commentElement = Velt.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**
```js theme={null}
```
##### **API methods**
```jsx theme={null}
const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
```
##### **Example**
```js theme={null}
```
##### **API methods**
```jsx theme={null}
const commentElement = Velt.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.
```jsx React / Next.js theme={null}
{/* This pre-defined variant will change the appearance of the Comment Dialog within Pin, Area, and Text comments only */}
...
{/* This pre-defined variant will change the appearance of the Comment Dialog within the Sidebar only */}
...
{/* If you dont use any variants, then customization will be applied to the Comment Dialog globally */}
...
```
```jsx Other Frameworks theme={null}
```