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 veltClass="'active': {globalConfig.featureState.sidebarVisible}">
  <button className="my-sidebar-trigger">
    <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">
    <VeltData 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 veltIf="{componentConfig.data.unreadCount} > 0">
  <span className="my-unread-dot">
    <VeltData 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>

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.

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`

​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

​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`

Related