Components

Buttons and links

Buttons were created to fire form actions. Hyperlinks, on the other hand, were created to give users the ability to easily jump from one document to another. In Pega 7 buttons and links can perform the same actions, however, users expect their purposes to be distinct.

Developers should think from a user’s perspective, rather than from a technical perspective, when determining which control to use. If the screen view changes to an entirely different document, a link should be used. If the form on the screen is simply altered, a button should be used.

Any text on links or buttons should be in sentence case. For example, “Add Row” is incorrect, while “Add row” is correct. Both links and buttons may occasionally appear in the form of an icon with no text.

Last updated: Mar 2017

Buttons

Pega 7 includes a variety of button styles, but the three most commonly used are standard, simple and strong.

Strong buttons are orange. They represent the most likely action a user will take on a given screen, and are only used once per screen or modal. Most often, this button is a “submit” action.

Strong button example

Simple buttons are grey. They represent secondary and tertiary actions in rule form headers, landing page headers, and modals. They should not be used in the user’s work area or in overlays.

Simple button example

Standard buttons are presented as ghost buttons (blue outline and blue text). They represent actions to be performed in the context of a form including overlays launched within a form.

Standard button example

Last updated: Mar 2017

Button order

Button order is critical to consistency across Pega products. The correct order varies depending on location and context.

For modals, overlays, wizards, and inside an action area, the primary or positive action is all the way to the right.

For modals and overlays, the cancel action is all the way to the left. In the case of action areas, the cancel action is left of the primary action.

There should never be more than one strong button on a screen, and therefore never more than one in a row. There can be more than one simple button. Filled and ghost buttons should never be used in the same row.

Various button order examples

Last updated: Mar 2017

Links

There is a much wider range of link formats set up in the default skins. Most formats have been set up to match the surrounding text (which may be light on a dark background or various type sizes).

Generally links should do one thing — open a new view.

Link examples

Last updated: Mar 2017

Next: Form elements