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.
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)
Choose raised or flat buttons depending on your layout. Add padding around flat buttons so the user can easily find them.
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.
Never use raised buttons within persistent button areas.
With the addition of a divider, a persistent footer button can also be used for scrollable dialogs.