Anatomy
Target area
The target area is the base tappable area of the button.
Label
The label is the copy on the button. It’s usually the action that’s performed once selected.
Leading and trailing icons (optional)
These optional icons come before or after the label copy. Go to usage for content guidance.
Styles
Primary buttons
Use primary buttons to show the key action on a page or view. Most pages should only have one primary action (excluding search results where multiple primary buttons can be used).
Featured buttons
Within an entire screen, featured buttons should be used sparingly. If you have one critical button in your flow, consider using this for the most emphasis.
Secondary buttons
Use secondary buttons next to primary buttons to indicate alternative or less pronounced actions.
Links
Text buttons, or links, are subtle in their appearance and should be used for supplementary action. They’re used for communicating non-destructive actions that a user can carry out. For example, to show more results on a listing page. Like all other button styles, these are available in two sizes and have hover, active and disabled states.
Destructive buttons
Destructive buttons are used to remove things or for irreversible actions. These buttons require an opt-in checkbox or a confirmation modal before the action is done. For example, a button that permanently closes an account.
Primary on dark
These are solid-fill buttons that work on dark images.
Primary on light
These are solid-fill buttons that work on light images. For example, a button on a map.
Secondary on dark
These have less emphasis than primary on dark. They work well for solid dark backgrounds.
Hyperlink on dark
These have less emphasis than hyperlinks. They work well for solid dark backgrounds.
Sizes
Buttons come in two sizes: default and large. Note that the radius, typography, and spacing are the same, only the height differs.
Default size
The default size is the standard size for buttons everywhere across our platforms
Large size
Large buttons are used sparingly across our product. They may be used for page components that demand attention, such as the search bar on the homepage.
Radius
We always use 8px radius corners regardless of size or style.
States
Default
The default state is the resting state of the button.
Hover
The hover state indicates that interaction is available for people using pointer devices.
Loading
The loading state communicates a button has been pressed and something is in progress.
Note: The button is disabled from further interaction until either the action has been completed, or the action failed to complete.
Disabled
The disabled state indicates that an action can’t be taken until a previous action is completed.