Add an interaction
- 1
Select the trigger
Choose the button, link, or other element that should respond to the user.
- 2
Choose a supported event
Open Events and choose an available trigger, such as On Click (Tap), hover, focus, or an input event. The available choices depend on the element.
- 3
Choose the action
Select the action and complete its fields. For a link, enter the URL. For an action that controls another component, select or enter the intended target.
- 4
Test it in preview
Use the preview to check the action. Selecting elements on the editing canvas is not the same as using the finished interface.
Common actions
| Action | What to configure |
|---|---|
| Open Link / URL | A destination URL and whether it opens in the same or a new tab. |
| Scroll to Element | The ID of the destination element. |
| Open Hygular Modal | The existing modal’s ID or available target. |
| Toggle Hygular Drawer | The existing drawer’s ID or available target. |
| Show Hygular Toast | The message and available appearance and timing options. |
| Toggle CSS Class | The class name and target element, or the trigger itself when left blank. |
Keep targets connected
Create the target component before connecting a trigger to it. Check that the target is on the page and that its ID is correct and unique. Recheck target relationships after duplicating or restructuring interactive sections.
Make interactions work without a mouse
Do not make essential actions depend only on hover. Check click or tap behavior, keyboard navigation, and focus in the finished page.