Buttons

v2.0.0

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.

Button types
Button sizes
Disabled Buttons
Redlines
Changelog

Features

Single collection of all button styles
Primary and Default button types
Default and Large button sizes
Guaranteed compliance with Accessibility contrast requirements

Dependencies

Colors v2.0.0-beta.5

Typography v2.0.0-beta.5

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

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.

CTA is your Call To Action button and should be used only in very specific instances such as Sign-In. It takes a higher priority over the Primary button type. It is the single most important action you can take on a page. This can only be used ONCE per page.

If a Default or Primary button increases in priority within the context of the same page, it can convert to a CTA button.

All three button types in their various states.

Button sizes

Buttons come in small, large and xlarge sizes. Prefer the small size but feel free to use the large size where they would fit better with surrounding content. Both small large button sizes are meant to pair with equally sized inputs. XLarge buttons are to be used when the UI appears on a mobile device or screen smaller than 768px width (tablet portrait view).

The three button sizes.

Disabled Buttons

Use a disabled button only if an action on the current screen can enable it (action possibility). A disabled button should only appear when contextually relevant. If the button is not needed for the task at hand, it should be hidden.

If a bank of 2 or more buttons is present but can only be enabled by direct action on the same screen, it can be hidden and only shown when enabled to give emphasis of new controls available to the user.

Examples of when to disable vs. hide buttons

Redlines

Sizes

Standard button

28px tall
12px horizontal padding
Basic label font

Large button

36px tall
20px horizontal padding
large label font

XLarge button

44px tall
20px horizontal padding
large label font

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/#rd-standard-button)`
Large Button	`[](/design/c/buttons/v2.0.0/#rd-large-button)`
XLarge Button	`[](/design/c/buttons/v2.0.0/#rd-xlarge-button)`