Overview
Unlike how buttons are ulitized for desktop, buttons for our mobile experiences are applied more rigidly. While in our desktop experiences buttons of all variants are featured prominently in the contents of a given page (within cards, alongside tables etc), when used in our mobile experiences, buttons for the most part, are contained within the navigation structure of an mobile app.
When not contained in the navigation structure, buttons should only be of the tertiary and/or ghost variant.
Aside from the differences in positioning, mobile buttons have been slightly enlarged in order to better facilitate user actions through touch as opposed to mouse clicking.
Usage
Buttons, particularly button groups, should be placed within the navigation structure, replacing the bottom navbar when used.
Horizontal button groups should be avoided due to the difficulties users have when interacting with this limited touch space. Additionally button groups, unless absolutely necessary, should not placed alongside the bottom navbar.
If buttons are placed in an flow that holds a button group, then only tertiary and/or ghost buttons should be used.
Avoid the use of secondary and/or primary buttons alongside the button group in the navigation.
Position the primary call-to-action button closest to the user. This means that the primary button should be at the very bottom of a given button group.
Avoid placing the primary button at the top of a given button group as this was require users to strain when wanting to perform this action.