Skip to content
DragGo Docs

Variants

A variant is a saved state of a component. One component can hold many — Default, Hover, Pressed, or entirely different layouts — and DragGo lays them out side-by-side on the canvas so you design them together.

PrimaryBuy nowHoverBuy nowPressedBuy nowHoverTap
One component, three variants — the Primary is the default, and the arrows are interactions: on Hover and on Tap the component swaps state.

The variant board

Section titled “The variant board”

Open a component in edit mode and every variant shows as its own labelled artboard in a row. The Default carries a Primary badge — it’s what a fresh instance shows. The active variant is fully editable; the others are live previews — click one to focus and edit it.

Add a variant

Section titled “Add a variant”

  1. In component-edit mode, use + Add variant at the end of the board (it duplicates the Default).

  2. Or use the quick-adds + Hover and + Pressed for those common states.

  3. Edit the new variant freely — it can differ in layout and content, not just colour.

Use a variant on an instance

Section titled “Use a variant on an instance”

Select an instance and pick its Variant in the Design panel’s Component section. Each instance can show a different variant — and even a different variant per breakpoint.

Next: wire variants together with interactions.