There are 3 types of buttons used throughout the app:
Primary Button: This is the button used the most throughout the app. Typically, this is the button that has the brand's color as its background color, and is displayed as the main call to action at the bottom of pages or on important content. Primary buttons are always displayed on top of theDefaultorCardsurfaces.
Secondary Button: This button is very similar toprimary buttonin its structure, however it it is specifically used when displaying a button on top of theBrandsurface. There are 2 specific places where it is used. It is used on the Walkthrough page when the app opens for the first time, and for the Add to Cart button.
Tertiary Button: This button is used for instances where there are multiple buttons on a surface side by side, and they both can't beprimary.
Again, here is what the Button Styles page looks like, now that you know what the intention is behind each of the 3 buttons:
Within each button, there are several values that can be set:
Background Color: This is the color that would be used on the background of the button.Make sure that for the
PrimaryandTertiarybuttons, that the background color distinguishes enough / has enough contrast to theDefaultandCardsurfaces. If not, you can also use aBorder Colorto help create that distinction between the button and its background.
Border Color: This is the color that would be used to draw a line around the button. If you don't wish for a button to have a border, just set the border to be the same color as the background of the button.Text Color: The color used for the text on the button.Disabled Background Color: The same as Background Color, but for instances where the button is disabled.Disabled Border Color: The same as Border Color, but for instances where the button is disabled.Disabled Text Color: The same as Text Color, but for instances where the button is disabled.Button Radius: Used to set a rounded corner to the button. The larger the number, the rounder the button.