Buttons

Button usage

A button is used to fire any action when a user clicks or touches it, including submitting forms. Unlike links, they do not perform navigation.

primary button example
secondary button example
simple button example

 

In Cosmos Work, buttons are typically found throughout the UI in:

  • Cards
  • Forms
  • Modals

Variations

Different variations of buttons communicate different actions to the user.

Button TypePurpose
Primary For the principal call to action on the page
Secondary For secondary actions on each page
Simple For secondary or tertiary action to minimize distraction from content
Button StatePurpose
Enabled state Communicates an interactive button, a button is in this state the majority of the time.
Hover state Communicates when a user has placed a cursor above a button.
Active state Communicates when a user has clicked into the button or activated it through keyboard or voice commands.
Focus state Communicates when a user has highlighted an element, using an input method such as a keyboard or voice.
Disabled state Communicates a non-interactive action, usually shown in error states or when waiting for a user to enter in information prior to moving on with the workflow.

Language

Because buttons are used to perform actions, they should be labeled like so: Verb then Object, or only Verb. Using this labeling guidance, add a clear message of what the user should expect to happen after each click, such as "Submit form" or "Submit."

In general, "positive" actions, which move work forward, are displayed on the right (e.g., “Submit", "Save", "Next", "Accept", or "Reject"); and "negative" actions, which cancel or move work backward, are displayed on the left (e.g., "Back", or "Cancel").

Layout

The primary action, represented by the primary button, should be in the right corner of the action area. Supporting actions, represented by the secondary button styling, appear to the left of the primary action. These principles apply when using buttons in overlays, modals, page headers, assignment areas, and repeating lists.

button placement example

Simple

Simple buttons look stylistically like a link; however, they are coded as a button, so screen readers know not to take users to another page. Use buttons Simple buttons in tables as an upload action on a standard with reset text input field.

Actions Icon

In Pega, the “Actions” button is used when there are more than two actions a user can take in the action area, such as a table display. The button will reveal a dropdown that will allow the user to continue their workflow. Action buttons appear on the right side of the action area.

Specs

When buttons are in a horizontal layout, they should spaced 8px from each other.

button specs

Last updated: Aug 2019