Action elements

Action elements are comprised of buttons and links, which require consistent and distinct usage. Watch the video to learn more.

Buttons provide users with the ability to fire an action.  Links provide users with the ability to navigate somewhere else. Links point to a thing, buttons prompt for an action.

We want to keep the usage of links and buttons consistent and distinct. It's important to have consistent usage of UI controls, especially action elements such as links and buttons.
Icons can be added to both links and buttons, with text or without. If you want the user to click on an icon to fire an action, you must wrap it in a button or link. Firing an action from an icon not wrapped in a button or link is very bad practice and fails accessibility standards.

An icon button can be styled to look like the icon only but should always have hover styling to provide proper feedback to our users.

Links should reference the page they link to, or use language that is otherwise meaningful. 

For instance, a link to a page of job opportunities should read "Job opportunities." A link with the text "See more" does not accurately explain to the user where they will be navigating.
Links to pages that reference the page title should use title capitalization. If the link navigates to a page with the title "Job Opportunities," the link needs to be capitalized as well.
Or provide a short and concise description of what the user will find on the new page, for example: "Two new job opportunities."

In both cases, the user knows how the link is related to job opportunities.

"Click here" as a link label is a bad practice because it's not clear what the user will find if they click. Additionally, assuming that a link is correctly styled and clearly clickable or tappable (in other words, it is blue text), you should never need to use the word "click"-- the user already knows they can click.

Buttons should use "action words" (verbs) to clearly explain what will happen when a user clicks the button. For instance, we should use "submit" or "save" for a form submit button. Non-action words are not clear enough.

The one exception to the rule regarding action words in a button is when a button is used to trigger a menu. In that instance, the button's text should clearly explain what the menu provides, similar to the text of a link. For instance, "Actions" should be styled distinctly from buttons that fire non-menu actions. In this example, there is no shape given to this button. It's still a button, but it looks different.

Typically, forms give their users at least two options: one is primary to the user's task, and which we call the primary action, and the other, which tends to be less utilized, is the secondary action (this is often a dismissive action, such as "cancel").

To reduce error in work, it's critical that the option for primary action be visually distinct from secondary actions.

This is a good example of a primary action button showing correct action words, and a visually distinct primary action button. 

The following examples show poor button text and good button text. The good button text uses "action words" to improve clarity and to reduce ambiguity and confusion.
If the action is a negative action (for example, it deletes something), we should put the visual emphasis on the dismissive action instead, allowing fast backing out of the delete.
Pega's guidelines for button order follow Apple and Google, with the primary action the furthest to the right, and the dismissive action all the way to the left.

This example shows multiple issues. This is from a real example found in a well-known business tool. 

The modal is entitled "Canceling," which is not clear: what is the user canceling?

Additionally, the text and buttons also add to the confusion. Is "canceling" the same thing as "rejecting," or if I click the cancel button, am I rejecting the cancellation? If that is the case, why is it the primary action? This sort of mistake will inevitably lead to confusion and incorrect results.

Avoid multiple actions on buttons, because every action on a button or a link in a Pega UI is currently a separate call to the server. See the front-end course for more details on this.

Check your knowledge with the following interaction.