Variable

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

#Usage

#Default

#With fallback

Use the fallbackValue prop to show a fallback value alongside the variable name. The fallback is displayed in a filled section to distinguish it visually.

#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 fallback background 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.
fallbackValue	—	string When provided, renders a fallback section appended to the variable name. The fallback section has a filled background to distinguish it visually.
fontWeight	"normal"	"normal" | "medium" | "semibold" Font weight.