Buttons communicate the action that will occur when the user touches them.

Smart buttons trigger an ink reaction on press. They may display text, imagery, or both. Flat buttons and raised buttons are the most commonly used types.

Flat buttons

Flat buttons are text-only buttons.
They may be used in dialogs, toolbars, or inline.
They do not lift, but fill with color on press.

Raised buttons

Raised buttons are rectangular-shaped buttons.
They may be used inline.
They lift and display ink reactions on press.

Button types

There are three standard types of buttons:

  • Floating action button: A circular button that lifts and displays an ink reaction on press.
  • Raised button: A typically rectangular 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

button

Raised button

button

Flat button

directions_car

Example of a floating action button

force stop uninstall clear data

Example of a raised button

disagree agree

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

Button types

The type of button used should be suited to the context in which it appears.

Context

Button type

Dialogs

Use flat buttons in dialogs.

Inline

Raised buttons or flat buttons can be used for inline buttons.

Always available

If your app requires actions to be persistent and readily available, you can use the floating action button.

Recommended button placement

Standard dialogs

Button alignment on screen: right

Place the affirmative button on the right, the dismissive button on the left.


Forms

Button alignment on screen: Left

Place the affirmative button on the left, the dismissive button on the right.


Cards

Buttons are best placed on the left side of a card to increase their visibility. However, as cards have flexible layouts, buttons may be placed in a location suited to the content and context, while maintaining consistency within the product.


Non-standard dialogs and modal windows

Button placement in non-standard dialogs and modal windows depends on the complexity of the content they contain.

For dialogs with relatively simple content, it is recommended to place buttons on the right side of a dialog, with the affirmative button to the right of the dismissive button.

For lengthy or complex forms, it is recommended to place buttons on the left of the form, with the affirmative button to the left of the dismissive button.

Outlined buttons

Specs & Behavior

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

normal
focused
Pressed
disabled

Flat buttons

Specs & Behavior

normal
focused
Pressed
disabled

Demo usage


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

share explore

Flat buttons minimize distraction from content.

button button

Flat buttons are appropriate in dialogs.

Raised buttons

Specs & Behavior


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

normal
focused
Pressed
disabled

Demo usage


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

force stop uninstall clear data

Raised buttons stand out more than flat buttons.

Floating action buttons

A floating action button represents the primary action in an application.

A floating action button is used for a promoted action.

Shaped like a circled icon floating above the UI, it changes color upon focus and lifts upon selection. When pressed, it may contain more related actions.

Usage

Only one floating action button is recommended per screen to represent the most common action.

Behavior

It animates onto the screen as an expanding piece of material, by default.

Sizes

Default: 56 x 56dp
Mini: 40 x 40dp

The floating action button should be placed 16dp minimum from the edge on mobile and 24dp minimum on tablet/desktop.

Raised buttons behave like a piece of material resting on another sheet – they lift and 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.

Specs & Behavior


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

add_circle
call
search
replay

Demo usage


Floating action buttons are designed to be flexible.

The floating action button can simply trigger an action or navigate somewhere. The animation of the touch ripple expands outwards as the force that causes changes to the UI.

share cast cloud

A floating action button flinging out related actions

apps

A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes.