Button Examples
These are the different styles available for buttons.
Button with the “small” size selected.
Button with the “large” size selected.
Button with the “full” width selected.
Adding a Button Block
Method 1 – Use a forward slash (/) and then type out “Button”. The button block should show up.
Method 2 – After selecting the editor, the user should see a + icon. Selecting it will show a list of the most common blocks used. If the button block is not there, use the search feature to find it.
Button Block Features
Toolbar
- Aligning Text – Allows user to align text left, center, or right.
- Italics – Make the text italics.
- Linking Text – Highlight the text you would like to link. Then select the link button (looks like a link). Enter the URL of the page or website where the link will navigate to and press enter.
Side Panels
After selecting the entire list block, the user will see the following options on the right hand panels:
- General – Here users can add the text of the button along with the URL of the link where users will navigate to.
- Style Options – Displays the various styles of buttons available.
- Display Options – Gives user the ability to select the size of the button along with the option of adding an icon before or after the button.
- Space Settings – Users can add margin to buttons. This is usually done to add more spacing around the outside of buttons so they are not too close to other elements.
- Advanced – Allows users to add anchor tags to the text, schedule the block, position the block, and hide the block on a specific breakpoint. In this panel, users can also use the aria label field to make the button accessible.
- Note: If you use “learn more” or “more information” or something similar for your link text, make sure to add a more descriptive link title in the Button Aria-Label field under the advanced option.
- Block Scheduling (if enabled) – Allows block to be scheduled. This causes the block to be published or unpublished depending on the date selected.