Buttons

Overview

Definition

Buttons are triggers for events or actions within the UI. Button labels express what action should occur when the user interacts with it. 

We have several variations:

In a few options:

  • Medium
  • Small
  • Text only
  • With icon
  • Only icon

Similar or related Components

  • Link
  • Menu (coming soon)

Guidelines

Buttons are most commonly used to trigger an action, or event, on the same page.

While buttons can be confused with links (especially when you’re on a form and a button takes you to another screen—we know, it’s confusing). However, they have different functions. Links are for navigating to another product, or external URL.

Content

  • Keep button copy consistent throughout ALEX to create platform-wide understanding.
  • All buttons should be sentence case, capitalizing only the first letter of the first word. Proper nouns are the exception to this rule, whether external or platform-specific.
  • Include articles like “the” and “a” for clarity, but otherwise try for brevity.
  • Try not to extend to a second line. (This is sometimes unavoidable with responsive design).

Visuals

Hierarchy

The diagram is only for illustrative purposes, it’s meant to give a general idea of how often the different types of buttons should be used on a page. Buttons don’t need to follow the exact naming convention, you can use Tertiary more frequently than its name suggests.

Primary
Should be used for the most important actions, and it should be used the least.

Secondary
Can be used more often since it doesn’t hold the same visual weight as the Primary, but they should rarely appear on their own.

Tertiary
Can be the most frequently used since it has the lowest visual weight. 

Do

If you need to pair a button with a Primary.

Use a Secondary or Tertiary button—think about the preferred order of actions to help determine which style to use.

Do

Pair Secondary and Tertiary when actions aren’t as important as the Primary.

Do

When buttons are paired side by side, try to make the buttons the same width whenever possible. 

Do

If buttons are stacked, they should all be the same width.

Don’t

Have many icon-only buttons on a screen.

Most icons don’t have the same meaning for everyone. If there is no label, it can create confusion over the intended action. When in doubt, use a label.

Don’t

Don’t change the colors of the buttons.

Don’t

Don’t stagger the ends of stacked buttons.

Don’t

When buttons are paired side by side, don’t make them drastically different widths. 

Caution

Try not to use Disabled buttons.

It’s a better practice to let someone interact with the button and show them an error message with appropriate next steps. This way they can see what needs to be fixed, rather than be stuck and confused about why they can’t continue.

Caution

Try not to put more than two buttons side by side.

Depending on the screen width / container width you may end up with one under the other two.

Caution

Outside of interactive conversation moments, don’t pair Primary buttons.

This causes cognitive overload for users, since it’s not easy to understand the preferred action.

Variations

VariantPurpose
PrimaryThe main call-to-action (CTA) on the page. Ideally, Primary buttons should only appear once per screen.
SecondaryThese are additional actions, and they are usually paired with another button. They can be independent when in specific components.
TertiaryTertiary buttons can be used in isolation or paired with another button type when there are multiple actions on a screen.
DestructiveFor actions that could have negative effects on the user’s info or process (for example: delete or remove). 

Sizes

Medium

Used as the main size for most screens throughout ALEX. The height is calculated to add up to 48px with the size of the font and icon. This is to allow for a larger interaction area. 

These are meant for most BC / Go buttons. They are the same height and type style as most form fields.

Small

Used when vertical space is at a premium. These are more common within a component. The height adds up to 32px, it’s still a reasonable size for many people to interact with, but not the ideal.

Icons

Left and right icon

When there’s a need for extra visual support within the button

Icon-only

Should be used sparingly. For example: video controls, tooltips, etc.

When in doubt, add supporting text.

Specs

Colors stay the same for the variants between sizes. It’s the border width, border radius, type size, icon size, and padding that will change between medium and small.

Medium

These are consistent between variants.
Px / ptRemName
Border radius80.25border-radius-xs
Border width20.125border-width-md
Padding: text only16 321 2Spacing-04 spacing-06
Padding: icon right12 24 12 320.5 1Spacing-03 spacing-05 spacing-03 spacing-06
Icon right spacing80.5spacing-02
Padding: icon left12 32 12 240.5 1 0.5 0.75Spacing-03 spacing-06 Spacing-03 spacing-05
Icon left spacing80.5spacing-02
Padding: icon only120.75spacing-03
Label size161component-button
Icon size241.25spacing-05

Small

These are consistent between variants.
Px / ptRemName
Border radius0.25border-radius-xs
Border width20.125border-width-md
Padding: text only8 160.5Spacing-02 spacing-04
Padding: icon right8 12 8 160.5 1Spacing-02 spacing-03 Spacing-02 spacing-04
Icon right spacing80.5spacing-02
Padding: icon left8 16 8 120.5 1 0.5 0.75Spacing-02 spacing-04 Spacing-02 spacing-03
Icon left spacing80.5spacing-02
Padding: icon only80.5spacing-02
Label size140.875component-button-small
Icon size241.25spacing-05

Primary

These are consistent between sizes.
PrimaryDefaultHoverFocusActiveDisabled
Background color$yellow-300$yellow-400$yellow-300$yellow-600$ink-200
Border color$yellow-400$yellow-600$yellow-400$yellow-800$ink-200
Label color$ink-800$ink-600
Icon color$ink-800$ink-400

Secondary

These are consistent between sizes.
SecondaryDefaultHoverFocusActiveDisabled
Background color$white$ink-200-multiply$white$ink-300-multiply$ink-100
Border color$ink-300$ink-400-multiply$ink-300$ink-400-multiply$ink-200
Label color$ink-800$ink-400
Icon color$ink-800$ink-400

Tertiary

These are consistent between sizes.
TertiaryDefaultHoverFocusActiveDisabled
Background color$ink-100-multiply$ink-200-multiply$ink-100
Border color$ink-300-multiply$ink-600$ink-300-multiply$ink-100
Label color$ink-800$ink-400
Icon color$ink-800$ink-400

Destructive

These are consistent between sizes.
DestructiveDefaultHoverFocusActiveDisabled
Background color$red-100$red-200$red-100$red-300$ink-100
Border color$red-600$red-800
Label color$red-800$ink-400
Icon color$red-800$ink-400

Accessibility

  • The Primary button is best used on white, Ink-800, or Ink-600 for the appropriate accessibility contrast.
  • Make sure they are correctly labeled in the code so assistive technology can correctly interpret them.