Last updated: September 8, 2015 at 18:52 pm
Buttons are a core interaction element, providing visual affordance for clickability and drawing the user towards taking certain actions and following a particular navigation path.
Visual example of the element:
What problem does this element or pattern solve?
Consistently formatted buttons will make clickability obvious, draw a user's eye towards itself, and compel the user to click in order to take specific action or trigger a specific interaction. A button is not a link to further information the way a text link is; a button is a doorway to the next destination on a specified pathway. As such, buttons need to stand out from page content and be welcoming to the user.
It applies to these platforms:
Desktop Web, Tablet Web, Smartphone Web
An example of this element or pattern in production:
Specifications To Consider
- All background and text color combinations for your primary, secondary and tertiary buttons. Remember to check for WCAG compliance.
- Define the behaviors for buttons: Will you have hover state color changes, etc. Again, be sure to address responsive variations for mobile devices.
- The size and shape of buttons. Are button widths fixed or are they based on the text within? Are buttons with two lines of copy permitted? Is there minimum spacing on either side of the button’s text? Will they have square or rounded corners, gradients, or shadows?
- Define all type treatments within your buttons: Font weight, text case, alignment, sizes, etc.
- Specify the minimum and recommended space surrounding buttons.
- Will your buttons contain icons as shown in the example here? If so, cover the rules for icon selection and display.
- Do not forget to define disabled button colors and behaviors and any rules for suppressing buttons.
- Cover any unique situations, such as different button treatments for advertisements, marketing message, alerts, or errors.
Note: Buttons could arguably be moved to the “Forms” area. However, many of your readers may consider buttons such a core element that they will look to this are first for button definitions.
- Button Width: Text Width + 12px on each side
- Button Height: 44px
- Button Text Font: Typefacename Bold
- Button Text Size: 14pt
- Button BG: YourCompany Blue
- Button Text: White
- Button BG On Click: YourCompany Dark Blue
- Button Text On Click: YourCompany Light Gray
- Disabled Button BG: YourCompany Light Gray
- Disabled Button Text: YourCompany Medium Gray
Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository
Information on research, user testing, or usability reports:
Apple’s iOS design guidelines recommend a size of at least 44 points x 44 points for buttons here.
This element or pattern may also be known as:
toggles, graphic links
Related elements within this Style Framework:
Owners and governance
UX or design 0wner
Business or marketing owner
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)
Comments & Questions