Actions

Button raised

Buttons allow users to trigger an action or event with a single click. The raised buttons help to emphasize call-to-actions in busy layouts.

Anatomy

Usage

Use buttons to indicate the user the next action to be done in order to move forward in a flow.
Prioritize the most important actions. Having too many call to actions can confuse the user.
The button may contain an optional icon before and/or after the label to help understand the action.
Content guidelines: The label should reflect the action that will be triggered after clicking on the button.

👍 Rule of thumb:
Use only one primary button in the layout, and all remaining calls to action should be represented using secondary buttons

Types

Variants

Sizes

States

Do’s & Don’ts

Button flat

The flat button is a variation of the raised button without a background color. The prime advantage of this button is that it can reduce distractions by blending more in the page.

Anatomy

Usage

Use buttons to indicate the user the next action to be done in order to move forward in a flow.
The button may contain an optional icon before and/or after the label to help understand the action.
Content guidelines: Label should be concise and clearly communicate that an action will occur after hitting the button.

Types

Variants

Sizes

States

Do’s & Don’ts

Icon button

Icon buttons allow users to perform actions while taking less space. Icon buttons can be raised or flat, and take primary and secondary types.

Usage

Icon buttons usually exist in compact layouts, such as toolbars or side panels.
They can be grouped together or stand alone.
The same sizes as the text buttons will apply (small, regular, and large).
To toggle between two states, consider using a toggle button or switch.

🔮 Tip box
Consider adding a tooltip to clarify the action of the icon button.

Types

Primary

Secondary

Variants

Negative style

The ‘negative’ or ‘destructive’ button style can warn users of a potentially destructive action (such as permanently deleting items, abandoning workflows, etc.). The negative style can be applied to raised and flat buttons, in their text and icon forms.

Do’s & Don’ts

Dropdown button

The dropdown button allows users to choose one action from a collection of actions in a compact way.

Anatomy

Usage

Clicking anywhere on the dropdown button will open the menu showing the available actions.
While the menu is open, the button will look ‘pressed’ or ‘clicked’.
Usually, after selecting an item from the list or clicking outside, it will dismiss the menu.
The button can be either a text button or an icon button, and should always include the chevron.
Content guidelines: The label should describe the type of actions contained in the menu.

Types

Primary

Secondary

States

Split button

A split button offers a default action as well as the possibility of choosing a different action by selecting from a set of alternatives.

Anatomy

Usage

Clicking around the button label area will trigger the main or default action.
A click on the chevron will open a dropdown menu with a list of additional related actions.
While the menu is open, only the chevron click area will be ‘pressed’ or ‘clicked’.
The button may contain an optional icon before the label to help understand the action.

👍 Rule of thumb:
The default action should be either the most standard one from a collection of similar actions, or the most commonly used.

Types

Primary

Secondary

States

Button interactions

Chevron interactions

The menu will be usually triggered by a button.
Closing the menu will be done by selecting an item or clicking anywhere outside the menu.
Menu items can contain nested submenus, which will be indicated by a chevron.
Group labels or dividers may be used to organize a longer list of items. These labels are not clickable.
The item order in the list should be according to the most used options. It’s recommended to place destructive actions at the bottom.
Content guidelines: Use sentence case for the list item labels.

👍 Rule of thumb:
Keep the nesting items to a maximum of one or two levels to avoid overwhelming the users.

Variants

States

Primary

Placement

The menu will open by default from the bottom left of the button, but it can be changed according to available space and context. Avoid covering the button with the menu.

🔮 Tip box:
To allow the user choose one or more options from a list and applying them to an input field, use the input select component.

Actions

Button raised

Button flat

Icon button

Dropdown button

Split button

Menu