A component placed on the canvas looks right but does nothing. Tapping a Button navigates nowhere, opens nothing and calls nothing until you attach an action to one of its events.That is what the Actions tab is for. You pick an event the component can fire, such as On Tap, and attach one or more actions to it. The component keeps the behaviour from then on, wherever it sits in the tree.
Select a component on the canvas, open the Properties panel, and click the Actions tab. Inside it, EVENT ACTIONS → TOUCH EVENTS lists every event that component can fire.This is the component’s own tab. A page has its own separate Actions tab for lifecycle events such as On Screen Load — see Page Configuration.
A Button's Actions tab in a Mobile app project: seven touch events, none configured yet
Seven events are available on every component in a Mobile app project:
Event
Fires when
On Tap
The component is tapped or clicked once. The one you want most of the time
On Double Tap
Two taps land in quick succession
On Long Press
A press is held rather than released straight away
On Touch Start
A finger or pointer first makes contact, before any release
On Touch End
Contact ends
On Press In
The press begins — useful for a pressed-state effect
On Press Out
The press is released
A Web app project adds two more at the bottom of the same list:
Event
Fires when
On Hover In
The pointer moves onto the component
On Hover Out
The pointer moves off it
The same Actions tab in a Web app project: nine events, with On Hover In and On Hover Out at the end
Hover is not a setting you switch on. It follows the project’s app target, which is chosen once when the project is created — Mobile app (React Native / Expo) or Web app (Responsive Next.js) — and cannot be changed from the canvas afterwards.The quickest way to tell which kind of project you are in is the viewport buttons above the canvas. A Mobile app project offers Phone, Tablet and Tablet landscape. A Web app project offers Desktop, Tablet and Mobile.
Click the component on the canvas, or its row in the Component Tree. The Properties panel header should name the component you meant, such as Button.If the header still reads Page, the click did not land on the node. Select it from the Component Tree instead, where there is nothing overlapping to intercept the click.
2
Open the Actions tab
The tabs are Style, Data and Actions. Open Actions and you get EVENT ACTIONS, then the TOUCH EVENTS list.
3
Open the event you want
Click the event row, for example On Tap. The action catalog opens with a Search actions… box at the top and every action grouped by category underneath.
The action catalog opening from On Tap, with the search box and the NAVIGATION group at the top. The list scrolls — six categories sit below.
Search is the fastest way in once you know what you want. Type nav and Navigate To is the first hit.
4
Pick an action and configure it
Click an action and it attaches straight away, with its own parameters expanding inline underneath the event.Navigate To, for instance, gives you a Target Page dropdown listing every page in the project, and a Route Parameters section. With a target page that declares no parameters, that section reads No parameters declared on target page. You can add custom params below, with an + Add Parameter button.The event row now shows a 1 action badge, and the EVENT ACTIONS heading carries a count of every configured event on this component.
On Tap configured with one action. The badge on the row and the count beside EVENT ACTIONS both reflect it.
There is no Save button. Configuration saves on its own a moment after you stop editing, so give it a second before you navigate away or close the tab — an action attached and abandoned immediately may not survive the reload.
Two more controls sit under a configured event:
Add Action attaches a second action to the same event. They run in order, so a Show Toast followed by a Navigate To does both on one tap.
View as Code shows the configuration as code rather than panel fields.
To change an action later, expand the event and use Edit.
Every entry carries a one line description in the catalog itself, such as Navigate to another page under Navigate To. For what each action takes as parameters, see the Action Reference.
Marked mobile only — there is no vibration hardware to drive on the web
An unconfigured action is still an attached action. Studio marks no action parameter as required, so a Navigate To with no target page attaches happily, shows its 1 action badge, and then does nothing when tapped. If an interaction silently does nothing in Preview, check its parameters before suspecting the event.
Actions are stored on the placed node. A themed component captures styling only — background, radius, hover styling and the rest — and carries no actions with it.So applying a preset to a Button will not bring that Button’s interactions along, and two Buttons sharing a preset can behave completely differently. Wire each one up where it sits.
The panel can only tell you an action is attached, not that it does what you meant. Open Preview and perform the gesture for real — tap the button, hover the element in a Web app project — and watch what happens.This matters most for the events that are easy to attach and easy to get wrong: On Double Tap needs two quick taps to fire at all, and On Press In / On Press Out fire at opposite ends of a single press, so wiring the same action to both runs it twice.See Preview for opening it and for the device sizes it runs at.
Select a component, open Properties → Actions, click an event such as On Tap, and pick an action from the catalog. Seven touch events are available in a Mobile app project and nine in a Web app project, where hover is added. One event can carry several actions, which run in order. A few actions — Toggle Overlay, API Call, Set Variable, Navigate To — need something to exist in the project before they have anything to point at, and they fail quietly rather than loudly, so confirm the finished interaction in Preview rather than in the panel.
