Components – Buttons

Google ©

Privacy & Terms

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.

Button types 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.

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

Buttons in dialogs

Use flat buttons on dialogs to unify the button action with the dialog content.

  • Dialog text padding: 24dp
  • Dialog button container height: 52dp
  • Dialog buttons: 8dp padding from container edges, aligned to the right of container (for LTR scripts)

Flat buttons in dialogs

Dialog buttons
Button height: 36dp
Button top margin: 24dp
Button padding: 8dp
Button alignment: 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.

Persistent footer buttons are 48dp tall.

Example of persistent footer buttons

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

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

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

Button text should be capitalized in languages that have capitalization. For other languages, colored text on flat buttons distinguishes them from normal text.

Flat Light/Light theme

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

Flat Dark/Dark theme

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

Flat buttons with 12% opacity on focus

Raised Light/Light theme

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

Focused:12% #000000 shade over the color

Raised Dark/Dark theme

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

Focused:12% #000000 shade over the color

Accessibility

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

Button height: 36dp
Touchable target height: 48dp

Button Elevation

Raised buttons have a default elevation of 2dp.

On desktop, raised buttons can gain this elevation on hover.

Dark/Light theme

Minimum width: 64dp
Height: 36dp
Z-depth: 0dp
Disabled text: 30% #FFFFFF
Disabled button: 12% #FFFFFF

Density

When mouse and keyboard are the primary input methods, button measurements can be slightly reduced to accommodate dense UIs.

Default Button
Dense Button

Button text: 14pt Roboto medium
Button height: 36dp
Button text left and right padding: 16dp

Button text: 13pt Roboto medium
Button height: 32dp
Button text left and right padding: 16dp

Buttons in motion

Flat buttons

Raised buttons

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

Toggle buttons may be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group.

Focus and pressed states may reinforce that toggles are part of a group. For example, when one button segment is focused, focus may be displayed simultaneously on the rest of the segment.

Toggle button requirements:

  • Have at least three toggle buttons in a group
  • Label buttons with text, an icon, or both

The following combinations are recommended:

  • Multiple and unselected
  • Exclusive and unselected
  • Exclusive only
Exclusive selection

Text justification toggle buttons present options for left, right, center, full, and justified text  with only one item available for selection at a time. Selecting one option deselects any other.

Multiple selection

Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be selected.

No options are selected

One option is selected

Icon toggles

Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

They are best located in app bars, toolbars, action buttons or toggles.

Icon toggles may display bounded or unbounded ink surface reaction ripples beyond their touch-target bounds.

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

The icon toggle focus indicator color and opacity is related to the color of the icon.

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

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.

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

Generic dropdown button with a list menu

Generic overflow dropdown button

The generic overflow dropdown button displays an arrow or menu button by default. When the button is pressed, the menu appears. Pressing an option on the menu 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