Buttons and links

Buttons and links

Buttons were created to fire form actions. Hyperlinks were created to allow users to jump from one document to another. For example, If the screen view changes to an entirely different document, a link control should be used. If the form on the screen is simply altered, a button control should be used.

Last updated: May 2017

Buttons styles and specs

Strong

Used for the primary action on a screen. Should be used once per view.

  • Text: 14px, bold, #FFF
  • Background: #0062E6
  • Height: 30px
  • Width: 98px min-width, 14px horizontal padding
  • Corner radius: 3px
Primary button example

Standard

Used as a secondary style for navigation and actions.

  • Text: 14px, #0062E6
  • Background: #FFF
  • Border: 1px #0062E6
  • Height: 30px
  • Width: 98px min-width, 14px horizontal padding
  • Corner radius: 3px
Secondary button example

Light

Used as a tertiary style inside of a UI to indicate non-primary actions.

  • Text: 14px, #0062E6
  • Background: none
  • Height: 30px
  • Width: min-width 30px, 7px horizontal padding
Light button example

Buttons are spaced 7px from each other horizontally.

Spacing example

Last updated: May 2017

Button examples

Perform harness

The primary action (”Submit”) appears in the bottom right of the action area container and draws the user’s eye to what they need to do to complete their task.

Perform harness example

Screen flow

Screen flow example

Modal dialog

Modal dialog example

Grid actions

Grid action example

Last updated: May 2017

Links

Links always do one of two things — open a new view or move to a position on the current view.

Don’t use a link when the user is performing an action: use a “Light” button instead.

Most links in Pega applications are displayed as a traditional blue link (#0062E6). However, different formats should be used when the blue link would not have sufficent contrast to meet WCAG AA standards.

If you have many links related to a single item, the primary link should use the “Strong” style.

Links example

Last updated: May 2017

Get the files

Want to begin working with the Pega Design System? Download the vector assets below.

Download design files

Last updated: May 2017

Next: Tables and lists