Active Style

Active Style is a system for conditionally overriding a component’s appearance. When a component enters the “active” state, a second set of style and prop overrides is applied on top of the defaults.

How It Works

Any component can define two sets of properties:

• Default style — The base appearance, always applied.
• Active style (activeStyle) — Overrides applied only when the component is in the active state.

Insert image: The property panel showing the Default/Active toggle switch at the top, with “Active” selected, revealing the active style override fields

When active, activeStyle values are merged on top of the default style. Only the properties you define in the active style are overridden — everything else stays at its default value.

Active state also supports:

• Active props (activeProps) — Override component props (e.g., different text content).
• Active click actions (activeClickActions) — Override click behavior when active.

Inheritance

Active state flows downward through the component tree. When a parent enters the active state, all of its children also enter the active state. Every child can define its own activeStyle that activates when any ancestor is active.

This is what makes Active Style powerful for complex selection patterns — you define active overrides at every level of a component tree, and they all activate together.

Active Style with Options

The most common use case. Inside a Single Select or Multi Select, each option component is automatically wrapped in an active style context. When an option is selected, it and all its children enter the active state.

No manual condition needed — the select component handles this automatically.

Example: Selection Card

Build an option with this structure:

Option
├── Stack (the card container)
│   ├── Icon
│   └── Text

Configure styles:

When the user selects this option, the border turns green, the background gets a subtle green tint, and the icon and text change color — all in one coordinated transition.

Insert image: Side-by-side comparison of a selection card in default state (gray border, gray icon and text) and active/selected state (green border, green tint background, green icon and text)

Active Props

Override props in the active state. A button inside an option:

The text changes automatically when the parent option is selected.

Active Click Actions

Override click actions in the active state. For example, an option that navigates to a different page when deselected vs. selected.

Custom Active Conditions on Stacks

Any stack component can define an activeStyleCondition — a variable condition that triggers the active state independently of the option system.

This uses the same condition format as routing conditions and dynamic property conditions: a condition group with AND/OR logic comparing variable values.

Example: Highlight Selected Pricing Card

You have three pricing cards as stacks, each bound to a product. Set an activeStyleCondition on each stack:

• Monthly card: products.selected.name equals monthly
• Yearly card: products.selected.name equals yearly

When the user selects a product, the corresponding card enters the active state and all its children inherit the active styling.

Merge Priority

When multiple systems contribute to a component’s final appearance, they merge in this order:

1. Static style — Base properties from the property panel.
2. Active Style — Overrides from activeStyle when in the active state.
3. Dynamic Properties — Conditional overrides from the dynamic property system.

Dynamic Properties always win. If a property has both an active style override and a dynamic property override, the dynamic value takes precedence.

Final value = Static ← Active Style ← Dynamic Properties

When to Use Active Style vs. Dynamic Properties

Use Active Style for binary on/off states shared across a component tree (option selection, coordinated parent-child highlights). Use Dynamic Properties for multi-value conditional overrides or per-property logic with arbitrary conditions.