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.
Important Links
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
Link
Other Variants
For more details on the other variants of the Button component, see the full documentation in Zero Height