> ## 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 Tool Wireframe Variables

> Template variables exposed by the Comment Tool 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 Tool** wireframe exposes the variables below. Use them inside a `<velt-comment-tool-wireframe>` tag via three forms:

| You want to…              | Use                         | Example                                                 |
| ------------------------- | --------------------------- | ------------------------------------------------------- |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="componentConfig.data.locationId" />` |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{globalConfig.featureState.addCommentMode}"`  |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'is-disabled': '!{commentToolEnabled}'"`   |

<Note>
  This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.<path>` (per-instance) or `globalConfig.featureState.<name>` (cross-document) form. The wireframe also exposes a flat compatibility shape that surfaces top-level flags directly: `{commentToolEnabled}`, `{addCommentMode}`, and `{disabled}` resolve without any prefix. Tables below use the canonical full path for clarity.
</Note>

## Component Config

| Variable                                            | Type                                                                               | Description                                                                                           | Example                                                                           |
| --------------------------------------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| `globalConfig.featureState.commentToolEnabled`      | `boolean`                                                                          | Comment Tool is enabled at the workspace level.                                                       | `velt-class="'is-disabled': '!{globalConfig.featureState.commentToolEnabled}'"`   |
| `globalConfig.featureState.addCommentMode`          | `boolean`                                                                          | Add-comment mode is currently active (next click anywhere drops a new pin).                           | `velt-class="'add-mode': {globalConfig.featureState.addCommentMode}"`             |
| `globalConfig.featureState.popoverMode`             | `boolean`                                                                          | Popover mode is enabled — the comment dialog opens as a popover after a pin is dropped.               | `velt-class="'popover': {globalConfig.featureState.popoverMode}"`                 |
| `globalConfig.featureState.groupMatchedComments`    | `boolean`                                                                          | Matched comments are grouped together on the page.                                                    | `velt-class="'grouped': {globalConfig.featureState.groupMatchedComments}"`        |
| `componentConfig.data.commentAnnotationAvailable`   | `boolean`                                                                          | An annotation is currently associated with this tool instance.                                        | `velt-if="{componentConfig.data.commentAnnotationAvailable}"`                     |
| `componentConfig.data.context`                      | `object` \| `null`                                                                 | Free-form annotation context bound to this tool instance.                                             | `<velt-data field="componentConfig.data.context.foo" />`                          |
| `componentConfig.data.contextOptions`               | [`ContextOptions`](/api-reference/sdk/models/data-models#contextoptions) \| `null` | Context-options config for the next annotation.                                                       | *Used internally — read individual fields if needed.*                             |
| `componentConfig.data.folderId`                     | `string` \| `null`                                                                 | Folder this tool drops annotations into.                                                              | `<velt-data field="componentConfig.data.folderId" />`                             |
| `componentConfig.data.veltFolderId`                 | `string` \| `null`                                                                 | Velt-managed folder id (when no client folder is set).                                                | `<velt-data field="componentConfig.data.veltFolderId" />`                         |
| `componentConfig.data.clientDocumentId`             | `string` \| `null`                                                                 | Client-supplied document id.                                                                          | `<velt-data field="componentConfig.data.clientDocumentId" />`                     |
| `componentConfig.data.documentId`                   | `string` \| `null`                                                                 | Resolved document id for this instance.                                                               | `<velt-data field="componentConfig.data.documentId" />`                           |
| `componentConfig.data.locationId`                   | `string` \| `null`                                                                 | Location id this tool is scoped to.                                                                   | `<velt-data field="componentConfig.data.locationId" />`                           |
| `componentConfig.data.targetElementId`              | `string` \| `null`                                                                 | DOM target the next annotation will anchor onto.                                                      | `<velt-data field="componentConfig.data.targetElementId" />`                      |
| `componentConfig.data.sourceId`                     | `string` \| `null`                                                                 | Source-id passed through from the host application.                                                   | `<velt-data field="componentConfig.data.sourceId" />`                             |
| `componentConfig.data.disabled`                     | `boolean`                                                                          | Tool is disabled by host configuration.                                                               | `velt-class="'is-disabled': {componentConfig.data.disabled}"`                     |
| `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.shadowDom`                 | `boolean`                                                                          | Shadow-DOM rendering is enabled. Set on the host element, not from inside the wireframe.              | *Host config — set via element attribute.*                                        |
| `componentConfig.uiState.darkMode`                  | `boolean`                                                                          | Dark mode is active for this instance.                                                                | `velt-class="'dark': {componentConfig.uiState.darkMode}"`                         |
| `componentConfig.uiState.addCommentMode`            | `boolean`                                                                          | Per-instance mirror of `globalConfig.featureState.addCommentMode`.                                    | `velt-class="'active': {componentConfig.uiState.addCommentMode}"`                 |
| `componentConfig.uiState.contextInPageModeComposer` | `boolean`                                                                          | Tool is rendering inside a page-mode composer.                                                        | `velt-class="'in-composer': {componentConfig.uiState.contextInPageModeComposer}"` |
| `componentConfig.uiState.commentToolEnabled`        | `boolean`                                                                          | Per-instance mirror of `globalConfig.featureState.commentToolEnabled`.                                | `velt-class="'enabled': {componentConfig.uiState.commentToolEnabled}"`            |
| `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`                                                                          | Local shadow-DOM flag.                                                                                | *Host config — set via element attribute.*                                        |

## Subcomponents

### `comment-tool` (root)

The trigger button customers place in their toolbar. Clicking it puts the document into add-comment mode (the next click anywhere drops a new pin).

* **Public element:** `<velt-comments-tool>`
* **Wireframe tag:** `<velt-comment-tool-wireframe>` (singular — registered name differs from the public element).

| Property        | Value                                                                                   |
| --------------- | --------------------------------------------------------------------------------------- |
| Extra variables | None — root only sees common variables.                                                 |
| `shouldShow`    | Always renders. The inner button visually disables when `commentToolEnabled === false`. |

#### Classes

| Class                            | Applied when                                 |
| -------------------------------- | -------------------------------------------- |
| `velt-comment-tool`              | Always on the host wrapper.                  |
| `velt-tool--action-btn`          | Always on the inner button.                  |
| `active`                         | `addCommentMode` is true.                    |
| `velt-tool--action-btn-disabled` | `commentToolEnabled` is false.               |
| `velt-tool--action-btn-icon`     | On the inner SVG.                            |
| `velt-comment-tool--custom-btn`  | On the custom-button slot (when overridden). |

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentToolWireframe veltClass="'active': {addCommentMode}, 'disabled': '!{commentToolEnabled}'">
      <button className="my-comment-button">
        <VeltIf condition="{addCommentMode}"><span>Click anywhere…</span></VeltIf>
        <VeltIf condition="!{addCommentMode}"><span>Add comment</span></VeltIf>
      </button>
    </VeltCommentToolWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-tool-wireframe>
      <button class="my-comment-button"
              velt-class="'active': {addCommentMode}, 'disabled': '!{commentToolEnabled}'">
        <span velt-if="{addCommentMode}">Click anywhere…</span>
        <span velt-if="!{addCommentMode}">Add comment</span>
      </button>
    </velt-comment-tool-wireframe>
    ```
  </Tab>
</Tabs>

## Related

* [Comment Tool](./comment-tool) — wireframe overview and default markup for this primitive.
* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.