Buttons

Use buttons to attract attention to the primary call to action on a page. Not every link should be a button, only the links that the visitor is most interested in given the topic of a page. For example, on a page that explains URI’s differentiators, the call to action button might be “Apply” or “Request Information.”


Overview

Here’s an example button:

Explore

Buttons can be made prominent, so they stand out from other actions on the page:

APPLY

They can also be styled as disabled, to signal actions that are temporarily unavailable or that may become available in the near future:

Sign up starts May 4

Adding a Button

On sites using the Block Editor, buttons (Button block editor icon) can be added from the block library, under the Component Library section. Button content can be edited directly, and options can be set in the sidebar.

On sites using the older Visual Editor, buttons can be added by choosing the Button pictograph (Button WYSIWYG toolbar icon) from the editor’s toolbar. Use the editor dialogue to add content and adjust options. To edit the button later, double-click the button preview to show the editor dialogue again.


Technical Details

Buttons can be implemented with the shortcode cl-button.

[cl-button link="sample.html"]

Attributes

link

(string) (required)

The URL for the button; this will be ignored if style is set to disabled.

text

(string) (optional)

The text for the button

(default value: Explore)

tooltip

(string) (optional)

Set a tooltip

(default value: none)

style

(string) (optional) (values: prominent, disabled)

Set the style of the button

(default value: none)

class

(string) (optional)

Set custom CSS class(es)

(default value: none)