Buttons

Print
Related Pages
On This Page

Overview

Buttons are common form controls that allow users perform some action. The style and placement of buttons depends on the purpose of the form in which they are used. There are generally three types of forms:

  • Search
  • Completion (Save, Submit, Go and Cancel buttons) – includes Contact Forms, Support Requests, Quizzes, and Calculators
  • Wizard (Continue, Back, and Cancel buttons)

 Top of Page

How to Use

When to Use

Primary: This button should be used for the primary user action such as Save, Submit, or GO. Forms typically only require one primary action button. These buttons have a unique style so that this main action stands out among other possible user actions.

Textbox module not selected or not found.

Secondary: This button should be used for a secondary user action such as Back or Cancel. Forms typically use one to three secondary action buttons. Secondary action buttons have a unique style so that they do not appear as prominent as the primary action buttons.

Textbox module not selected or not found.

Disabled: This button style should be used when a button action cannot be completed. This is commonly used in forms when users must make a valid selection before continuing to the next section or step in a form and is a better approach than allowing users to submit a form and then displaying errors.

Textbox module not selected or not found.

 Top of Page

Common Labels

The following label options will meet the needs of most Forms and should be used for consistency across CDC.gov where appropriate. Button widths will adjust to accommodate the amount of text needed for the label. When choosing other text labels, use sentence case and short labels that clearly explain the action and sentence case and try to make the first word in the button a verb. For example, instead of “Help Request” label the button “Submit Ticket”.

  • Search: Search (primary) and Reset (secondary)
  • Completion: Save, Submit, GO, OK, Log In, (primary) and Cancel (secondary)
  • Wizard: Continue, Next, Previous (primary) and Cancel (secondary)

 Top of Page

Alignment & Order

When buttons appear on the same row and are left-aligned or centered (to the container or form fields), they should be prioritized from left to right with the most frequently used (primary) action appearing in the left-most position. The tab order should be the same.

When buttons appear on the same row and are right-aligned (to the container or form fields), they should be prioritized from right to left with the most frequently used (primary) action appearing in the right-most position. The tab order should be the same.

Textbox module not selected or not found.

When buttons appear stacked, they should be prioritized from top to bottom with the most frequently used (primary) action appearing in the top-most position. The tab order should be the same.

 Top of Page

Other Guidance

Wrapping: Buttons placed in the same <span> will wrap based on their width (based on the text label used). This may result in buttons displaying on different rows in Viewport 1.

Textbox module not selected or not found. Textbox module not selected or not found.

 Top of Page

References