> ## 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](/ui-customization/overview) and the [Template Variables](/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`](/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`](/api-reference/sdk/models/data-models#commentannotation) | The annotation thread (id, status, comments, from, etc.). |
| [`User`](/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](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.