Buttons Overview

Our Buttons block allows you to add one or multiple buttons to your page.

Adding the URL

The most important part of a button is its destination. You can add the URL in the URL field which is always visible when the button is selected.

Add a button URL

URL Options

If you click the three dots next to the URL, more options will appear.

URL options

Adding More Buttons

Adding more buttons is easy, all you need to do is click the Add Button icon.

Add new button

Clicking this icon will duplicate the button that’s selected when you click it.

Multiple buttons

Now we have multiple buttons. By default, there is no space between them (as you can see). To add spacing, you can use the Margin options in the Spacing panel for each button.

Button Container

When you add a new Buttons block, two blocks are actually added to the page. The button container, and the button itself.

To navigate to the button container, use the available Block Navigation.

Button Container Block Controls

The Button Container block has a few block controls.

The first one allows you to add a new button to the container. This button will duplicate the last button in the container.

Add new button

You can also choose the alignment, which will align all of the buttons inside the button container.

Button alignment

Button Container Options

Button Container options

Alignment

The alignment options are the same options you can find in the block controls. The alignment will align all of the buttons inside the container.

Margin

The margin options use our Dimensions component. The margin applies to the button container element, which wraps the inner buttons.

Stack Vertically

The stack vertically option will stack the buttons on top of each other. This can be especially useful on mobile.

Fill Horizontal Space

The Fill Horizontal Space option will force the buttons to fill the entire row. If you have one button, it will be 100% wide, if you have two buttons, they will be 50% wide and so on.

Button Options

Each individual button has a bunch of options you can use to fully customize them.

You might recognize a lot of these components from our other blocks.

Typography

Buttons have the same typography options as our Headline and Container blocks. You can learn more about the available options by referring to our Typography component article.

Spacing

You can also adjust the spacing of your button block. Again, these options can be found in our other blocks as well. To learn more, check out the Dimensions component article.

  • Padding – the space inside the button
  • Margin – the space outside the button
  • Border Size – the size of the border around the button
  • Border Radius – the roundness of the button

Colors

Of course, you have full control over your button colors using our Color Picker component.

These color options are available on hover as well as the standard view of the button.

Background Gradient

You can apply a background gradient to your buttons as well. To learn more about adding a gradient, refer to our Gradient component article.

Icon

Adding an icon to your button is super easy using the Icon panel.

To learn how to choose an icon, refer to our Icon Picker component article.

Icon Location

The icon location option allows you to place the icon to the left or the right of your button text.

Remove Text

If you want to display an icon only, you can check the Remove Text option.

If you remove the text, an ARIA Label option will appear.

This option adds an aria-label attribute to the button, which will describe what the button does to people using screen readers.