Icon
The button block integrates an icon element that can be added before or after the text.
You can modify the size and spacing of the icon.
You can also add a hover effect to your button block.
Find
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
On/Off State
The Icon property allows you to define whether you want to have a visible icon inside the button block.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Select required state: On or Off.
Select Icon
Use the Icon Selector to select the desired icon.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Click Icon logo to open the Icon Library.
Choose required icon.
Size
The Icon Size property defines the size of the icon.
If no size is defined, the icon will not be visible.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Find the Icon Size property.
Input required value.
Spacing
The Icon Spacing property allows you to define the size of the margin between the text and the icon inside the button block.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Find the Spacing property.
Input required value.
Position
The Icon Position property allows you to define whether the icon should be placed before (to the left) or after (to the right).
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
Find the Position property.
Input required value.
Select the desired position (before, after).
Hover
The hover property allows you to add a hover effect to your button. Possible effects include: none, grow, shrink, pulse, push, pop, bounce in, bounce out, rotate, zoom rotate, rise, set, levitate, de-levitate, skew, wiggle vertical, wiggle horizontal, shake out.
Select a button block.
In the Primary tab of the Block Inspector, open the Icon tab.
In the Hover dropdown, select required effect.
Last updated
