Skip to main content

Component events

A component event reports something that happened inside a component, by name, to the instance it is placed as. Use one when a component has several outcomes and each place that uses it reacts its own way: a dialog's confirm and cancel, the row picked in a list, a stepper's next step. Also called: custom events, outputs, emits, callbacks.

  1. Inside the component, add an Emit Event action where the outcome happens, with a Name such as confirm (→ Emitting an event).
  2. On each instance, add a Component Event with the same Name and the actions this use needs (→ Handling an event on an instance).

Component inputs carry values into a component; component events carry news out of it (→ Component inputs).

Emitting an event​

Where: select the component or a layer inside it → Interactions tab → an event → Add Action → Emit Event → Name.

  • Emit Event is offered on a component and on every layer inside it, an instance placed in it included. Elsewhere the menu shows it disabled: outside a component nothing would receive it.
  • An Emit Event that ends up outside every component — cut and pasted onto an artboard, or left on the layers of a detached instance — stays in the list, does nothing, and the Validation console flags it.
  • The Name field suggests the names the component already emits, so an outcome keeps one spelling. A component set's variants share their names.
  • Names are matched exactly: confirm and Confirm are two events.
  • An event carries no data. When the instance needs to know more, put the value in a variable that the instance's actions read (→ Variables).

Handling an event on an instance​

Where: select the instance → Interactions tab → Add event (+) → Component Event → Name → Add Action.

  • Component Event is offered only on instances, as one of the instance's own events, and it runs whichever variant the instance shows.
  • The Name field suggests the names the instance's component emits. The Validation console flags a name the component never emits.
  • A component cannot handle its own events. A Component Event on a main component, or on a layer that is no longer an instance after a detach, is flagged and never runs.
  • An instance can have several Component Events of one name; they run in list order.

How an event travels​

  • An event reaches one instance: the instance of the component whose Emit Event sent it. It does not bubble to the layers around that instance.
  • The instance's actions run at the Emit Event, before the actions after it in the component's list.
  • A component placed inside another component reports to that inner instance. To pass the event on, handle it on the inner instance and emit an event of your own, which reaches the outer component's instances. For example, a Dialog component holds an instance of a Button component that emits pressed. In the Dialog, that Button instance handles pressed with Emit Event cancel, and each Dialog instance on an artboard handles cancel.
  • When a layer leaves the preview while hovered or pressed, an Emit Event in its Pointer Leave or Pointer Up still runs, and the instance runs only its actions that change layers or variables (→ Layers removed while hovered or pressed).
  • With the debug console open, an Emit Event shows which instance received it and how many of its Component Events ran. No handler usually means the two names are spelled differently (→ Debugging).