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

Buttons can be either flat (transparent) or raised (solid background), with a raised state indicating a primary or preferred action. They can occur independently or in groups – unlike tabs, which always occur in groups.


Buttons anatomy
1. Flat button container
2. Raised button container
3. Button label


Button min and max length

Button placement in app bar

Button with icon vs. default button

Button in dialog

Hero button



Type style Typeface Weight Size (dp)
Body 3 M Roboto Medium 24


Element Color(day mode) Color (night mode)
Flat button label White White @ 88%
Flat button label disabled White @ 46% (TBD) White @ 40% (TBD)
Raised button label Black Black
Raised button background #66B5FF #60A8F0
Raised button background disabled Grey 900 (TBD) Grey 928 (TBD)
Raised button label background disabled White @ 46% (TBD) White @ 40% (TBD)
Gradient truncate Black @ 0–100% in 10% of text space Black @ 0–100% in 10% of text space


Element Size (dp)
Primary icon 44
Secondary icon 36
Rounded corner radius (R1) 4
Rounded corner radius (R4) Full
Button height 56
Hero button height 76
Minimum button width 156
Maximum hero button width 268


flat and raised buttons
Flat and raised buttons
disabled raised button
Raised button disabled
Flat button dialog
Flat buttons in dialog


Motion can provide feedback indicating that a user has successfully made contact with a button.

button ripple motion duration
Here, a ripple motion with a duration of 330ms confirms contact with each button
Buttons ripple animation
These ripples (which start at 60% of the button surface size) move away from the user’s tap, expanding to 10dp beyond each button’s border