UI Kit - Buttons

Button usage

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

Example of basic button types, Primary, Secondary and Tertiary

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.

Button order in a header

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”).

Last updated: May 2019

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.

Secondary button example

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
Primary button example

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

Light button example