> ## 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](/ui-customization/overview) and the [Template Variables](/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`](/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`](/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`](/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`](/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" />`          |
| `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](/api-reference/sdk/models/data-models):

| Type                                                                       | Description                                                      |
| -------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| [`User`](/api-reference/sdk/models/data-models#user)                       | Identified end-user object.                                      |
| [`ReactionPinType`](/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](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.