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.
If you click the three dots next to the URL, more options will appear.
Adding More Buttons
Adding more buttons is easy, all you need to do is click the Add Button icon.
Clicking this icon will duplicate the button that’s selected when you click it.
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.
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.
You can also choose the alignment, which will align all of the buttons inside the button container.
Button Container Options
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.
The margin options use our Dimensions component. The margin applies to the button container element, which wraps the inner buttons.
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.
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.
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.
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
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.
You can apply a background gradient to your buttons as well. To learn more about adding a gradient, refer to our Gradient component article.
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.
The icon location option allows you to place the icon to the left or the right of your button 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.