Overview¶

Buttons communicate actions that users can take all around the UI. They cover the largest portion of the UI making them the most common UI element.

Principles¶

Identifiable
Buttons should indicate that they can trigger an action in the easiest way possible.
Findable
Buttons should be easy to find among other elements on a page including among other buttons
Clear
A button's action and state e.g disabled, pressed etc should be as clear as possible
Motion
All buttons have a bit/form of animation to them (the ripple) to communicate to users a change in state from rest to pressed. Some buttons fill up when loading.

Types¶

Buttons have a number of variations and types and the role each plays is based on what it does in a given UI incident/page. There are 9 types of buttons namely;

Elevated
Filled
Filled tonal
Outlined
Text buttons
Icon only buttons
Segmented buttons (commonly called tabs)
Floating Action Buttons (FAB)
Extended FAB

Note

The button types; elevated, filled, tonal (and all its variants), outlined and text only buttons all have the same padding. This is to have a uniform spacing when two buttons are in the same area like in a bottom sheet. Don't treat text only buttons like they are just styled text.

Interactive button demo¶

Visual variations for the different button types.

Note

For button types not in the demo please refer to the Figma file to see how it looks like

Button Types¶

FABs¶

Name	Example
Colored FAB
Colored FAB with ripple
Plain FAB
Plain FAB with ripple
Disabled FAB
Small FAB
Small colored FAB
Mini FAB with ripple

Elevated, Filled, Filled Tonal¶

Name	Example
Colored button (rest)
Colored button (with ripple)
Accent-colored button
Accent-colored button (with ripple)
Raised Button
Raised Button with ripple
Flat button
Flat button with ripple
Disabled flat button
Primary-colored flat button

Icon only buttons¶

Name	Example
Icon Button
Icon Button with ripple