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 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 are rectangular-shaped buttons.
They may be used inline.
They lift and display ink reactions on press.
There are three standard types of buttons:
Floating action button
Raised button
Flat button
Example of a floating action button
Example of a raised button
Example of a flat button
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.
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. |
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 are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.
Flat buttons are printed on material. They do not lift, but fill with color on press.
Flat buttons minimize distraction from content.
Flat buttons are appropriate in dialogs.
Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.
Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces.
Raised buttons stand out more than flat buttons.
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.
Only one floating action button is recommended per screen to represent the most common action.
It animates onto the screen as an expanding piece of material, by default.
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.
Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.
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.
A floating action button flinging out related actions
A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes.