Inline Comments Section Primitives

Explore primitives interactively in our Storybook.

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.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionCommentCount annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-comment-count annotation-id="abc123"></velt-inline-comments-section-comment-count>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionComposerContainer

Composer container for the inline comments section.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionComposerContainer annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-composer-container annotation-id="abc123"></velt-inline-comments-section-composer-container>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionList

List container for inline comments.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionList annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-list annotation-id="abc123"></velt-inline-comments-section-list>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionPanel

Panel container for the inline comments section.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionPanel annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-panel annotation-id="abc123"></velt-inline-comments-section-panel>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionSkeleton

Loading skeleton for the inline comments section.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSkeleton annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-skeleton annotation-id="abc123"></velt-inline-comments-section-skeleton>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionFilterDropdown

Complete filter dropdown for the inline comments section.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionFilterDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-filter-dropdown annotation-id="abc123"></velt-inline-comments-section-filter-dropdown>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionFilterDropdownTrigger

Trigger button for the inline comments section filter dropdown.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionFilterDropdownTrigger annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-filter-dropdown-trigger annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-trigger>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionFilterDropdownTriggerArrow

Arrow indicator for the inline comments section filter dropdown trigger.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionFilterDropdownTriggerArrow annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionFilterDropdownTriggerName

Name display for the inline comments section filter dropdown trigger.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionFilterDropdownTriggerName annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionFilterDropdownContent

Content container for the inline comments section filter dropdown.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionFilterDropdownContent annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-filter-dropdown-content annotation-id="abc123"></velt-inline-comments-section-filter-dropdown-content>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionFilterDropdownContentList

List container within the inline comments section filter dropdown content.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionFilterDropdownContentList annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionFilterDropdownContentListItem

Individual list item within the inline comments section filter dropdown.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionFilterDropdownContentListItem annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionFilterDropdownContentListItemCheckbox

Checkbox within a filter dropdown list item.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionFilterDropdownContentListItemCheckbox annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionFilterDropdownContentListItemLabel

Label within a filter dropdown list item.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionFilterDropdownContentListItemLabel annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionFilterDropdownContentApplyButton

Apply button within the inline comments section filter dropdown content.

React / Next.js
Other Frameworks

<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

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

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSortingDropdown annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-sorting-dropdown annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionSortingDropdownTrigger

Trigger button for the inline comments section sorting dropdown.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSortingDropdownTrigger annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-sorting-dropdown-trigger annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-trigger>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionSortingDropdownTriggerIcon

Icon for the inline comments section sorting dropdown trigger.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSortingDropdownTriggerIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionSortingDropdownTriggerName

Name display for the inline comments section sorting dropdown trigger.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSortingDropdownTriggerName annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionSortingDropdownContent

Content container for the inline comments section sorting dropdown.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSortingDropdownContent annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

<velt-inline-comments-section-sorting-dropdown-content annotation-id="abc123"></velt-inline-comments-section-sorting-dropdown-content>

Attributes: Common attributes only (see Common Inputs section).

VeltInlineCommentsSectionSortingDropdownContentItem

Individual sort option item within the sorting dropdown.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSortingDropdownContentItem annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionSortingDropdownContentItemIcon

Icon for a sort option item in the sorting dropdown.

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSortingDropdownContentItemIcon annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionSortingDropdownContentItemName

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

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSortingDropdownContentItemName annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

VeltInlineCommentsSectionSortingDropdownContentItemTick

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

React / Next.js
Other Frameworks

<VeltInlineCommentsSectionSortingDropdownContentItemTick annotationId="abc123" />

Props: Common inputs only (see Common Inputs section).

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

Concepts

Async Collaboration

Realtime Collaboration

Inline Comments Section Primitives

VeltInlineCommentsSectionCommentCount

VeltInlineCommentsSectionComposerContainer

VeltInlineCommentsSectionList

VeltInlineCommentsSectionPanel

VeltInlineCommentsSectionSkeleton

VeltInlineCommentsSectionFilterDropdown

VeltInlineCommentsSectionFilterDropdownTrigger

VeltInlineCommentsSectionFilterDropdownTriggerArrow

VeltInlineCommentsSectionFilterDropdownTriggerName

VeltInlineCommentsSectionFilterDropdownContent

VeltInlineCommentsSectionFilterDropdownContentList

VeltInlineCommentsSectionFilterDropdownContentListItem

VeltInlineCommentsSectionFilterDropdownContentListItemCheckbox

VeltInlineCommentsSectionFilterDropdownContentListItemLabel

VeltInlineCommentsSectionFilterDropdownContentApplyButton

VeltInlineCommentsSectionSortingDropdown

VeltInlineCommentsSectionSortingDropdownTrigger

VeltInlineCommentsSectionSortingDropdownTriggerIcon

VeltInlineCommentsSectionSortingDropdownTriggerName

VeltInlineCommentsSectionSortingDropdownContent

VeltInlineCommentsSectionSortingDropdownContentItem

VeltInlineCommentsSectionSortingDropdownContentItemIcon

VeltInlineCommentsSectionSortingDropdownContentItemName

VeltInlineCommentsSectionSortingDropdownContentItemTick

​VeltInlineCommentsSectionCommentCount

​VeltInlineCommentsSectionComposerContainer

​VeltInlineCommentsSectionList

​VeltInlineCommentsSectionPanel

​VeltInlineCommentsSectionSkeleton

​VeltInlineCommentsSectionFilterDropdown

​VeltInlineCommentsSectionFilterDropdownTrigger

​VeltInlineCommentsSectionFilterDropdownTriggerArrow

​VeltInlineCommentsSectionFilterDropdownTriggerName

​VeltInlineCommentsSectionFilterDropdownContent

​VeltInlineCommentsSectionFilterDropdownContentList

​VeltInlineCommentsSectionFilterDropdownContentListItem

​VeltInlineCommentsSectionFilterDropdownContentListItemCheckbox

​VeltInlineCommentsSectionFilterDropdownContentListItemLabel

​VeltInlineCommentsSectionFilterDropdownContentApplyButton

​VeltInlineCommentsSectionSortingDropdown

​VeltInlineCommentsSectionSortingDropdownTrigger

​VeltInlineCommentsSectionSortingDropdownTriggerIcon

​VeltInlineCommentsSectionSortingDropdownTriggerName

​VeltInlineCommentsSectionSortingDropdownContent

​VeltInlineCommentsSectionSortingDropdownContentItem

​VeltInlineCommentsSectionSortingDropdownContentItemIcon

​VeltInlineCommentsSectionSortingDropdownContentItemName

​VeltInlineCommentsSectionSortingDropdownContentItemTick

VeltInlineCommentsSectionCommentCount

VeltInlineCommentsSectionComposerContainer

VeltInlineCommentsSectionList

VeltInlineCommentsSectionPanel

VeltInlineCommentsSectionSkeleton

VeltInlineCommentsSectionFilterDropdown

VeltInlineCommentsSectionFilterDropdownTrigger

VeltInlineCommentsSectionFilterDropdownTriggerArrow

VeltInlineCommentsSectionFilterDropdownTriggerName

VeltInlineCommentsSectionFilterDropdownContent

VeltInlineCommentsSectionFilterDropdownContentList

VeltInlineCommentsSectionFilterDropdownContentListItem

VeltInlineCommentsSectionFilterDropdownContentListItemCheckbox

VeltInlineCommentsSectionFilterDropdownContentListItemLabel

VeltInlineCommentsSectionFilterDropdownContentApplyButton

VeltInlineCommentsSectionSortingDropdown

VeltInlineCommentsSectionSortingDropdownTrigger

VeltInlineCommentsSectionSortingDropdownTriggerIcon

VeltInlineCommentsSectionSortingDropdownTriggerName

VeltInlineCommentsSectionSortingDropdownContent

VeltInlineCommentsSectionSortingDropdownContentItem

VeltInlineCommentsSectionSortingDropdownContentItemIcon

VeltInlineCommentsSectionSortingDropdownContentItemName

VeltInlineCommentsSectionSortingDropdownContentItemTick