Interactions and targets

Every interactive layer should answer two questions: what starts the interaction, and where does the result go?

Read the two paths separately: href names the FAQ anchor destination; action names the modal to open in the current interface. These are declared intentions, not a wired Figma prototype or proof of working navigation, modal focus or closing behavior. Open full size.

The visual introduction shows why these decisions matter to the team.

Links use href

Use [href] for navigation, an anchor, email, phone, or another address:

catalog-link [href=/catalog]
faq-link [href=#faq]
email-link [href=mailto:sales@example.com]

Use [link] only when the destination is intentionally not known yet. Do not use [href=#] as a placeholder.

Controls use action

Use [action] when the current interface changes:

filter-button [action=state:filters-open]
contact-button [action=modal:contact-modal]

Here, contact-modal is the target id: the destination layer carries [modal=contact-modal]. A known target must exist in the declared scope; an unresolved decision is recorded as an owned open question. Use [control] while the action itself is unknown, not an invented action target. The same shared button component can have different actions in different page contexts.

Fields use field

Give a field a stable data name and show its useful states:

email-field [field=email] [name=email]

The component can supply the visual pattern; the page must show the relationship to its label, form, error, and submit action.

Describe the important result

For a meaningful interaction, show or record:

• the initial state;
• the event and target;
• loading, success, empty, and error outcomes when relevant;
• focus, announcement, and history behavior when they affect the user.

Keep tags short. Record a longer state graph in the structured contract; the reactions guide explains how to describe events, outcomes, and transitions.

Check before handoff

Follow the action from its layer to its target. If you cannot find the target without asking the author, the interaction is not ready.