Buttons
Search the component library

Buttons

v2.0.0-beta.1

This component defines the standard visual style for buttons.

Usage Guidelines

Every instance of a button 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
  • Primary and Default button types
  • 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.

Both button types in their various states.

Button sizes

Buttons come in default and large sizes. Prefer the default size but feel free to use the large size where they would fit better with surrounding content. Both button sizes are meant to pair with equally sized inputs.

The two button sizes.

Redlines

Sizes

Standard button
Large button

Corners

All sizes use a 2px border radius.

Available Styles Reference As (How do I use this?)
Standard Button [](/design/c/buttons/v2.0.0-beta.1/#rd-standard-button)
Large Button [](/design/c/buttons/v2.0.0-beta.1/#rd-large-button)

Primary buttons

Normal
Hover/Active
Disabled
Focus
  • Use the browser default style
Available Styles Reference As (How do I use this?)
Primary Button [](/design/c/buttons/v2.0.0-beta.1/#rd-primary-button)

Default buttons

Normal
Hover/Active
Disabled
Focus
  • Use the browser default style
Available Styles Reference As (How do I use this?)
Default Button [](/design/c/buttons/v2.0.0-beta.1/#rd-default-button)

Changelog

2.0.0-beta.1

  • CHANGED: Adopt new visual style

1.0.0-beta.5

  • ADDED: Dependency links

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