> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Inline Comments Section Primitives

> Primitive-based components for building custom Inline Comments Section interfaces with maximum flexibility.

> [!TIP]
>
> Explore primitives interactively in our [Storybook](https://storybook.velt.dev/).

> [!NOTE]
>
> Inline Comments Section primitives can be used standalone: primitives that share the same `targetElementId` (React) or `target-element-id` (HTML) map to the same context, so standalone primitives co-locate with the root component's data.

### VeltInlineCommentsSectionCommentCount

Comment count display for the inline comments section.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionCommentCount annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-comment-count annotation-id="abc123"></velt-inline-comments-section-comment-count>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionComposerContainer

Composer container for the inline comments section.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionComposerContainer annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-composer-container annotation-id="abc123"></velt-inline-comments-section-composer-container>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionList

List container for inline comments.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionList annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-list annotation-id="abc123"></velt-inline-comments-section-list>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionPanel

Panel container for the inline comments section.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionPanel annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-panel annotation-id="abc123"></velt-inline-comments-section-panel>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionSkeleton

Loading skeleton for the inline comments section.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSkeleton annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-skeleton annotation-id="abc123"></velt-inline-comments-section-skeleton>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdown

Complete filter dropdown for the inline comments section.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdown annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown annotation-id="abc123"></velt-inline-comments-section-filter-dropdown>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdownTrigger

Trigger button for the inline comments section filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdownTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown-trigger annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-trigger>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdownTriggerArrow

Arrow indicator for the inline comments section filter dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdownTriggerArrow annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown-trigger-arrow annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-trigger-arrow>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdownTriggerName

Name display for the inline comments section filter dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdownTriggerName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown-trigger-name annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-trigger-name>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdownContent

Content container for the inline comments section filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdownContent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown-content annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdownContentList

List container within the inline comments section filter dropdown content.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdownContentList annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown-content-list annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content-list>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdownContentListItem

Individual list item within the inline comments section filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdownContentListItem annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown-content-list-item annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content-list-item>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdownContentListItemCheckbox

Checkbox within a filter dropdown list item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdownContentListItemCheckbox annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown-content-list-item-checkbox annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content-list-item-checkbox>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdownContentListItemLabel

Label within a filter dropdown list item.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdownContentListItemLabel annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown-content-list-item-label annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content-list-item-label>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionFilterDropdownContentApplyButton

Apply button within the inline comments section filter dropdown content.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionFilterDropdownContentApplyButton
>   targetElementId="my-section"
>   defaultCondition={true}
> />
> ```
>
> **Props:**
>
> | Prop | Type | Default | Description |
> | - | - | - | - |
> | `targetElementId` | `string` | — | ID of the target element whose inline comments section context the button applies to |
> | `defaultCondition` | `boolean` | — | When `false`, the component always renders regardless of internal state |

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-filter-dropdown-content-apply-button
>   target-element-id="my-section"
>   default-condition="true">
> </velt-inline-comments-section-filter-dropdown-content-apply-button>
> ```
>
> **Attributes:**
>
> | Attribute | Type | Default | Description |
> | - | - | - | - |
> | `target-element-id` | `string` | — | ID of the target element whose inline comments section context the button applies to |
> | `default-condition` | `string` | — | When `"false"`, the component always renders regardless of internal state |

***

### VeltInlineCommentsSectionSortingDropdown

Complete sorting dropdown for the inline comments section.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSortingDropdown annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionSortingDropdownTrigger

Trigger button for the inline comments section sorting dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSortingDropdownTrigger annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown-trigger annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-trigger>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionSortingDropdownTriggerIcon

Icon for the inline comments section sorting dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSortingDropdownTriggerIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown-trigger-icon annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-trigger-icon>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionSortingDropdownTriggerName

Name display for the inline comments section sorting dropdown trigger.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSortingDropdownTriggerName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown-trigger-name annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-trigger-name>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionSortingDropdownContent

Content container for the inline comments section sorting dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSortingDropdownContent annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown-content annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionSortingDropdownContentItem

Individual sort option item within the sorting dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSortingDropdownContentItem annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown-content-item annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content-item>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionSortingDropdownContentItemIcon

Icon for a sort option item in the sorting dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSortingDropdownContentItemIcon annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown-content-item-icon annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content-item-icon>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionSortingDropdownContentItemName

Name label for a sort option item in the sorting dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSortingDropdownContentItemName annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown-content-item-name annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content-item-name>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltInlineCommentsSectionSortingDropdownContentItemTick

Tick/checkmark for the active sort option item in the sorting dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltInlineCommentsSectionSortingDropdownContentItemTick annotationId="abc123" />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-inline-comments-section-sorting-dropdown-content-item-tick annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content-item-tick>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.