Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      


Updated on July 27, 2022

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.


Used as a secondary style for navigation and actions.


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

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

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us