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.
In Cosmos Work, buttons are typically found throughout the UI in:
Different variations of buttons communicate different actions to the user.
|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|
|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.|
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").
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.
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.
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.
When buttons are in a horizontal layout, they should spaced 8px from each other.Looking for legacy UI Kit content?
Last updated: Dec 2019