The Buttons block allows adding one or more buttons. We use three different button styles. They are categorized by importance and can be added to a variety of different container blocks. Each button style has intention and buttons should be used sparingly.

HRS’s button styles are:

  • Filled. The primary call-to-action button variety, with a solid crimson background.
  • Outline. A less-prominent button for secondary actions.
  • Text only. A low-prominence button variant best paired with a filled or outline button.

There is also a floating action button option that will create a fixed-position button that “floats” on top of content. Use this sparingly and only for critical actions.

Make sure to review the button guidelines in the Style Guide for help creating good buttons.

How to Use

You can insert buttons using the block editor. They can be used alongside or within many other blocks.

  1. Select Add block and choose the Buttons block.
  2. The Buttons block will start with one button in the default style. You can add more buttons inline with the first by selecting the Add button icon inside the Buttons block. (You can modify their styles independently.)
  3. Enter the button text by typing directly in the button element.
  4. Select the Link icon in the block toolbar to enter the URL for the location you want the button to link to.
  5. The button defaults to the filled style. You can change the style by selecting the block and opening the Styles panel in the block settings sidebar.

Additional Options

You can modify the horizontal alignment of the Buttons block by selecting the alignment dropdown in the block options toolbar. Your options are: default, left, center, and right.

You can also toggle the button layout in either horizontal or vertical mode. Select the parent buttons block (select the button, and then select the parent block icon on the far left of the block toolbar). Then select “horizontal” or “vertical” from the variations menu in the block settings sidebar.

If it is crucial that a button opens its destination in a new tab, you can toggle that option in the Link settings panel by selecting an individual button in the Buttons block.

Floating Action Button

To enable the floating action button style:

  1. Select a Button block and then, in the block toolbar, select the parent Buttons block.
  2. In the Buttons block sidebar settings, locate the Positioning settings and toggle “Fixed position” on.
  3. Choose a position (top left, top center, etc.) using the “change content position” option in the Buttons block toolbar.

Note that the floating action button will overlap content, particularly on small screens. Test to make sure all of your content can still be accessed.

Screenshot highlighting the "Buttons" parent selector.
Select the Button block’s parent Buttons block.
Screenshot showing the Buttons block content position selector.
Change the fixed-position Buttons block position.

Examples

The filled button style is the primary button variety:

The outline style button is used for secondary intentions:

Important

The text style button is used for alternate actions and will most often be paired with either the filled or outline style buttons.

Alternate

A paired call-to-action (filled) and alternate (text) button:

Sign up
Cancel

Source

This is an HRS-created block provided as part of the HRSWP Blocks plugin.