Buttons

Button

Buttons are used to fire form actions. Example of basic button types, Primary, Secondary and Tertiary

Usage

Use a button to submit forms or to perform actions. (Use a link when navigating to a new page. See: Links)

Because buttons are used to perform actions, they should be labeled as the action they do. Name them as [Verb][Object], or only [Verb].

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. From RTL, it should be the primary action, secondary actions, and tertiary actions.

Button order in a header

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

Buttons in overlays, modals, etc

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

Last updated: Oct 2018

Tooltip usage

Tooltips should only be used on interactive items that show no display text, for instance a button with only an icon. This would be rare in the case of links. For more information, see tooltips

Last updated: Aug 2018

Button styles and specs

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

Standard

Used as a secondary style for navigation and actions.

Secondary button example

Light

Used as a tertiary style inside of a UI to indicate non-primary actions.

Light button example

Buttons are spaced 7px from each other horizontally.

Spacing example

Last updated: Jul 2018

Next: Case headers