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.
Button min and max length
Button placement in app bar
Button with icon vs. default button
Button in dialog
|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|
|Rounded corner radius (R1)||4|
|Rounded corner radius (R4)||Full|
|Hero button height||76|
|Minimum button width||156|
|Maximum hero button width||268|
Motion can provide feedback indicating that a user has successfully made contact with a button.