Button component reference

Add buttons to the user interface for your application to trigger events such as login or to show or shield specific information.

Updated over a week ago

As you design and build the page(s) for your application, you can apply components such as buttons.

Button components in the page builder

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.

Components and partials tabs

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).

Button component

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.

Button component

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.

Dropping a button component onto a canvas

Open page button component

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.

Open page button component

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

Open page button configuration

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.

Logout button component

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.

Logout button

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.

Logout button configuration

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).

Button component interactions

Action button

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

Action button on the canvas

Action button icon

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'.

Action button options

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.

Action button variables

Did this answer your question?