Skip to main content

Buttons

Suggest edit Updated on February 2, 2021

Buttons are used to fire any sort of action, including submitting forms. Unlike links, they do not perform navigation.

Because buttons are used to perform actions, they should be labeled like so: [Verb][Object], or only [Verb] (e.g. "Submit form" or "Submit").

Action buttons appear on the right side of the action area. The primary action should be in the right corner of the action area. Supporting actions appear to the left of the primary action.

The same principles apply when using buttons in overlays, modals, page headers, assignment areas, and repeating lists.

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

Styles and specs

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

Standard

Used as a secondary style for navigation and actions.

Strong

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

  • Text: 14px, bold, #FFF
  • Background: Interactive items color
  • Height: 30px
  • Width: 98px min-width, 14px horizontal padding
  • Corner radius: 3px
Light

Used as a tertiary style inside of a UI to indicate non-primary actions. Typically used in the data table actions bar.

Did you find this content helpful? YesNo

0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us