Comment Sidebar Button Wireframe Variables

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

Overview

The Comment Sidebar Button is the standalone toolbar button that opens the Comment Sidebar, with built-in unread-count and total-count indicators. Variables below are available inside any <velt-sidebar-button-...-wireframe> tag via three forms:

You want to…	Use	Example
Display a value as text	`<velt-data field="var" />`	`<velt-data field="componentConfig.data.unreadCount" />`
Hide / show conditionally	`velt-if="{var}"`	`velt-if="{componentConfig.data.unreadCount} > 0"`
Toggle a CSS class	`velt-class="'cls': {var}"`	`velt-class="'sidebar-open': {globalConfig.featureState.sidebarVisible}"`

This feature uses the flat-config access pattern — variables span three namespaces: globalConfig.featureState.* (cross-document), componentConfig.<data|uiState>.* (per-instance), and parentLocalUIState.* (per-render). Always use the explicit path form.

Component Config

Global Feature State

Variable	Type	Description	Example
`globalConfig.featureState.sidebarVisible`	`boolean`	Linked sidebar is currently open. Drives the active state on the button.	`velt-class="'sidebar-open': {globalConfig.featureState.sidebarVisible}"`

Per-instance Data

Variable	Type	Description	Example
`componentConfig.data.annotations`	`CommentAnnotation[]` \| `undefined`	All annotations in scope for this button. Length drives the total-count badge.	`<velt-data field="componentConfig.data.annotations.length" />`
`componentConfig.data.unreadCount`	`number` \| `null`	Unread-count badge value.	`<velt-data field="componentConfig.data.unreadCount" />`

Per-instance UI State

Variable	Type	Description	Example
`componentConfig.uiState.showDefaultBtn`	`boolean`	Default built-in button should render. Set to `false` when a wireframe overrides the button entirely.	`velt-if="{componentConfig.uiState.showDefaultBtn}"`
`componentConfig.uiState.floatingMode`	`boolean`	Button is rendering in floating mode.	`velt-class="'floating': {componentConfig.uiState.floatingMode}"`
`componentConfig.uiState.floatingModeSidebarVisible`	`boolean`	Floating-mode sidebar is currently open.	`velt-class="'floating-open': {componentConfig.uiState.floatingModeSidebarVisible}"`
`componentConfig.uiState.darkMode`	`boolean`	Dark mode is active for this instance.	`velt-class="'dark': {componentConfig.uiState.darkMode}"`
`componentConfig.uiState.commentCountType`	`'total'` \| `'unread'`	Which count drives the badge.	`velt-class="'count-{componentConfig.uiState.commentCountType}': true"`

Per-instance Local UI State

Variable	Type	Description	Example
`parentLocalUIState.darkMode`	`boolean`	Local dark-mode flag (host attribute).	`velt-class="'dark': {parentLocalUIState.darkMode}"`
`parentLocalUIState.variant`	`string`	Per-instance variant tag set on the host element.	`<velt-data field="parentLocalUIState.variant" />`
`parentLocalUIState.shadowDom`	`boolean`	Shadow-DOM rendering is enabled.	Host config — set via element attribute.

Type Reference

Types referenced by the variables above:

Type	Description
`CommentAnnotation`	The annotation thread (id, status, comments, from, etc.).
`User`	Identified end-user object (via `annotation.from`).

Subcomponents

Each subcomponent below has its own wireframe tag. The trigger button customers place in their toolbar.

Public element: <velt-sidebar-button>
Wireframe tag: <velt-sidebar-button-wireframe>
Children: sidebar-button-icon, sidebar-button-comments-count, sidebar-button-unread-icon.

Property	Value
Extra variables	None — root only sees common variables.
Host class	`velt-sidebar-button` (always). `velt-sidebar-button--visible` / `velt-sidebar-tool-open` when `globalConfig.featureState.sidebarVisible` is true. `dark` when `darkMode` is true. `velt-tool--action-btn` (always on the inner button). `velt-sidebar-button--icon-wrapper` (around the icon).

React / Next.js
Other Frameworks

<VeltSidebarButtonWireframe>
  <button
    className="my-sidebar-trigger"
    velt-class="'active': {globalConfig.featureState.sidebarVisible}">
    <VeltSidebarButtonWireframe.Icon />
    <VeltSidebarButtonWireframe.CommentsCount />
    <VeltSidebarButtonWireframe.UnreadIcon />
  </button>
</VeltSidebarButtonWireframe>

<velt-sidebar-button-wireframe>
  <button class="my-sidebar-trigger"
          velt-class="'active': {globalConfig.featureState.sidebarVisible}">
    <velt-sidebar-button-icon-wireframe></velt-sidebar-button-icon-wireframe>
    <velt-sidebar-button-comments-count-wireframe></velt-sidebar-button-comments-count-wireframe>
    <velt-sidebar-button-unread-icon-wireframe></velt-sidebar-button-unread-icon-wireframe>
  </button>
</velt-sidebar-button-wireframe>

The default chat icon.

Public element: <velt-sidebar-button-icon>
Wireframe tag: <velt-sidebar-button-icon-wireframe>

Property	Value
Extra variables	None.
Host class	`velt-tool--action-btn-icon` (on the inner SVG).

React / Next.js
Other Frameworks

<VeltSidebarButtonWireframe.Icon>
  <i className="my-icon icon-chat" />
</VeltSidebarButtonWireframe.Icon>

<velt-sidebar-button-icon-wireframe>
  <i class="my-icon icon-chat"></i>
</velt-sidebar-button-icon-wireframe>

`sidebar-button-comments-count`

The badge showing total or unread comment count.

Public element: <velt-sidebar-button-comments-count>
Wireframe tag: <velt-sidebar-button-comments-count-wireframe>

Property	Value
Extra variables	None.
Host class	`action-btn-label velt-sidebar-button--comments-count` (always on the host span).
`shouldShow`	Default branches on `componentConfig.uiState.commentCountType` — `'total'` shows `componentConfig.data.annotations.length`; `'unread'` shows `componentConfig.data.unreadCount`.

React / Next.js
Other Frameworks

<VeltSidebarButtonWireframe.CommentsCount>
  <span className="my-count">
    <velt-data field="componentConfig.data.annotations.length" />
  </span>
</VeltSidebarButtonWireframe.CommentsCount>

<velt-sidebar-button-comments-count-wireframe>
  <span class="my-count">
    <velt-data field="componentConfig.data.annotations.length"></velt-data>
  </span>
</velt-sidebar-button-comments-count-wireframe>

The “unread dot” overlay shown when there are unread comments.

Public element: <velt-sidebar-button-unread-icon>
Wireframe tag: <velt-sidebar-button-unread-icon-wireframe>

Property	Value
Extra variables	None.
Host class	`velt-sidebar-button--unread-icon` (on the inner SVG).
`shouldShow`	`componentConfig.data.unreadCount > 0`

React / Next.js
Other Frameworks

<VeltSidebarButtonWireframe.UnreadIcon>
  <span
    className="my-unread-dot"
    velt-if="{componentConfig.data.unreadCount} > 0">
    <velt-data field="componentConfig.data.unreadCount" />
  </span>
</VeltSidebarButtonWireframe.UnreadIcon>

<velt-sidebar-button-unread-icon-wireframe>
  <span class="my-unread-dot" velt-if="{componentConfig.data.unreadCount} > 0">
    <velt-data field="componentConfig.data.unreadCount"></velt-data>
  </span>
</velt-sidebar-button-unread-icon-wireframe>

Putting it together

A typical Comment Sidebar Button that lights up while the sidebar is open, swaps between total / unread count modes, and shows an unread dot when relevant:

React / Next.js
Other Frameworks

<VeltSidebarButtonWireframe>
  <button
    className="my-trigger"
    velt-class="'is-active': {globalConfig.featureState.sidebarVisible}">
    <VeltSidebarButtonWireframe.Icon />
    <VeltSidebarButtonWireframe.CommentsCount>
      <span velt-if="{componentConfig.uiState.commentCountType} === 'total'">
        <velt-data field="componentConfig.data.annotations.length" />
      </span>
      <span velt-if="{componentConfig.uiState.commentCountType} === 'unread'">
        <velt-data field="componentConfig.data.unreadCount" />
      </span>
    </VeltSidebarButtonWireframe.CommentsCount>
    <VeltSidebarButtonWireframe.UnreadIcon
      velt-if="{componentConfig.data.unreadCount} > 0" />
  </button>
</VeltSidebarButtonWireframe>

<velt-sidebar-button-wireframe>
  <button class="my-trigger"
          velt-class="'is-active': {globalConfig.featureState.sidebarVisible}">
    <velt-sidebar-button-icon-wireframe></velt-sidebar-button-icon-wireframe>
    <velt-sidebar-button-comments-count-wireframe>
      <span velt-if="{componentConfig.uiState.commentCountType} === 'total'">
        <velt-data field="componentConfig.data.annotations.length"></velt-data>
      </span>
      <span velt-if="{componentConfig.uiState.commentCountType} === 'unread'">
        <velt-data field="componentConfig.data.unreadCount"></velt-data>
      </span>
    </velt-sidebar-button-comments-count-wireframe>
    <velt-sidebar-button-unread-icon-wireframe
      velt-if="{componentConfig.data.unreadCount} > 0"></velt-sidebar-button-unread-icon-wireframe>
  </button>
</velt-sidebar-button-wireframe>

Comment Sidebar Button Wireframes — composition reference for the wireframe tags themselves.
Comment Sidebar Button Primitives — granular components if you don’t need a full wireframe.
Comment Sidebar Wireframe Variables — the sidebar that this button opens.
Template Variables — overview of the velt-data / velt-if / velt-class system.

Concepts

Async Collaboration

Realtime Collaboration

Comment Sidebar Button Wireframe Variables

Overview

Component Config

Global Feature State

Per-instance Data

Per-instance UI State

Per-instance Local UI State

Type Reference

Subcomponents

`sidebar-button` (root)

`sidebar-button-icon`

`sidebar-button-comments-count`

`sidebar-button-unread-icon`

Putting it together

Concepts

Async Collaboration

Realtime Collaboration

Documentation Index

​Overview

​Component Config

​Global Feature State

​Per-instance Data

​Per-instance UI State

​Per-instance Local UI State

​Type Reference

​Subcomponents

​sidebar-button (root)

​sidebar-button-icon

​sidebar-button-comments-count

​sidebar-button-unread-icon

​Putting it together

​Related

Overview

Component Config

Global Feature State

Per-instance Data

Per-instance UI State

Per-instance Local UI State

Type Reference

Subcomponents

`sidebar-button` (root)

`sidebar-button-icon`

`sidebar-button-comments-count`

`sidebar-button-unread-icon`

Putting it together

Related