Variant interactions

Variants become interactive when you connect them. On the variant board, wire a variant to another so it switches at runtime.

Each arrow is a connection you draw with the pick-whip (⚡ or L). Here Primary switches to Hover on hover and Pressed on tap.

Connect two variants (pick-whip)

1. On the variant board, click the ⚡ connect button on a variant’s label — or select the variant and press L.

2. Click the target variant. DragGo draws an arrow from source to target — your variant graph.

3. On the live page, the trigger fires and the component switches to the target variant, animated.

Trigger & transition options

Open the interaction (in the Design panel’s Interactions section) to set:

• When — Click, Hover, Scroll-in or Load.
• Mode — Go to variant (a specific one) or Cycle (advance to the next each time).
• Delay — wait before the switch fires (ms).

Inheritance

Set an interaction on the Default (Primary) variant and it applies to the whole component — every variant inherits it, so you configure once. Override on a specific variant when you need to.

Note

It all compiles to a tiny runtime that loads only when a page actually uses an interaction — so pages without them stay zero-JS.