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.

Standard

Used as a secondary style for navigation and actions.

• Text: 14px, Interactive items color
• Background: #FFF
• Border: 1px, Interactive items color
• Height: 30px
• Width: 98px min-width, 14px horizontal padding
• Corner radius: 3px

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

Light

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

• Text: 14px, Interactive items color
• Background: none
• Height: 30px
• Width: min-width 30px, 7px horizontal padding