Buttons
Search the component library

Buttons

v1.0.0

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

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 button24px tall
10px horizontal padding
Small label font
Standard button28px tall
12px horizontal padding
Basic label font
Medium button36px tall
12px horizontal padding
Large label font
Large button42px tall
20px horizontal padding
large label font
Link style buttonsMaintain the same spacing around the text

Corners

All sizes use a 3px border radius.

Primary buttons

NormalBasic Blue (#107ACA) fill
Deep Sea (#0A4D80) border
Inverse Primary Color
Hover/ActiveSea (#0C5D99) fill
Deep Sea (#0A4D80) border
inset shadow with 3px blur, rgba(0, 0, 0, 0.3) color
DisabledSky Blue (#9DC0DB) fill
No border
FocusUse the browser default style

Default buttons

NormalDirty Ice (#F8F8F8) fill
Sidewalk (#B3B3B3) border
Secondary font color
Hover/ActiveBrightly Lit (#E6E6E6) fill
Sidewalk (#B3B3B3) border
inset shadow with 2px blur, rgba(0, 0, 0, 0.3) color
DisabledOff White (#F2F2F2) fill
No border
Boring (#A6A8AB) text color
FocusUse the browser default style

Link buttons

NormalJust follow the standard link guidelines for color, underline, etc.
Hover/ActiveFollow standard link styles
DisabledSky Blue (#9DC0DB) text color
FocusUse the browser default style
SpacingMaintain the same spacing as the standard buttons

Changelog

1.0.0

Initial version