Variable

Variables represent dynamic or templated values, such as event properties, column references, or liquid template variables.

#Usage

#Default

#With transformations

Use the filters prop to show transformations applied to the variable. The first filter is rendered as an appended cell; any remaining filters collapse into a +N count. When filters are hidden behind that count, hovering the appended cells (the filter and count — not the variable name) reveals a tooltip listing every transformation — pass a description to show a fuller label (including any arguments).

A single filter is shown in full, so there's nothing hidden behind a +N count and no tooltip.

#Colors

By default, Variable inherits its color from the surrounding context. Pass a color prop (or wrap it in any element with a color style) to recolor it. The border and filter-cell backgrounds are derived from the resolved text color in OKLCH, so any color value works — semantic text tokens (e.g. text.primary, text.danger), palette tokens (e.g. purple.base, red.600), or raw CSS colors.

The examples below show common semantic tokens. Any other color from the theme — or any CSS color value — can be used the same way.

#Sizes

Variable inherits its font size from the surrounding context, rendering 1px smaller than the parent text. The box height and padding scale with the inherited font size. To resize, either set fontSize on the parent (recommended — the surrounding text stays in sync) or pass fontSize directly on the Variable to opt out of inheritance.

Drag the slider to change the parent's font size — both the surrounding Text and the Variable track it together.

To override the inherited size on a single Variable, pass fontSize directly:

#Font weight

Use the fontWeight prop to control the visual emphasis of the variable. Defaults to "normal".

#Combinations

#Guidelines

#When to use

• Displaying dynamic template values, such as event properties or column references.
• Showing user-defined variables in configuration UIs.

#When not to use

• For static text or code snippets, use Code instead.

#Font weight

• Use normal (default) for most cases.
• Use medium to match surrounding medium-weight text contexts.
• Use semibold to draw additional emphasis to a variable.

#Color

• Let Variable inherit from its surroundings whenever possible — that's the most consistent option.
• Reach for the semantic text tokens (text.primary, text.secondary, text.tertiary, text.placeholder, text.disabled) for emphasis or de-emphasis in denser layouts.
• Use text.success, text.warning, or text.danger to align with the semantic tone of nearby content.
• Use palette tokens (e.g. purple.base, red.600) only when no semantic token fits.

#Content

• Variable names should match the underlying data reference exactly (e.g., first_name, not First Name).

#Props

Inherits margin props.

Name	Default	Description
children	—	ReactNode The variable name to display.
filters	—	VariableFilter[] Filters/transformations applied to the variable. The first is rendered as an appended cell; any remaining ones collapse into a `+N` count. When filters are hidden behind that count, hovering the appended cells (not the variable name) reveals a tooltip listing every filter.
fontWeight	"normal"	"normal" | "medium" | "semibold" Font weight.