Buttons

Buttons communicate an action to happen on user interaction.

set of three button types in default state

  1. Icon: Used to give the button clarity and more meaning.
  2. Label: Text that indicates the result of selecting the button.

Color plays a big role in how buttons are displayed in layouts. See the colors page to learn more about color definitions.

Types

Primary

The primary button is always used for the most important actions. Two primary actions can't be near each other.

button primary default size default state

Default

The default button is always use for default actions. Several default actions can be near by each other.

button default size default state

Subtle

The subtle button is most cases used for actions that don't require to draw attention. It can be used paired together with the primary button and act as a "Cancel" button.

button subtle default size default state

Link

The link button used to navigate to another page, section of a page or to open extra context within the page.

button link default size default state

Warning

Warning buttons are used before the user is about to make a significant change.

button warning default size default state

Delete

Delete buttons are used in order for the user to finalize and confirm permanent deletion of critical information. They are used mostly in the context of a modal.

button delete default size default state

States

Default state

set of three button types in default state

Hover state

set of three button types in active state

Active state

set of three button types in active state

Disable state

set of three button types in disabled state

Behaviors

  1. Use the same height for all the buttons that are in the same row.

two buttons of same height in a row

two buttons of same height in a row

  1. Text can not wrap multiple lines. It must all be on one line.

button with text on one line

button with text wrapped

  1. A borderless button must be placed either before or after a set of bordered buttons.

borderless button, secondary button, primary button

secondary button, borderless button, primary button

Block level button

Buttons can also be configured at block level. Use this configuration when you need to communicate that an important action is required for the user. For example, it can be used as a load more action below a list. Please do not use it in forms. Choose the button type carefully. Primary is not always the best choice, nor is it the only configuration.

block level button primary state, default size

Dropdown button

Dropdown buttons are always used with a dropdown menu. This button variation can be secondary or borderless type. button primary default size default state

  1. Label: Use a label that will relate to the list it provides.
  2. Arrow: Arrow icon indicates there's a list for this button.

See the dropdowns page to learn more about dropdowns components.

Combo button

Split buttons are used when you need to offer the user a quick main action along with secondary actions. button primary default size default state

  1. Button: Use a button that allows the user to do a quick action.
  2. Dropdown: Provide a dropdown next to the button to give the user additional options.

Button group

Button groups are used to switch between complementary views for example, but they must never be used for complementary actions, "Change and Cancel" actions, or "Save and Cancel" actions. In those cases, single buttons are the correct solution.

button group, two examples. First one without disabled button, second one with disabled button

  1. Unselected Provide unselected states for the button if the user is not on that page.
  2. Selected: When the user selects this page provide an active state to provide clarity of which page they are viewing.
Contents
Resources