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

# Tag Wireframe Variables

> Template variables exposed by the Tag feature — read them with velt-data, velt-if, and velt-class once wireframe-tag interpolation ships.

<Warning>
  **Limited support.** Tag primitives do **not** currently expose `<velt-...-wireframe>` tags, so `velt-data` / `velt-if` / `velt-class` interpolation is not yet available on this feature. Until wireframe-tag registration ships, customize Tag through the standard `[template]` input on `<velt-tag-pin>` / `<velt-tag-dialog>`, or through SCSS / CSS targeting the host elements. The primitives below are documented for completeness so you know what the runtime model looks like.
</Warning>

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

## Overview

The **Tag** feature places categorical labels on the page as placeable annotations. Once wireframe-tag registration ships, the variables described below will be available inside any `<velt-tag-...-wireframe>` tag via three forms:

| You want to…              | Use                         | Example                                           |
| ------------------------- | --------------------------- | ------------------------------------------------- |
| Display a value as text   | `<velt-data field="var" />` | `<velt-data field="componentConfig.user.name" />` |
| Hide / show conditionally | `velt-if="{var}"`           | `velt-if="{componentConfig.selected}"`            |
| Toggle a CSS class        | `velt-class="'cls': {var}"` | `velt-class="'is-{componentConfig.type}': true"`  |

<Note>
  This feature uses the **flat-config** access pattern — variables will be referenced via the explicit `componentConfig.<path>` form. The primitives below are documented for completeness; wireframe-tag interpolation is not yet supported (see warning above).
</Note>

## Subcomponents

The three primitives below make up the Tag feature. None of them currently expose a `<velt-...-wireframe>` registration — see the warning at the top of the page.

### `tags-tool`

The trigger button to start placing a tag.

* **Public element:** `<velt-tags-tool>`

| Property      | Value                                                                          |
| ------------- | ------------------------------------------------------------------------------ |
| Wireframe tag | No `<velt-...-wireframe>` registration available — see warning at top of page. |

***

### `tag-pin`

A placed tag annotation (pin icon). `<velt-tags-container>` orchestrates per-document pin instances.

* **Public element:** `<velt-tag-pin>`

| Property      | Value                                                                          |
| ------------- | ------------------------------------------------------------------------------ |
| Wireframe tag | No `<velt-...-wireframe>` registration available — see warning at top of page. |
| Container     | `<velt-tags-container>` orchestrates per-document pin instances.               |

***

### `tag-dialog`

The popover dialog opened when a tag pin is clicked.

* **Public element:** `<velt-tag-dialog>`

| Property      | Value                                                                          |
| ------------- | ------------------------------------------------------------------------------ |
| Wireframe tag | No `<velt-...-wireframe>` registration available — see warning at top of page. |

## Related

* [Template Variables](/ui-customization/template-variables) — overview of the `velt-data` / `velt-if` / `velt-class` system.