Betty Blocks Documentation

Building your application

Pages

Button components

Learn about the Button components: characteristics, options, and common use of the Button, Open page button, Action button & Logout button.

After reading this article, you’ll know:

The use of the button components and their configuration
The important options of these button components
How to use the button component

What is the Button component?

The button component is a component that is often overlooked, but is one of the most used components, as for many use cases it is the main trigger of actions or other dynamic interactions.

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

Options

Button text allows you to set the text shown within the button, and select an icon with the icon option. Display either on the start or end of the button using the icon position.

Use the spacing option full width to set the button to the full width of its parent component, and outer space to set a margin around the button.

The Open page button has a page option to determine which page the user will navigate to, this can be set to an internal page in your application or an external page using the link to option. Using the open in option the user can navigate to a new tab or open the page in its current browser tab.

If the user is navigated to a page with a variable URL, you will need to provide an input variable to pass through to the variable page the user will land on.

The Action button triggers an action, this option allows you to navigate to the action generated by the button.

Certain actions also require input variables to properly function, to pass input data from your action button to your action, set the pass value to action option and connect it's data in the input field of your action

The disabled option turns the button functions off, the button will be greyed out and users won't be able to click the button until turned on again.

Tooltip options

Tooltips are handy to give users more information about a specific button. Turn the tooltip on with the toggle tooltip option, and change the text in the tooltip in the tooltip content section.

You can change the styling of the tooltip by changing the tooltip placement, tooltip background colour or tooltip text colour.

To view or hide the tooltip in the page builder, use the toggle tooltip visibility option.

Styling options

Buttons allow you to use the styles option. Define a specific style, save it and apply it to multiple buttons in your application.

Once applied you can make changes to the style and update all buttons that use the style simultaneously. Want to learn more about styles? check out our styling guide.

Let’s look at the use of the different buttons within the button component section.

Regular Button

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.

Dropping a button component onto a canvas

Open page button

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.

When selecting an internal detail page, you will need to provide the name of the identifier you would like to parse through. More about detail pages.

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

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

Action button

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.

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.

For example, would you like to set up a button that deletes a record of data follow our guide.

What button should I use?

Use the regular button can be used for interactions, for instance, to show/hide a dialog.
Use the open page button for linking to different pages.
Use the Action button to call an action. The action is auto-generated as soon as you drag and drop this component on the canvas. You can not select a different action. The action itself is fully customisable. (you could use a sub-action to re-direct to a different, already created, action)
Use the logout button to allow users to sign out of an application. The button is a pre-configure 'regular' button with the logout interaction and saves you time having to configure it.

Conclusion

The button is a very flexible component to trigger all kinds of functions. Use and customize it to your liking for the ideal dynamic flow in your application!