Open the page builder's components overview and scroll down through the list of components in the components menu, or use the search field to navigate to the button section.

As with other page components, button components are dragged and dropped onto the page's canvas. You need to have a layout component in place when you place a button on the canvas (see the GIF below).

Once you have added a layout component to a page, you can work with the different options, styles, and interactions to build the layout for the button and the interaction you want to apply.

In the following example, the button component is dragged and dropped on the canvas. Once dropped, click on the button to open the menu tabs (options, styles, interactions) for building the buttons to your requirements.

Using the Open page button component, you can trigger that a specific page is opened.

The Configure open page button (A) pop-up window is displayed as shown below.

You can choose from an internal page (B). In this case, a menu of existing pages is displayed.

You can also specify an external page (C). You can copy and paste the page details in the field provided.

If you are not yet ready to assign a page, you can select the Add without configuration button (D). You can apply the configuration details at a later stage in the options menu for the button.

You can use the preconfigured Logout button to log out users with a redirect to a specific page, for example, your application's homepage. When you drag and drop the button to the canvas, the configure logout button (A) dialog is displayed.

Press on the Select a page button to open the menu pull-down options for pages in your application. You can select a page from the list (C) as shown in the example. Then press the Select page button. The details of the redirect configuration are now shown in the Select a page field (B). You can change details if required by pressing the x button next to the page name. Press the Save button to apply the configuration details to the button.

If you now open the Interactions tab for the Logout button, you can view the interaction that has been configured. You can also edit and change the details of the interaction such as specifying a different page to which a user is redirected on logout.

To view the interactions that have been configured, select the button (A) and then select the Interactions tab (B) from the button menu.

As shown, when the button is clicked (C), the logout function (D) is triggered and the user once logged out, is redirected to the application's homepage (E).

You can build specific action buttons for use across your application. The action button component is part of the actions module.

As this type of button is added to the canvas, it automatically creates an action that serves as a trigger. The action behind this button is editable, by pressing the pencil icon, you will be redirected to the actions segment and you can choose the kind of step you need.

For example, if you choose the Delete Record function to create a step, it will delete the record that you select in the 'Pass value to action'.

To connect your data from your page to the action within your action button, you need to connect the ID of the variable you are using.

To set this up, follow our guide.