Description
The Button blocks is for adding fancy links and buttons to your content.
Toolbar
The Button block has the following toolbar options.

Block Settings

Tag Name
Choose the blocks HTML Element tag:
- p
- span
- div
- H1
- H2
- H3
- H4
- H5
- H6
- a
- button
- figcaption
- li
Link Destination
The following options are available if the HTML Tag is set to <a>
only. The options will be removed if a <button>
Tag has been selected.
Link Field
Add a static link or dynamic tag to the button.
Once a link has been set the following target and rel attribute options are made available.
Open Link in a New Tab
This will force the link to open a new tab in the browser. The option sets the target="_blank"
attribute for the link.
Add rel=”nofollow”
Indicates that the current document’s original author or publisher does not endorse the referenced document. The option sets the rel="nofollow"
attribute for the link.
Add rel=”sponsered”
Mark links that are advertisements or paid placements (commonly called paid links). The option sets the rel="sponsored"
attribute for the link.
Icon
Inline SVG Icons can be added to Text, Headline and Button blocks. You can choose from a list of predefined Icons or add SVG HTML for custom icons.


Icon Pro
With GenerateBlocks Pro you can create your own custom icon libraries using the Asset Library feature.
Icon settings
The Icon block settings are displayed once an icon has been selected. These settings are shortcuts for settings the relevant block Styles. More options can be found in the Styles tab.

Icon Color
A shortcut option to set SVG Icons color styles.
It should be noted that the Icon Color sets the Typography > Color style. And this requires the SVG HTML to contain a relevant fill
or stroke
attribute that is set to currentColor
Icon Location
Choose whether to insert the SVG Icon:
Before the text
Button Text
After the text
Button Text
Note: the position of the icon is set within the blocks HTML.
Icon Display – show the icon by itself
Selecting this will remove the text content and just display the icon.
ARIA Label
Add an aria-label
attribute to the blocks HTML to provide an accessible name for the button. This is must do requirement when creating icon only buttons.
Styles for Icons
Adding Icons to Text, Button and Headline blocks inserts the SVG directly into the blocks HTML. This is one of the very few instances where the Icon is not directly selectable within the editor. That means any styling has be applied via the Text, Headline or Button block.
Starting with the defaults lets take a look at some of the commonly required styling options.
Default styles
By default the icon will look similar to this:
Button Text
The main style are the alignment and spacing of the icon and the text. This layout is achieved using Flexbox, which can be seen in the Styles > Layout panel and are as follows:
display = inline flex
Align Items = Center
Column Gap = 0.5em
Position the Icon above the text
Button Text
To position the icon above the button you can set:
display = flex
Flex Direction = Column
Row Gap = 0.25rem
Align Items = start (left )
Styling the Icon
For common styling requirements you should use the Block Settings > Icon settings see above.
For greater customization of the icons- chooise the Icon Selector
in the styles tab.

Below we will cover some requirements, and you can read here for more information on Icons.
Setting the Icon Size (basic)
By default the Icon will inherit its size from the Text, Headline or Button blocks Typography > Font Size.
To change the size independently you can choose the Icon selector.
Set the Font Size
Setting the Icon Size (advanced)
In some instances the size may need finer control:
Set the Width
and Height
property values
Setting the Icon Color
Some SVG Icons may have colors for their Fill and their Stroke. If those need setting you can use:
set fill
and stroke
colors