A button acts as a highly visible link, making it ideal for important actions like applications or registrations. You can add buttons to body text, or insert them into graphical blocks like callouts.

Button Usage

Links vs. Buttons

  • Links are typically used when navigating to another place, such as: “view all,” “browse regional networks,” “explore volunteer opportunities,” etc. 
  • Buttons are used when you are performing an action, such as: “submit,” “search,” “create new,” “upload,” etc.

Button styles

While counterintuitive, the order in which the button styles display in the block sidebar is opposite of how often you’ll be likely to use each style.

Text with arrow style

The text with arrow style, while technically a button, is intended for use as a link, as in the link examples described above. Use the text with arrow style when you are linking to another page or website and wish for the link to stand apart from the adjacent paragraph text. 

This style is used most often.

Primary style
Primary outline

The primary style should be used when you want the visitor to perform an action, such as the button examples described above. However, some specific areas of the site show this style applied to links, in order to give them greater visual emphasis. For example, this button style is part of the Call to Action block/section and some areas of the homepages.

How to use the button block

  1. In the Page Editor, navigate to the area of the page where you want the block to display.
  2. Click on the Add block icon [+] and select/search for Buttons from the menu.
  3. Choose the alignment and orientation, if applicable or if adding more than one button. (Buttons should typically be left justified as they are by default)
  4. Click on the button to add button text.
  5. In the floating editor bar, click on the link icon to add the url to the button. If you’re linking to a page or post within your site, simply type in the title and select the page or post from the list. (Internal site content must be published before you can link to it.)
  6. Adjust button style in the right column editor.
  7. Click update in the page editor to save your changes.

Pro Tip

Start button text with a verb to motivate your site visitors to take action.