Button

Design Complete

Important Links

Description

Buttons enable users to take actions or make decisions with a single tap or click. They are used for core actions within the product like saving data in a form, sending a message, or confirming something in a dialog. There are many Button Variants, as described below.

Anatomy

Buttons are composed of the following elements:

Container
Label
Leading Icon (optional)
Trailing Icon (optional)

Sizes

Within the Apps Framework, Buttons come in 3 sizes: Small, Medium, and Large. The Medium Button size is used as the default button size for the web application, while the Large Button size is used as the default for mobile.

Emphasis

Primary

Primary Buttons are used to highlight the strongest call to action on a page. They should only appear once per screen (not including the application header or within a modal dialog) to ensure the user is guided through the screen on what the most important action is. Not every screen needs a primary button. In a group of Buttons, Primary Buttons should be paired with Tertiary Buttons.

Secondary

Secondary Buttons are treated like Primary Buttons, but should be used in cases where you may not want the same level of visual disruption that a Primary Button provides. If a group of Buttons already has a Primary Button, don’t use Secondary Buttons—Use Tertiary Buttons instead.