Buttons
Global Button Standards
Our buttons share these global standards:
- When used with body copy, buttons are left aligned. In this instance, buttons should be used sparingly and only to call out a very important action we want the user to take.
- When used in a form, buttons are right aligned.
- When used with a single input field (such as a search box), buttons should be in line with the input box.
Interaction
Our buttons act according to the following states:
- Normal
- Hover (Desktop Only)
- Depressed
- Disabled
Visually, buttons follow these levels back in dimension from highest to lowest:
Desktop Button Sizes
Large
Large buttons should be used sparingly, and only in situations where a large button is necessary. Large buttons are generally used in marketing sites and in hero areas as a primary action.
Medium
Medium buttons are more commonly used across our properties. Form buttons and actions for our Live platform are the most common applications.
Small
Small buttons are used as secondary actions or when there are many buttons on a page and their hierarchy needs to be pulled back.
Mobile Button Sizes
Large
Large buttons should be used to anchor primary actions if space allows. Because the hit state is larger and more forgiving, large buttons may be formatted in close proximity to one another. Large buttons can even touch like in the image shown below.
Medium
Medium buttons are used to drive primary actions in when the screen real estate is limited. When using an icon to drive a primary desired behavior, medium sized buttons are appropriate.
Small
Small buttons are used as secondary actions or when there are many buttons on a page and their hierarchy needs to be pulled back. The size of this hit state is not forgiving to fingertips and therefore small buttons are not used in close proximity to other buttons.
Button Color
Active
Active button colors are generally either orange, green, or sometimes blue.
Disabled
Disabled buttons are gray, and should read as though they aren't actionable.