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

# Comment Sidebar Button Wireframe Variables

> Template variables exposed by the Comment Sidebar Button wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

<Note>
  New to wireframes? Start with [UI Customization Concepts](/docs/ui-customization/overview) and the [Template Variables](/docs/ui-customization/template-variables) overview.
</Note>

## Overview

The **Comment Sidebar Button** is the standalone toolbar button that opens the [Comment Sidebar](../comment-sidebar/comment-sidebar-wireframe-variables), 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}"` |

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

## 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`](/docs/api-reference/sdk/models/data-models#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`](/docs/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, from, etc.). |
| [`User`](/docs/api-reference/sdk/models/data-models#user) | Identified end-user object (via `annotation.from`). |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `sidebar-button` (root)

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltSidebarButtonWireframe veltClass="'active': {globalConfig.featureState.sidebarVisible}">
      <button className="my-sidebar-trigger">
        <VeltSidebarButtonWireframe.Icon />
        <VeltSidebarButtonWireframe.CommentsCount />
        <VeltSidebarButtonWireframe.UnreadIcon />
      </button>
    </VeltSidebarButtonWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

***

### `sidebar-button-icon`

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltSidebarButtonWireframe.Icon>
      <i className="my-icon icon-chat" />
    </VeltSidebarButtonWireframe.Icon>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-sidebar-button-icon-wireframe>
      <i class="my-icon icon-chat"></i>
    </velt-sidebar-button-icon-wireframe>
    ```
  </Tab>
</Tabs>

***

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltSidebarButtonWireframe.CommentsCount>
      <span className="my-count">
        <VeltData field="componentConfig.data.annotations.length" />
      </span>
    </VeltSidebarButtonWireframe.CommentsCount>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

***

### `sidebar-button-unread-icon`

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

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltSidebarButtonWireframe.UnreadIcon veltIf="{componentConfig.data.unreadCount} > 0">
      <span className="my-unread-dot">
        <VeltData field="componentConfig.data.unreadCount" />
      </span>
    </VeltSidebarButtonWireframe.UnreadIcon>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## Related

* [Comment Sidebar Button Wireframes](./wireframes) — composition reference for the wireframe tags themselves.
* [Comment Sidebar Button Primitives](./primitives) — granular components if you don't need a full wireframe.
* [Comment Sidebar Wireframe Variables](../comment-sidebar/comment-sidebar-wireframe-variables) — the sidebar that this button opens.
* [Template Variables](/docs/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.


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