Button Element

An overview of the button component.

The button is one of the most commonly used components in website & web app development. Now, if you're like me & you're interested in buttons, you're in the right place, because in this tutorial you'll learn all about buttons.

In this tutorial you'll learn:

1. Button basics

2. Button states

3. Buttons as workflow triggers

4. Buttons as links

Button Basics

You can add a button to you website or web app from the components panel either through drag & drop, as below:

Or by (A) selecting the button component > (B) selecting the component on the canvas > (C) using the arrows to add the button before, after or as the first or last child of a page component.

The button comes with some default styles. You can see a summary of these styles by clicking on the button & then viewing the properties panel.

You can remove the default styling by pressing the bin icon next to the style you'd like to remove. Alternatively, you can restyle the button from within the styles panel.

For example, if we want to edit the background color of the button, we can (A) select the button on the page > (B) scroll to the background section on the styles panel > (C) open up the background color.

You can use the Radius option to change the shape of your button.

To edit the button text, you can double click on the text & just start typing.

Button States

If you select the button component on the page & enter into the styles panel, you will see a box where you can "create a class" for your button.

A class is a way to create reusable styles. If you give a name to your class by typing in the "Create class" box & press "Enter" you'll see a dropdown menu appear.

Clicking this dropdown, you'll see that you have the options for different states for your button.

Picking a state from this dropdown allows you to style the button as though it the button was either hovered over, pressed or focused.

For example, if we add a black background to our button on hover, we would need to:

Following these steps will mean that when you hover over your button the background color of the button will change to black.

You can apply any of the styles on hover in the same way, using the hovered class & the styles panel. The same process applies for the Pressed & Focused options.

Buttons as links

One way to give your buttons some functionality is to turn them into links. This will allow you to, for example, load new web pages when you click on the button.

To turn a button into a link, you need to put it inside a link block component. The link block is available on the components panel.

Next, add the link block to the canvas.

If you select the link block & look under the Nav panel, you can see the structure of the component.

There is a LinkBlock & inside the LinkBlock component there is a DivBlock component. To turn your button into a link, you need to add your button to the inside DivBlock.

You can now select the Link Block component either on the Nav bar or by clicking on the button & stepping back through the breadcrumb trail to the LinkBlock component.

Once you've selected the Link Block component, you can add an address to the Link Block.

Buttons as workflow triggers

Buttons can be used as a way to trigger workflows. Workflows are chains of events that can be linked together to make your website or web app more interactive. For example, you might want to display a alert or confirmation box when a button is clicked on.

To run a workflow, you need to first create a workflow. This can be done from within the Workflows tab.