Components chevron_right Buttons

Buttons

A button clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

There are three standard types of buttons:

  • Floating action button: A circular material button that lifts and displays an ink reaction on press.
  • Raised button: A typically rectangular material button that lifts and displays ink reactions on press.
  • Flat button: A button made of ink that displays ink reactions on press but does not lift.

Floating action button

Raised button

Flat button

Example of a floating action button

Example of a raised button

Example of a flat button

Choosing button style

Choosing a button style depends on the primacy of the button, the number of containers on screen, and the screen layout.

Function: Is it important and ubiquitous enough to be a floating action button?

Dimension: Choose raised or flat depending on the container it will be in and how many z-space layers you have on screen. There should not be many layers of objects on the screen.

Layout: Use primarily one type of button per container. Only mix button types when you have a good reason to, such as emphasizing an important function.

Buttons in dialogs

Use flat buttons on dialogs to prevent too many layers of dimension.

  • Text content: 16dp padding from dialog edge
  • Dialog button container: 48dp tall, 16dp below text content, 8dp from dialog bottom edge
  • Dialog buttons: 36dp tall, vertically aligned in middle of button container, 16dp from container right edge (for LTR scripts)

Examples of flat buttons in dialogs

Dialog button container
Height: 36dp
Top margin: 24dp
Bottom margin: 8dp
Dialog buttons: 8dp from container right edge (for LTR scripts)
Button width: Varies based on button text length

Examples of flat buttons in dialogs

Button
Height: 36dp
Minimum width: 64dp
Touch target height: 48dp
Horizontal margin: 8dp
Horizontal padding: 8dp

Buttons inline

Choose raised or flat buttons depending on your layout. Add padding around flat buttons so the user can easily find them.

Example of flat button

Example of raised button

Persistent footer buttons

If your app requires actions to be persistent and readily available to the user, consider using the floating action button.

Alternatively, consider persistent footer buttons, which are also easily accessible.

Example of a persistent footer button

Example of persistent footer buttons

Persistent footer buttons are 48dp tall.

Never use raised buttons within persistent button areas.

Don't.

With the addition of a divider, a persistent footer button can also be used for scrollable dialogs.

Persistent footer button in dialog

Persistent footer button in scrollable dialog

Flat & raised buttons Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Raised buttons

Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces.

Use raised buttons to give more prominence to actions in layouts with a lot of varying content.

Raised buttons can even help delineate sections of content on a page.

Do.

Raised buttons stand out more than flat buttons.

Don't.

Don’t use flat buttons in UIs where they would be difficult to see.

Flat buttons

Use flat buttons for toolbars and dialogs to avoid excessive layering.

Flat buttons are appropriate in dialogs.

Flat buttons minimize distraction from content.

Do.

Correct use of flat buttons.

Don't.

The raised buttons here are too heavy.

Flat and raised button states

Raised buttons behave like a piece of material resting on another sheet—they lift and fill with color on press.

Flat buttons are printed on material. They do not lift but fill with color on press.

Button text should be all caps in languages that have capitalization. For languages that don’t have capitals, consider using colored text for flat buttons to make them stand out from normal text.

Flat Light/Light theme

Minimum width: 88dp
Height: 36dp
Hover: 20% #999999
Pressed: 40% #999999
Disabled text: 26% #000000

Flat Dark/Dark theme

Minimum width: 88dp
Height: 36dp
Hover: 15% #CCCCCC
Pressed: 25% #CCCCCC
Disabled text: 30% #FFFFFF

Raised Light/Light theme

Minimum width: 88dp
Height: 36dp
Disabled text: 26% #000000
Disabled button: 12% #000000

Raised Dark/Dark theme

Minimum width: 88dp
Height: 36dp
Normal color: 500
Hover color: 600
Pressed color: 700
Disabled text: 30% #FFFFFF
Disabled button: 12% #FFFFFF

Accessibility

To ensure usability for people with disabilities, make sure that buttons have a height of 36dp and touchable targets have a minimum height of 48dp.

Button height: 36dp
Touchable target height: 48dp

Buttons in motion

Flat buttons

Raised buttons

Other buttons Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Icon toggles

Icons are appropriate for app bars, toolbars, action buttons or toggles.

Icon toggles can display bounded or unbounded ink ripples beyond their touch target bounds. For more information, see Surface Reaction.

Icon toggles in normal, hover, focused, pressed, and inactive states

Example of activated icons

Example of icon toggles with focus area guidelines

Mobile dropdown buttons

Dropdown button

A dropdown button selects between multiple selections. The button displays the current state and a down arrow. Available states may be shown as a list of strings, a palette, or icons, for example.

When a user interacts with the button, a menu covers the button and displays the possible states. Pressing a state dismisses the menu and updates the button to display this new state.

Scrolling within the dropdown behaves the same way a menu scrolls.

Dropdown menu

Generic dropdown button with a list menu

Closed dropdown button, open dropdown menu, and selected dropdown menu

Generic overflow dropdown button

This button is a dropdown button that does not have a displayed state but has an arrow or a generic menu button. When the button is pressed, the menu flies out. Pressing an option on the menu generally navigates to further settings for that option.

Segmented dropdown button

A segmented dropdown has two sections: the current state and the dropdown arrow icon. Pressing the current state will cause that state’s action to fire within the screen. Pressing the dropdown arrow will display all the state options. Selecting one will change the displayed state.

Editable segmented dropdown button

This button has a segmented dropdown, where the displayed state is text editable, such as a font size picker. Pressing the current state causes both that state’s action to fire and makes the displayed state editable. Pressing the arrow displays all the state options.

Generic, segmented, and editable overflow dropdown buttons in normal, hover, focus, pressed, and selecting states

Animation of dropdown button

  

Desktop dropdowns

Desktop app bar specs

Desktop dropdown

Top and bottom padding: 16dp
Left padding: 24dp
Right margin: 16dp
Horizontal space between font styles: 24dp