Components

Buttons

Overview

Buttons should be used for important actions on your site and for submitting forms. There should be realitively few buttons on a page… please consider when a link is more appropriate.

Buttons generally perform the same way on mobile devices as on desktops, though their size may be increased to ~95% width in the mobile view. Pay especial attention to padding, since buttons should not extend to the edges of the user’s mobile device.

(Please see the USWDS for more on their guidelines, however, following this guide should keep you in compliancy)

Contents

Functionality
Language
Accessibility
Analytics
Buttons with input boxes
Code

Functionality

OnHover buttons displays on:hover state.
onClick/OnTap of button activates desired functionality. Functionality in determined by the context of the button (for example in a search experience or as a link item).
Disabled Button - the disabled button is used to indicate that there is actions on the page that need to happen before the button can be used. The user cannot interact with button. Once the required functionailty has happened on the page, the disabled state should be swtiched with an actionalble button.
Buttons for Submitting Forms
- onSubmit of button, for validation should occur on all required fields. Please see the forms specification for how to deal with displaying errors and error messaging.

Language

Button text should be as short as possible and lead with action words that clearly explain what will happen when the button is selected. (For example, Download, Login, Submit)

Accessibility

It is critical that buttons conform to Section 508 best practices so that they can be used successfully by everyone. So, contrast of the button and text colors should meet W3C guidelines and alt text is required for all button text. Note that these buttons, if used as designed, are 508 compliant.

Analytics Tracking

In general, all buttons should have tracking. This allows analytics for user actions on the site. SAMHSA developers need to ensure that there is some identifying feature on the button such as a click ID or click class. Analytics events are set-up by the HHS analytics team once the web page is deployed.

Buttons with input boxes

Input box with single button The button is attached to the end of the input box in large spaces – or stacked on smaller spaces. Examples of this:

example newsletter widget

Large Screen

Small Screen

Input box with multipe buttons The input box stands separately while the buttons are grouped together. This is often seen when there are buttons for both submit and cancel.

Code

HTML

  <div class="button-wrap">
  <button class="btn primary-button-1">Primary 1</button>
  <button class="btn primary-button-2">Primary 2</button>
  <button class="btn secondary-button-1">Secondary 1</button>
  <button class="btn secondary-button-2">Secondary 2</button>
  <button class="btn cancel-button">Canceled </button>
  <button class="btn disabled-button-">Disabled </button>
</div>
<div class="button-wrap teal-back" style="padding: 10px;">
  <button class="btn inverted-button-1">Inverted Button 1</button>
  <button class="btn inverted-button-2">Inverted Button 2</button>
</div>

CSS

  /* Buttons */
.btn {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  cursor: pointer;
  padding: 15px 20px;
  margin: 5px;
  @media screen and (max-width: $medium-breakpoint){
    width: 98%;
    margin: 0 0 20px 0;
  }
}

.primary-button-1 {
  background-color: $teal;
  color: $white;
  border: none;
}

.primary-button-1:hover {
  background-color: $steel;
}

.primary-button-2 {
  background-color: $midnight;
  color: $white;
  border: none;
}

.primary-button-2:hover {
  background-color: $charcoal;
}

.secondary-button-1 {
  background-color: $white;
  color: $teal;
  border: solid 1px $teal;
}

.secondary-button-1:hover {
  color: $steel;
  border: solid 1px $steel;
}

.secondary-button-2 {
  background-color: $white;
  color: $midnight;
  border: solid 1px $midnight;
}

.secondary-button-2:hover {
  color: $charcoal;
  border: solid 1px $charcoal;
}

.inverted-button-1 {
  background-color: $teal;
  color: $white;
  border: solid 1px $white;
}

.inverted-button-1:hover {
  color: $teal;
  background-color: $white;
}

.inverted-button-2 {
  background-color: $midnight;
  color: $white;
  border: solid 1px $white;
}

.inverted-button-2:hover {
  color: $charcoal;
  background-color: $white;
}

.cancel-button {
  background-color: $crimson;
  color: $white;
  border: solid 1px $white;
}

.cancel-button:hover {
  color: $white;
  background-color: $ruby;
}

.disabled-button {
  background-color: $mist;
  color: $charcoal;
  border: solid 1px $white;
}