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.

#Sizes

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

#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.
size	"md"	"sm" | "md" Determines the size of the component.