Buttons

Use buttons to enable users to take actions. Create standard buttons or toggle buttons.

Types

Standard button

Standard buttons enable the user to take a single action.

Toggle button

Toggle buttons enable the user to turn a selection on or off.

Standard button

Use a standard button component when you want to enable the user to take a single action, such as starting a workout, starting a timer, or playing music.

Anatomy

Standard buttons are made up of the following elements:

1. Primary button

A. Icon

B. Container

2. Icon-only button

A. Icon

C. Tap target

Hierarchy

1. Primary button (high emphasis)

Primary buttons are prominent and distinguished. Use primary buttons for high-confidence, common actions.

2. Secondary button (medium emphasis)

Secondary buttons contain actions that are important, but aren’t the primary action in an app.

3. Icon-only button (low emphasis)

Icon-only buttons are used to convey supplementary actions.

Size

1. Large

Icon (30 x 30dp)

Container (60 x 60dp)

2. Default

Icon (26 x 26dp)

Container (52 x 52dp)

3. Small

Icon (24 x 24dp)

Container (48 x 48dp)

4. Extra small

Icon (24 x 24dp)

Container (32 x 32dp)

Tap target (48 x 48dp)

Toggle button

Use toggle buttons when you have a group of actions and need to enable the user to turn a selection on or off.

Figure 1. Toggle buttons in the Quick Selection Shade (QSS) used to present options for various quick settings.

Figure 2. These icon-only toggle buttons allow selection or deselection of a single choice, such as marking an item as a favorite.

Size

Default

Icon (26 x 26dp)

Container (52 x 52dp)

Use when placed in a group of five or more toggle buttons.

Small

Icon (24 x 24dp)

Container (48 x 48dp)

Use when placed in a group of four or fewer toggle buttons.