Buttons

Buttons execute any action when a user interacts with it, including submitting Forms. Unlike Links, they do not perform navigation. In Cosmos, they are typically found throughout the UI, including in Cards, Forms, and Modals.

Button variations communicate different actions or importance to the user.

  • Primary Buttons should be used only for the principal call-to-action in a region. Typically only one primary Button visible at a time.
  • Secondary Buttons are the default button style. Reserved for secondary actions on the page.
  • Simple Buttons are reserved for actions related to a specific widget, inline interaction, or Card. Simple Buttons look stylistically like a Link; however, they are tagged as a Button, so screen readers know not to take users to another page. Icon-only buttons typically use the Simple style.
  • Link Buttons are buttons in the form of Links. A Link Button also allows you to pass standard link properties such as target to open a new tab without a special command. Link Buttons are typically used in the form of a paragraph, or reviewable text.
  • Text Buttons will behave identically to Link Buttons, although they will be styled to match the Text on the screen.

If a Button's content is only an Icon without any Text, pass the icon prop. This will modify the padding on the Button. For accessibility reasons, you must also pass a label prop which should describe what the Button does. The text sent to the label prop will render in a Tooltip upon hover.

Language

Buttons are used to perform actions and should be labeled accordingly: verb, then object, or only verb. Using this labeling guidance, add a clear message about what the user should expect to happen after each interaction, such as "Submit form" or "Submit".

In general, "positive" actions, or those that 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").

Icon-only buttons still require a label for the sake of accessibility; however, these labels will only display on focus or hover in a Tooltip.

Layout

The primary action, represented by the Primary Button, is almost always in the right corner of the action area (except when there is a confirm dialog; then the primary action is to cancel, on the left). Supporting actions, represented by the Secondary Button, appear to the left of the primary action. These principles apply when using Buttons in overlays, Modals, page headers, task areas, and repeating lists.

In a horizontal layout, Buttons are spaced 8px from each other.

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.

Disabled

Buttons may be disabled to prevent a user action while some task is being completed. A disabled Button lets the user know that through certain conditions, they will eventually be able to take action.