Buttons communicate actions to users and they can be placed at several places throughout the user interface.

Basic Button

The button comes in three types: Filled, Outlined, and Text.

Filled Button

Mostly used for high-emphasis actions and are primarily distinguished by their fill. They are used to represent actions that are primary to the solution.

Outlined Button

Can be used for both medium and sometimes high-emphasis actions.

Text Button

Mostly used for less pronounced and very low emphasis actions. Can also be used for text links as well.


For now, two different sizes of buttons exist: 56px height and 48px height.

Adding Icons

Icons are mostly added to filled and outlined buttons and they are used to better describe the information being passed across by the button’s label.