Buttons
Search the component library

Buttons

v1.0.0-beta.4

This component defines the standard visual style for buttons.

Usage Guidelines

Every instance of a button or button styled link should come from this component. See the sections below for information about when to each each type of button.

Features

  • Single collection of all button styles
  • Multiple button types including Primary, Default, and Link
  • Small, Default, and Large button sizes
  • Guaranteed compliance with Accessibility contrast requirements

Dependencies

None

Button types

Buttons come in several different types. Each defines a normal, active/hover, and disabled state.

Primary indicates the main call to action and should only appear once per group of buttons.

Default is your basic button, it can appear multiple times in a given group.

Link indicates reduced importance of the option. (‘Cancel’ options should typically use this style, for example.)

Each of the three button types in their various states.

Button sizes

Buttons come in small, default, medium, and large sizes. Prefer the default size but feel free to use these other sizes where they would fit better with surrounding content. Medium buttons are specifically sized to pair well with inputs.

The four button sizes.

Redlines

Sizes

Small button
  • 24px tall
  • 10px horizontal padding
  • Small label font
Standard button
  • 28px tall
  • 12px horizontal padding
  • Basic label font
Medium button
  • 36px tall
  • 12px horizontal padding
  • Large label font
Large button
  • 42px tall
  • 20px horizontal padding
  • large label font
Link style buttons
  • Maintain the same spacing around the text

Corners

All sizes use a 3px border radius.

Primary buttons

Normal
  • #107ACA fill
  • #0A4D80 border
  • Inverse font color
Hover/Active
  • #0C5D99 fill
  • 0A4D80 border
  • inset shadow with 3px blur, rgba(0, 0, 0, 0.3) color
Disabled
  • #9DC0DB fill
  • No border
Focus
  • Use the browser default style

Default buttons

Normal
  • #F8F8F8 fill
  • #B3B3B3 border
  • Secondary font color
Hover/Active
  • #E6E6E6 fill
  • #B3B3B3 border
  • inset shadow with 2px blur, rgba(0, 0, 0, 0.3) color
Disabled
  • #F2F2F2 fill
  • No border
  • #A6A8AB text color
Focus
  • Use the browser default style
Normal
  • Just follow the standard link guidelines for color, underline, etc.
Hover/Active
  • Follow standard link styles
Disabled
  • #9DC0DB text color
Focus
  • Use the browser default style
Spacing
  • Maintain the same spacing as the standard buttons

Changelog

1.0.0-beta.4

  • ADDED: UXD Accessibility checklist link
  • ADDED: Focus state details in the redlines section
  • ADDED: Medium button size in anticipation of inputs

1.0.0-beta.3

  • ADDED: Illustrator UI mockup file
  • FIXED: Proper link to elements SDK
  • FIXED: Images aren’t downsized

1.0.0-beta.2

  • ADDED: Sketch UI mockup file

1.0.0-beta.1

Initial version