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

​
Overview

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe>
    <VeltCommentsSidebarV2Wireframe.Skeleton />
    <VeltCommentsSidebarV2Wireframe.Panel />
  </VeltCommentsSidebarV2Wireframe>
</VeltWireframe>

​
Skeleton

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Skeleton />
</VeltWireframe>

​
Panel

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Panel>
    <VeltCommentsSidebarV2Wireframe.Header />
    <VeltCommentsSidebarV2Wireframe.List />
    <VeltCommentsSidebarV2Wireframe.EmptyPlaceholder />
    <VeltCommentsSidebarV2Wireframe.PageModeComposer />
    <VeltCommentsSidebarV2Wireframe.FocusedThread />
  </VeltCommentsSidebarV2Wireframe.Panel>
</VeltWireframe>

​
Header (Panel)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Header>
    <VeltCommentsSidebarV2Wireframe.CloseButton />
    <VeltCommentsSidebarV2Wireframe.Search>
      <VeltCommentsSidebarV2Wireframe.Search.Icon />
      <VeltCommentsSidebarV2Wireframe.Search.Input />
    </VeltCommentsSidebarV2Wireframe.Search>
    <VeltCommentsSidebarV2Wireframe.FilterButton>
      <VeltCommentsSidebarV2Wireframe.FilterButton.AppliedIcon />
    </VeltCommentsSidebarV2Wireframe.FilterButton>
    <VeltCommentsSidebarV2Wireframe.FilterContainer />
    <VeltCommentsSidebarV2Wireframe.FullscreenButton />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown />
  </VeltCommentsSidebarV2Wireframe.Header>
</VeltWireframe>
The FilterContainer is the Main Filter bottom-sheet/menu surface; the FilterDropdown is the header dropdown that renders mini-filter, sort, quick, and combined actions content depending on its configured type. The actions dropdown replaces the removed minimal-actions dropdown.

​
CloseButton (Panel Header)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.CloseButton />
</VeltWireframe>

​
Search (Panel Header)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Search>
    <VeltCommentsSidebarV2Wireframe.Search.Icon />
    <VeltCommentsSidebarV2Wireframe.Search.Input />
  </VeltCommentsSidebarV2Wireframe.Search>
</VeltWireframe>
Icon (Panel Header Search)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Search.Icon />
</VeltWireframe>
Input (Panel Header Search)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.Search.Input />
</VeltWireframe>

​
FilterButton (Panel Header)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterButton>
    <VeltCommentsSidebarV2Wireframe.FilterButton.AppliedIcon />
  </VeltCommentsSidebarV2Wireframe.FilterButton>
</VeltWireframe>
The FilterButton opens the Main Filter container. Bind appliedCount and isFilterActive on its child wireframes to surface the active-filter state.
AppliedIcon (Panel Header FilterButton)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterButton.AppliedIcon />
</VeltWireframe>

​
FilterContainer (Panel Header)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.Title />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.GroupBy />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionList />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.ResetButton />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.ApplyButton />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.CloseButton />
  </VeltCommentsSidebarV2Wireframe.FilterContainer>
</VeltWireframe>
The Main Filter container is the bottom-sheet/menu filter surface. GroupBy renders only when grouping is enabled (groupingEnabled); bind groupByOptions for its options. Available data variables on these wireframes include value, label, count, mode, selected, group, groupingEnabled, groupByOptions, chips, searchable, placeholder, isFilterActive, and appliedCount.
Title (Panel Header FilterContainer)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.Title />
</VeltWireframe>
GroupBy (Panel Header FilterContainer)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.GroupBy />
</VeltWireframe>
SectionList (Panel Header FilterContainer)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionList>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.Section>
      <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionLabel />
      <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField>
        <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl>
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChevron />
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlValue />
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
            <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip />
          </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlSearch />
        </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl>
        <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList>
          <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption>
            <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCheckbox />
            <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionName />
            <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCount />
          </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption>
        </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList>
      </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField>
    </VeltCommentsSidebarV2Wireframe.FilterContainer.Section>
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionList>
</VeltWireframe>
SectionControl, SectionControlSearch, SectionOptionList, and SectionField accept a searchable boolean input that toggles the per-section search box. Bind dynamic data (value, label, count, selected, chips, placeholder) on the leaf wireframe, not its container — bindings update live only when bound to a signal on the leaf. Section (Panel Header FilterContainer SectionList) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.Section>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionLabel />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.Section>
</VeltWireframe>
SectionLabel (Panel Header FilterContainer Section) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionLabel />
</VeltWireframe>
SectionField (Panel Header FilterContainer Section) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField searchable={true}>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionField>
</VeltWireframe>
SectionControl (Panel Header FilterContainer SectionField) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl searchable={true}>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChevron />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlValue />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
      <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip />
    </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlSearch />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControl>
</VeltWireframe>
SectionControlChevron (Panel Header FilterContainer SectionControl) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChevron />
</VeltWireframe>
SectionControlValue (Panel Header FilterContainer SectionControl) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlValue />
</VeltWireframe>
SectionControlChipList (Panel Header FilterContainer SectionControl) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChipList>
</VeltWireframe>
SectionControlChip (Panel Header FilterContainer SectionControlChipList) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlChip />
</VeltWireframe>
SectionControlSearch (Panel Header FilterContainer SectionControl) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionControlSearch searchable={true} />
</VeltWireframe>
SectionOptionList (Panel Header FilterContainer SectionField) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList searchable={true}>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionList>
</VeltWireframe>
SectionOption (Panel Header FilterContainer SectionOptionList) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption>
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCheckbox />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionName />
    <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCount />
  </VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOption>
</VeltWireframe>
SectionOptionCheckbox (Panel Header FilterContainer SectionOption) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCheckbox />
</VeltWireframe>
SectionOptionName (Panel Header FilterContainer SectionOption) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionName />
</VeltWireframe>
SectionOptionCount (Panel Header FilterContainer SectionOption) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.SectionOptionCount />
</VeltWireframe>
ResetButton (Panel Header FilterContainer)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.ResetButton />
</VeltWireframe>
ApplyButton (Panel Header FilterContainer)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.ApplyButton />
</VeltWireframe>
CloseButton (Panel Header FilterContainer)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterContainer.CloseButton />
</VeltWireframe>

​
FullscreenButton (Panel Header)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FullscreenButton />
</VeltWireframe>

​
FilterDropdown (Panel Header)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Trigger />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content>
      <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List>
        <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item>
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Indicator />
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Label />
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Count />
        </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item>
        <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Label />
          <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content />
        </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
      </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List>
    </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content>
  </VeltCommentsSidebarV2Wireframe.FilterDropdown>
</VeltWireframe>
The FilterDropdown renders mini-filter, sort, quick, or combined actions content depending on its configured type. The CategoryLabel and per-item Count sub-slots are new in this release.
Trigger (Panel Header FilterDropdown)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Trigger />
</VeltWireframe>
Content (Panel Header FilterDropdown)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List />
  </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content>
</VeltWireframe>
List (Panel Header FilterDropdown Content) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category />
  </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List>
</VeltWireframe>
Label (Panel Header FilterDropdown Content List Category) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Label />
</VeltWireframe>
Item (Panel Header FilterDropdown Content List) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Indicator />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Label />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Count />
  </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item>
</VeltWireframe>
Indicator (Panel Header FilterDropdown Content List Item) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Indicator />
</VeltWireframe>
Label (Panel Header FilterDropdown Content List Item) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Label />
</VeltWireframe>
Count (Panel Header FilterDropdown Content List Item) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Item.Count />
</VeltWireframe>
Category (Panel Header FilterDropdown Content List) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Label />
    <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content />
  </VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category>
</VeltWireframe>
Content (Panel Header FilterDropdown Content List Category) 
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FilterDropdown.Content.List.Category.Content />
</VeltWireframe>

​
List (Panel)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.List>
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader>
      <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Label />
      <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Count />
      <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Chevron />
      <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Separator />
    </VeltCommentsSidebarV2Wireframe.ListGroupHeader>
  </VeltCommentsSidebarV2Wireframe.List>
</VeltWireframe>
The group header renders once per group when grouping is enabled. Bind group.label and group.count on the leaf wireframes to surface live group metadata.

​
ListGroupHeader (Panel List)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader>
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Label />
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Count />
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Chevron />
    <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Separator />
  </VeltCommentsSidebarV2Wireframe.ListGroupHeader>
</VeltWireframe>
Label (Panel List ListGroupHeader)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Label />
</VeltWireframe>
Count (Panel List ListGroupHeader)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Count />
</VeltWireframe>
Chevron (Panel List ListGroupHeader)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Chevron />
</VeltWireframe>
Separator (Panel List ListGroupHeader)
<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.ListGroupHeader.Separator />
</VeltWireframe>

​
EmptyPlaceholder (Panel)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.EmptyPlaceholder>
    <VeltCommentsSidebarV2Wireframe.EmptyPlaceholder.ResetFilterButton />
  </VeltCommentsSidebarV2Wireframe.EmptyPlaceholder>
</VeltWireframe>

​
ResetFilterButton (Panel EmptyPlaceholder)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.EmptyPlaceholder.ResetFilterButton />
</VeltWireframe>

​
PageModeComposer (Panel)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.PageModeComposer />
</VeltWireframe>

​
FocusedThread (Panel)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FocusedThread>
    <VeltCommentsSidebarV2Wireframe.FocusedThread.BackButton />
    <VeltCommentsSidebarV2Wireframe.FocusedThread.DialogContainer />
  </VeltCommentsSidebarV2Wireframe.FocusedThread>
</VeltWireframe>

​
BackButton (Panel FocusedThread)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FocusedThread.BackButton />
</VeltWireframe>

​
DialogContainer (Panel FocusedThread)

<VeltWireframe>
  <VeltCommentsSidebarV2Wireframe.FocusedThread.DialogContainer />
</VeltWireframe>