Buttons
Search the component library

Buttons

v1.0.0-beta.3
Download UI Kit v1.9.0

This component defines the standard visual style for buttons.

Download UI Kit v1.9.0

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, and large sizes. Prefer the default size but feel free to use these other sizes where they would fit better with surrounding content.

Each button type in the two alternate sizes.

Redlines

Sizes

Standard button
  • 28px tall
  • 12px horizontal padding
  • Basic label font
Large button
  • 42px tall
  • 20px horizontal padding
  • large label font
Small button
  • 24px tall
  • 10px horizontal padding
  • Small label font

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

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
Normal
  • Just follow the standard link guidelines for color, underline, etc.
Hover/Active
  • Follow standard link styles
Disabled
  • #9DC0DB text color

Changelog

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