Button

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)

Open

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.

Open

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.

Tertiary

Link

Other Variants

Supported Canvases

• Modal Canvas

• RHS Canvas

• Message Canvas

Related Components

• Button Group

• Icon Button

Sample View Within the Apps Framework