Anatomy
All Buttons use a 4px corner radius. For the Text variant, this is only visible for the hover and active state (see Variants). A 4px radius allows for a soft/ friendly feel and makes it work well when used inside a Card (which has rounder corners).
Variants and states
Primary
Primary buttons have a high emphasis, as they use a color fill and elevation. The primary button is used for the most important action on the page or flow. The button is used to guide the user through a flow or for main actions like: continue, save, selecting a flight or finalising the checkout. Primary buttons should be applied just once on a page, since it represents the main CTA.
Secondary
The secondary button has medium emphasis. It still uses a color fill and elevation, but blends in with the rest of the color palette. The secondary button is the second or less important action on the page or flow. The button should be used to guide the user though a flow. Secondary buttons can be applied multiple times on a page.
Tertiary
The tertiary button has low emphasis. This outlined button is typically used for less important actions or in combination with medium or high emphasis action buttons. Try to limit the usage per page.
Text
The flat button also has low emphasis. Text buttons are typically used for less important actions. They can be used in cards and dialogs or in combination with medium or high emphasis action buttons. Text buttons can be applied multiple times on a page.
Other variants
There are platform specific variants for buttons. See the platform specific tabs on the top of the page to get an overview per platform. The main example for these other variants are sizing and icojn only buttons.
