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

# Reactions Wireframe Variables

> Template variables exposed by the Reactions 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 **Reactions** feature renders emoji reactions on annotations and on inline page content. Variables below are available inside any `<velt-reaction-...-wireframe>`, `<velt-inline-reactions-section-...-wireframe>`, or `<velt-reactions-panel-...-wireframe>` tag via three forms:

| You want to… | Use | Example |
| - | - | - |
| Display a value as text | `<velt-data field="var" />` | `<velt-data field="componentConfig.annotation.emoji" />` |
| Hide / show conditionally | `velt-if="{var}"` | `velt-if="{componentConfig.tooltipVisible}"` |
| Toggle a CSS class | `velt-class="'cls': {var}"` | `velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}"` |

<Note>
  This feature uses the **flat-config** access pattern — variables are referenced via the explicit `componentConfig.<path>` form. Each primitive carries its own `componentConfigSignal` — the tool, the pin, and the inline-reactions section expose different variable sets (documented separately below).
</Note>

## Component Config — Reaction Tool

State on the `<velt-reaction-tool>` "+" emoji-picker button.

| Variable | Type | Description | Example |
| - | - | - | - |
| `componentConfig.variant` | `string` | Wireframe variant id. | `<velt-data field="componentConfig.variant" />` |
| `componentConfig.onClickOutside` | `Function` | Close handler — call from a click-outside region. | *Call this from your custom dismiss handler.* |
| `componentConfig.handleEmojiSelected` | `Function` | Emoji-selection handler. Call with the chosen emoji string. | *Call this from your custom emoji button click.* |
| `componentConfig.excludeReactionIds` | `string[]` | Reaction ids to hide from the picker. | `<velt-data field="componentConfig.excludeReactionIds.length" />` |

## Component Config — Reaction Pin

State on a single `<velt-reaction-pin>` (an emoji "pin" placed on the page or next to a comment).

| Variable | Type | Description | Example |
| - | - | - | - |
| `componentConfig.type` | [`ReactionPinType`](/docs/api-reference/sdk/models/data-models#reactionpintype) | Pin variant (`'comment'`, `'inline'`, etc.). | `velt-class="'pin-{componentConfig.type}': true"` |
| `componentConfig.annotationId` | `string` | The reaction-annotation id this pin represents. | `<velt-data field="componentConfig.annotationId" />` |
| `componentConfig.annotation` | `ReactionAnnotation` | Full annotation object — `from`, `emoji`, `users`, `createdAt`, etc. | `<velt-data field="componentConfig.annotation.emoji" />` |
| `componentConfig.disableTooltip` | `boolean` | Hide the hover tooltip. | `velt-if="!{componentConfig.disableTooltip}"` |
| `componentConfig.customTooltipTemplate` | `TemplateRef<any>` | Optional custom tooltip template (set programmatically via the `[template]` input — not used in wireframes). | *Internal — programmatic only.* |
| `componentConfig.isReactionSelectedByCurrentUser` | `boolean` | Local user has reacted with this emoji. | `velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}"` |
| `componentConfig.user` | [`User`](/docs/api-reference/sdk/models/data-models#user) | Currently identified end-user. | `<velt-data field="componentConfig.user.name" />` |
| `componentConfig.tooltipVisible` | `boolean` | Tooltip is currently open. | `velt-class="'tooltip-on': {componentConfig.tooltipVisible}"` |
| `componentConfig.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. | *Host config — set via element attribute.* |
| `componentConfig.variant` | `string` | Wireframe variant id. | `<velt-data field="componentConfig.variant" />` |
| `componentConfig.excludeReactionIds` | `string[]` | Reaction ids to hide. | `<velt-data field="componentConfig.excludeReactionIds.length" />` |
| `componentConfig.commentReactionAnnotationIds` | `string[]` | When this pin lives next to a comment, the full list of reactions on the comment. | `<velt-data field="componentConfig.commentReactionAnnotationIds.length" />` |

## Component Config — Inline Reactions Section

State on the `<velt-inline-reactions-section>` — an inline strip of reactions for a target element.

| Variable | Type | Description | Example |
| - | - | - | - |
| `componentConfig.targetReactionElementId` | `string` | Anchor element id. | `<velt-data field="componentConfig.targetReactionElementId" />` |
| `componentConfig.annotations` | `ReactionAnnotation[]` | Reactions placed on this target. | `<velt-data field="componentConfig.annotations.length" />` |
| `componentConfig.user` | [`User`](/docs/api-reference/sdk/models/data-models#user) \| `null` | Currently identified end-user. | `<velt-data field="componentConfig.user.name" />` |
| `componentConfig.skeletonLoading` | `boolean` | Skeleton loader is active. | `velt-if="{componentConfig.skeletonLoading}"` |
| `componentConfig.darkMode` | `boolean` | Dark mode is active. | `velt-class="'dark': {componentConfig.darkMode}"` |
| `componentConfig.variant` | `string` | Per-instance variant tag. | `<velt-data field="componentConfig.variant" />` |
| `componentConfig.shadowDom` | `boolean` | Shadow-DOM rendering is enabled. | *Host config — set via element attribute.* |
| `componentConfig.onEmojiSelected` | `(emoji: string) => void` | Emoji-picked handler. | *Call this from your custom emoji button click.* |
| `componentConfig.onReactionClick` | `(reactionAnnotation: ReactionAnnotation) => void` | Pin-click handler. | *Call this from your custom pin click.* |
| `componentConfig.reactionAnnotationsTrackByFn` | `Function` | Identity function used internally to track list items. | *Internal — used as a track-by function.* |

## Context-Specific Variables

These are only resolvable inside the nested wireframe tags noted in the **Available in** column. Each is injected by the iteration primitive that owns the tag.

| Variable | Type | Available in | Example |
| - | - | - | - |
| `user` | [`User`](/docs/api-reference/sdk/models/data-models#user) | Reaction-pin tooltip rows — `<velt-reaction-pin-tooltip-user-wireframe>` and its children | `<velt-data field="user.name" />` |
| `reaction` | [`ReactionAnnotation`](/docs/api-reference/sdk/models/data-models#reactionannotation) | `<velt-reaction-pin-tooltip-user-wireframe>` and its children | `<velt-data field="reaction.emoji" />` |
| `emoji` | `{ key: string; value: string; name?: string }` | Reactions-panel rows — `<velt-reactions-panel-item-wireframe>` and `<velt-reactions-panel-item-emoji-wireframe>` | `<velt-data field="emoji.value" />` |
| `isSelected` | `boolean` | Reactions-panel rows — `true` for the currently-selected emoji. | `velt-class="'is-selected': {isSelected}"` |

## Type Reference

Types referenced by the variables above are documented in [Data Models](/docs/api-reference/sdk/models/data-models):

| Type | Description |
| - | - |
| [`User`](/docs/api-reference/sdk/models/data-models#user) | Identified end-user object. |
| [`ReactionPinType`](/docs/api-reference/sdk/models/data-models#reactionpintype) | Pin variant discriminator (`'comment'`, `'inline'`, etc.). |
| `ReactionAnnotation` | The reaction-annotation — `from`, `emoji`, `users`, `createdAt`. |

## Subcomponents

Each subcomponent below has its own wireframe tag.

### `reaction-tool`

The "+" emoji-picker button.

* **Public element:** `<velt-reaction-tool>`
* **Wireframe tag:** `<velt-reaction-tool-wireframe>`

| Property | Value |
| - | - |
| Extra variables | See [Component Config — Reaction Tool](#component-config--reaction-tool). |

***

### `reaction-pin`

A single placed emoji reaction.

* **Public element:** `<velt-reaction-pin>`
* **Wireframe tag:** `<velt-reaction-pin-wireframe>`
* **Children:** `*-pin-emoji`, `*-pin-count`, `*-pin-tooltip-users`, `*-pin-tooltip-user`, `*-pin-tooltip-user-avatar`, `*-pin-tooltip-user-name`.

| Property | Value |
| - | - |
| Extra variables | See [Component Config — Reaction Pin](#component-config--reaction-pin). |

***

### `inline-reactions-section`

An inline strip of reactions placed next to a target element.

* **Public element:** `<velt-inline-reactions-section>`
* **Wireframe tag:** `<velt-inline-reactions-section-wireframe>`
* **Children:** `*-tool-container`, `*-panel`, `*-list`.

| Property | Value |
| - | - |
| Extra variables | See [Component Config — Inline Reactions Section](#component-config--inline-reactions-section). |

#### Children

| Wireframe tag | Notes |
| - | - |
| `<velt-inline-reactions-section-tool-container-wireframe>` | Wraps the emoji-picker tool. |
| `<velt-inline-reactions-section-panel-wireframe>` | Panel wrapper that hosts the reaction list. |
| `<velt-inline-reactions-section-list-wireframe>` | Iterates `componentConfig.annotations` and renders one reaction-pin per entry. |

## Deeply-Nested Wireframe Tags

The reaction-pin and the reactions-panel decompose further. Each tag below has its own `<velt-...-wireframe>` registration and inherits context variables from its parent.

### Reaction Pin tags

The reaction-pin's `componentConfig.annotation` carries `from` (the reactor), `emoji`, and `users` (everyone who reacted with the same emoji).

| Tag | Notes | Example |
| - | - | - |
| `<velt-reaction-pin-emoji-wireframe>` | The emoji glyph itself. | `<velt-data field="componentConfig.annotation.emoji" />` |
| `<velt-reaction-pin-count-wireframe>` | The "+N" count badge when multiple users have reacted with the same emoji. | `<velt-data field="componentConfig.annotation.users.length" />` |
| `<velt-reaction-pin-tooltip-users-wireframe>` | The hover tooltip wrapper listing all reactors. | `velt-class="'visible': {componentConfig.tooltipVisible}"` |
| `<velt-reaction-pin-tooltip-user-wireframe>` | A single reactor row inside the tooltip (iterated). | `<velt-data field="user.name" />` |
| `<velt-reaction-pin-tooltip-user-avatar-wireframe>` | Avatar inside a tooltip row. | `<velt-data field="user.photoUrl" />` |
| `<velt-reaction-pin-tooltip-user-name-wireframe>` | Name inside a tooltip row. | `<velt-data field="user.name" />` |

### Reactions Panel tags

When the user clicks the `reaction-tool` "+" button, the reactions-panel emoji picker opens. Each row exposes the per-iteration variable `emoji` (`{ key, value, name? }`) and `isSelected`.

| Tag | Notes | Example |
| - | - | - |
| `<velt-reactions-panel-items-wireframe>` | The list wrapper that iterates the filtered emojis. | (composes per-item rows) |
| `<velt-reactions-panel-item-wireframe>` | A single emoji row. | `velt-class="'is-selected': {isSelected}"` |
| `<velt-reactions-panel-item-emoji-wireframe>` | The emoji glyph itself. | `<velt-data field="emoji.value" />` |

### Reactions Panel example

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltReactionsPanelWireframe.Items.Item>
      <button className="my-emoji-row">
        <VeltReactionsPanelWireframe.Items.Item.Emoji>
          <span className="my-emoji">
            <VeltData field="emoji.value" />
          </span>
        </VeltReactionsPanelWireframe.Items.Item.Emoji>
        <VeltData field="emoji.name" />
      </button>
    </VeltReactionsPanelWireframe.Items.Item>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-reactions-panel-item-wireframe>
      <button class="my-emoji-row">
        <velt-reactions-panel-item-emoji-wireframe>
          <span class="my-emoji">
            <velt-data field="emoji.value"></velt-data>
          </span>
        </velt-reactions-panel-item-emoji-wireframe>
        <velt-data field="emoji.name"></velt-data>
      </button>
    </velt-reactions-panel-item-wireframe>
    ```
  </Tab>
</Tabs>

## Related

* [Inline Reactions](./inline-reactions) — wireframe overview for the inline-reactions section primitive.
* [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.