Buttons

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.


Anatomy

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

Specs

Button min and max length

Button placement in app bar

Button with icon vs. default button

Button in dialog

Hero button


Styles

Typography

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

Color

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

Sizing

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

Examples

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

Motion

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