Normal

Hover & Active

Pressed

Disabled

Interactive Demo

Primary Action Button

Primary action buttons are the most actionable buttons that our interfaces will present to our users.  They have been given an orange color that contrasts with the primary indigo color included in the page header.  This orange has been designed to complement our primary indigo color. 

We should include no more than one primary action button per page or per modal panel.  They are used to call out the final step of a workflow, or to initiate a new one.  Activating a primary action button will often commit changes to the underlying state of the system. 

Examples include submitting a questionnaire, or initiating a review of a patient's test results.

Normal

Hover & Active

Pressed

Disabled

Interactive Demo

Secondary Action Button

Secondary action buttons may be used more than once per page, unlike primary action buttons.  Secondary action buttons are filled with the indigo used in the page header.  This similarity of color between secondary action buttons and other page elements gives these buttons less visual prominence than the orange primary action buttons.  Their darker fill affords secondary action buttons a strong, actionable contrast as compared with most other components used in our forms.  These other components, which are must less intensely colored, include tertiary buttons, paragraphs, headings and tables.

Examples include moving to the next step in a multi-page process or adding a new row to a table.

Tertiary Action Button (button link)

Tertiary buttons visually resemble hyperlinks.  Unlike hyperlinks, they should be positioned outside paragraphs or other large bodies of text.  As compared with other button styles, tertiary buttons introduce the least amount of visual clutter to the page.  Their more muted appearance communicates the least visual priority to the user of all our button styles, hence they are useful for presenting the user with lower priority functions that are often optional. 

Examples include canceling a workflow or printing the page.

Normal

Hover & Active

Pressed

Disabled

Interactive Demo

Hollow Button

Hollow buttons may be used more than once on a page, much like secondary action buttons.  Hollow buttons fall between the primary action and tertiary buttons in terms of visual prominence and functional priority on the page.

Examples include certain applications of icon buttons

Normal

Hover & Active

Pressed

Disabled

Interactive Demo

Buttons with Icons

Hollow buttons may be used more than once on a page, much like secondary action Button may use text, icons or a combination of both.  When used correctly, icons will make it easier for users to recognize the effect activating a button will have on the underlying state of the system.

When to use icons

Use icon buttons when there is a readily available, unambiguous icon that communicates the function of a button

When not to use icons

Do not use icons with text or functions that are not already widely associated with one another elsewhere on the web.

Many functions will not have readily available icons already associated with them.  Do not invent new icons or new icon-text pairings unless you can defend the association between icon, text and functionally as being completely unambiguous.

No button should include more than one icon.

Icon with Text

Icon Button

Spinner Buttons

Certain buttons will change state to indicate that the underlying system is in a state of processing a user's request.  They will appear as standard button until the user activates them, at which point they will switch to a button with a rotating spinner icon.  When the processing is complete, the button will return to its standard button appearance.

Notes about spinner buttons

Spinner buttons should not be interactive while in their spinning state (no hover state, no pressed state, no action on click)

Spinners should rotate clockwise

Spinner buttons should end with an ellipsis, with a space between the last word on the button and the ellipsis

The button may change width between normal and spinner states.  Other content on the page should reflow to accommodate the spinner button's altered width as necessary.

Interactive Demo

Normal

Hover

Pressed

Spinner

General Button Formatting

Our buttons follow Material Design Guidelines for most button styles.

Deviations from Material Design

The main deviation is the use of our own colors.

The contrast of the disabled style has been increased to meet accessibility contrast requirements.

Button Layout

Height

Min Width

Padding

Spacing between buttons