Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Design Complete

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.

Tertiary

Other Variants

For more details on the other variants of the Button component, see the full documentation in Zero Height

  • No labels