This article contains general information about Google's Material Design implementations.

Notes

As of 15 December 2018, unless indicated, all of the components listed below conform to the new Material Design specifications.

Implemented web components (2018 specifications)

Components Polymer Project AngularJS Material Materialize Material-UI Material Design Lite Material Components for the web
App bars App bars: bottom No No No Maybe [1] No No
App bars: top (formerly known as toolbar in the former specifications) Yes [2] Yes [3] Yes [4] Yes [5] Maybe [6] Yes [7]
Backdrop No No No No No No
Banner No No No No No No
Bottom navigation No No No Yes [8] No No
Buttons Text button Yes [9] Yes [10] Yes [11] Yes [12] Yes [13] Yes [14]
Outlined button No No No Yes [15] No Yes [16]
Contained button (formerly known as raised button in the former specifications) Yes [9] Yes [10] Yes [17] Yes [18] Yes [13] Yes [19]
Toggle button (not included in the former specifications) No No No Maybe [20] No No
Icon Button (not in the specifications) Yes [21] Yes [10] No Yes [22] Yes [13] Yes [23]
Icon Toggle Button (not in the specifications) No No No No Yes [24] Yes [25]
Floating Action Button (AKA FAB) Yes [26] Yes [10] Yes [27] Yes [28] Yes [13] Yes [29]
Extended FAB No No No Yes [28] No Yes [30]
Cards Yes [31] Yes [32] Yes [33] Yes [34] Yes [35] Yes [36]
Chips No (no official implementation) Yes [37] Yes [38] Yes [39] Yes [40] Yes [41]
Data tables No (no official implementation) No (no official implementation) Yes [42] Yes [43] Yes [44] No
Dialogs Yes [45] Yes [46] Yes [47] Yes [48] Maybe [49] Yes [50]
Dividers No (no official implementation) Yes [51] No Yes [52] No Maybe [53]
Image lists (formerly known as grid lists in the former specifications) No Yes [54] Yes [55] Yes [56] Yes [6] Yes [57]
Lists Yes [58] Yes [59] Yes [60] Yes [61] Yes [62] Yes [63]
Menus Dropdown menu (formerly known as menu in the former specifications) Yes [64] Yes [65] Maybe [66] Yes [67] Yes [68] Yes [69]
Exposed dropdown menu (formerly known as dropdown button in the former specifications) Yes [70] Yes [71] Yes [72] Yes [73] No (no official implementation) Yes [74]
Navigation drawer Yes [75] Yes [76] Yes [77] Yes [78] Yes [6] Yes [79]
Progress indicators Linear progress indicators Yes [80] Yes [81] Yes [82] Yes [83] Yes [84] Yes [85]
Circular progress indicators No (no official implementation) Yes [86] Yes [87] Yes [88] Yes [84] No
Selection controls Checkboxes Yes [89] Yes [90] Yes [91] Yes [92] Yes [24] Yes [93]
Radio buttons Yes [94][95] Yes [96] Yes [97] Yes [98] Yes [24] Yes [99]
Switches Yes [100] Yes [101] Yes [102] Yes [103] Yes [24] Yes [104]
Sheets Standard bottom sheet No (no official implementation) Yes [105] Maybe [106] No (no official implementation) No No
Modal bottom sheet No Yes [105] No No No No
Expanding bottom sheet No No No No No No
Standard side sheet (similar to drawers) Maybe [75] Maybe [76] Maybe [77] Yes [107] Maybe [6] Maybe [79]
Modal side sheet (similar to drawers) Maybe [75] Maybe [76] Maybe [77] Yes [108] No Maybe [79]
Sliders Continuous Slider Yes [109] Yes [110] Yes [111] Maybe [112] Yes [113] Yes [114]
Discrete Slider Yes [109] Yes [110] No No No Yes [115]
Snackbars Yes [116] Yes [117] Maybe [118] Yes [119] Yes [120] Yes [121]
Tabs Fixed tabs Yes [122] Yes [123] Yes [124] Yes [125] Maybe [6] Yes [126]
Scrollable tabs Yes [122] Yes [123] Yes [124] Yes [127] Maybe [6] Yes [126]
Text fields Filled text field Maybe [128] No No Yes [129] No Yes [130]
Outlined text field Maybe [128] No No Yes [131] No Yes [132]
Tooltips Yes [133] Yes [134] Yes [135] Yes [136] Yes [137] No
  1. ^ "App Bar React component - Material-UI". Retrieved 15 December 2018.
  2. ^ "PolymerElements/paper-toolbar - webcomponents.org". Retrieved 15 December 2018.
  3. ^ "AngularJS Material - Demos > Toolbar". Retrieved 15 December 2018.
  4. ^ "Navbar - Materialize". Retrieved 15 December 2018.
  5. ^ "App Bar React component - Material-UI". Retrieved 15 December 2018.
  6. ^ a b c d e f "Material Design Lite (Layout)". Retrieved 15 December 2018.
  7. ^ "Top App Bar - Material Components for the Web". Retrieved 15 December 2018.
  8. ^ "Bottom Navigation React component - Material-UI". Retrieved 15 December 2018.
  9. ^ a b "PolymerElements/paper-button - webcomponents.org". Retrieved 15 December 2018.
  10. ^ a b c d "AngularJS Material - Demos > Button". Retrieved 15 December 2018.
  11. ^ "Buttons - Materialize". Retrieved 15 December 2018.
  12. ^ "(Text) Button React component - Material-UI". Retrieved 15 December 2018.
  13. ^ a b c d "Material Design Lite (Buttons)". Retrieved 15 December 2018.
  14. ^ "Buttons - Material Components for the Web". Retrieved 15 December 2018.
  15. ^ "(Outlined) Button React component - Material-UI". Retrieved 15 December 2018.
  16. ^ "(Outlined) Buttons - Material Components for the Web". Retrieved 15 December 2018.
  17. ^ "(Raised) Buttons - Materialize". Retrieved 15 December 2018.
  18. ^ "(Contained) Button React component - Material-UI". Retrieved 15 December 2018.
  19. ^ "(Contained) Buttons - Material Components for the Web". Retrieved 15 December 2018.
  20. ^ "Toggle Button React component - Material-UI". Retrieved 15 December 2018.
  21. ^ "PolymerElements/paper-icon-button - webcomponents.org". Retrieved 15 December 2018.
  22. ^ "(Icon) Button React component - Material-UI". Retrieved 15 December 2018.
  23. ^ "Icon Buttons - Material Components for the Web". Retrieved 15 December 2018.
  24. ^ a b c d "Material Design Lite (Toggles)". Retrieved 15 December 2018.
  25. ^ "Icon Toggle Buttons - Material Components for the Web". Retrieved 15 December 2018.
  26. ^ "PolymerElements/paper-fab - webcomponents.org". Retrieved 15 December 2018.
  27. ^ "(Floating Action) Buttons - Materialize". Retrieved 15 December 2018.
  28. ^ a b "(Floating Action) Button React component - Material-UI". Retrieved 15 December 2018.
  29. ^ "Floating Action Button - Material Components for the Web". Retrieved 15 December 2018.
  30. ^ "(Extended) Floating Action Button - Material Components for the Web". Retrieved 15 December 2018.
  31. ^ "PolymerElements/paper-card - webcomponents.org". Retrieved 15 December 2018.
  32. ^ "AngularJS Material - Demos > Card". Retrieved 15 December 2018.
  33. ^ "Cards - Materialize". Retrieved 15 December 2018.
  34. ^ "Card React component - Material-UI". Retrieved 15 December 2018.
  35. ^ "Material Design Lite (Cards)". Retrieved 15 December 2018.
  36. ^ "Cards - Material Components for the Web". Retrieved 15 December 2018.
  37. ^ "AngularJS Material - Demos > Chips". Retrieved 15 December 2018.
  38. ^ "Chips - Materialize". Retrieved 15 December 2018.
  39. ^ "Chip React component - Material-UI". Retrieved 15 December 2018.
  40. ^ "Material Design Lite (Chips)". Retrieved 15 December 2018.
  41. ^ "Chips - Material Components for the Web". Retrieved 15 December 2018.
  42. ^ "Table - Materialize". Retrieved 15 December 2018.
  43. ^ "Table React component - Material-UI". Retrieved 15 December 2018.
  44. ^ "Material Design Lite (Tables)". Retrieved 15 December 2018.
  45. ^ "PolymerElements/paper-dialog - webcomponents.org". Retrieved 15 December 2018.
  46. ^ "AngularJS Material - Demos > Dialog". Retrieved 15 December 2018.
  47. ^ "Modals - Materialize". Retrieved 15 December 2018.
  48. ^ "Dialog React component - Material-UI". Retrieved 15 December 2018.
  49. ^ "Material Design Lite (Dialogs)". Retrieved 15 December 2018.
  50. ^ "Dialogs - Material Components for the Web". Retrieved 15 December 2018.
  51. ^ "AngularJS Material - Demos > Divider". Retrieved 15 December 2018.
  52. ^ "Divider React component - Material-UI". Retrieved 15 December 2018.
  53. ^ "List (Dividers) - Material Components for the Web". Retrieved 15 December 2018.
  54. ^ "AngularJS Material - Demos > Grid List". Retrieved 15 December 2018.
  55. ^ "Grid - Materialize". Retrieved 15 December 2018.
  56. ^ "Grid List React component - Material-UI". Retrieved 15 December 2018.
  57. ^ "Grid Lists - Material Components for the Web". Retrieved 15 December 2018.
  58. ^ "PolymerElements/paper-item - webcomponents.org". Retrieved 15 December 2018.
  59. ^ "AngularJS Material - Demos > List". Retrieved 15 December 2018.
  60. ^ "Collections - Materialize". Retrieved 15 December 2018.
  61. ^ "List React component - Material-UI". Retrieved 15 December 2018.
  62. ^ "Material Design Lite (Lists)". Retrieved 15 December 2018.
  63. ^ "Lists - Material Components for the Web". Retrieved 15 December 2018.
  64. ^ "PolymerElements/paper-menu-button - webcomponents.org". Retrieved 15 December 2018.
  65. ^ "AngularJ S Material - Demos > Menu". Retrieved 15 December 2018.
  66. ^ "Dropdown - Materialize". Retrieved 15 December 2018.
  67. ^ "Menu React component - Material-UI".
  68. ^ "Material Design Lite (Menus)". Retrieved 15 December 2018.
  69. ^ "Menus - Material Components for the Web". Retrieved 15 December 2018.
  70. ^ "PolymerElements/paper-dropdown-button - webcomponents.org". Retrieved 15 December 2018.
  71. ^ "AngularJS Material - Demos > Select". Retrieved 15 December 2018.
  72. ^ "Select - Materialize". Retrieved 15 December 2018.
  73. ^ "Select React component - Material-UI". Retrieved 15 December 2018.
  74. ^ "Select Menus - Material Components for the Web". Retrieved 15 December 2018.
  75. ^ a b c "PolymerElements/paper-drawer-panel - webcomponents.org". Retrieved 15 December 2018.
  76. ^ a b c "AngularJS Material - Demos > Sidenav". Retrieved 15 December 2018.
  77. ^ a b c "Sidenav - Materialize". Retrieved 15 December 2018.
  78. ^ "Drawer React component - Material-UI". Retrieved 15 December 2018.
  79. ^ a b c "Drawers - Material Components for the Web". Retrieved 15 December 2018.
  80. ^ "PolymerElements/paper-progress - webcomponents.org". Retrieved 15 December 2018.
  81. ^ "AngularJS Material - Demos > Progress Linear". Retrieved 16 December 2018.
  82. ^ "(Linear) Preloader - Materialize". Retrieved 16 December 2018.
  83. ^ "Linear Progress React component - Material-UI". Retrieved 16 December 2018.
  84. ^ a b "Material Design Lite (Circular/Linear Progress)". Retrieved 16 December 2018.
  85. ^ "Linear Progress - Material Components for the Web". Retrieved 16 December 2018.
  86. ^ "AngularJS Material - Demos > Progress Circular". Retrieved 16 December 2018.
  87. ^ "(Circular) Preloader - Materialize". Retrieved 16 December 2018.
  88. ^ "Circular Progress React component - Material-UI". Retrieved 16 December 2018.
  89. ^ "PolymerElements/paper-checkbox - webcomponents.org". Retrieved 16 December 2018.
  90. ^ "AngularJS Material - Demos > Checkbox". Retrieved 16 December 2018.
  91. ^ "Checkboxes - Materialize". Retrieved 16 December 2018.
  92. ^ "Checkbox React component - Material-UI". Retrieved 16 December 2018.
  93. ^ "Checkboxes - Material Components for the Web". Retrieved 16 December 2018.
  94. ^ "PolymerElements/paper-radio-group - webcomponents.org". Retrieved 16 December 2018.
  95. ^ "PolymerElements/paper-radio-button - webcomponents.org". Retrieved 16 December 2018.
  96. ^ "AngularJS Material - Demos > Radio Button". Retrieved 16 December 2018.
  97. ^ "Radio Buttons - Materialize". Retrieved 16 December 2018.
  98. ^ "Radio React component - Material-UI". Retrieved 16 December 2018.
  99. ^ "Radio Buttons - Material Components for the Web". Retrieved 16 December 2018.
  100. ^ "PolymerElements/paper-toggle-button - webcomponents.org". Retrieved 16 December 2018.
  101. ^ "AngularJS Material - Demos > Switch". Retrieved 16 December 2018.
  102. ^ "Switches - Materialize". Retrieved 16 December 2018.
  103. ^ "Switch React component - Material-UI". Retrieved 16 December 2018.
  104. ^ "Switches - Material Components for the Web". Retrieved 16 December 2018.
  105. ^ a b "AngularJS Material - Demos > Bottom Sheet". Retrieved 16 December 2018.
  106. ^ "(Bottom Sheet) Modals - Materialize". Retrieved 16 December 2018.
  107. ^ "(Clipped under app bar) Drawer React component - Material-UI". Retrieved 17 December 2018.
  108. ^ "(Swipeable temporary) Drawer React component - Material-UI". Retrieved 17 December 2018.
  109. ^ a b "PolymerElements/paper-slider - webcomponents.org". Retrieved 17 December 2018.
  110. ^ a b "AngularJS Material - Demos > Slider". Retrieved 17 December 2018.
  111. ^ "Range - Materialize". Retrieved 17 December 2018.
  112. ^ "Slider React component - Material-UI". Retrieved 17 December 2018.
  113. ^ "Material Design Lite (Sliders)". Retrieved 17 December 2018.
  114. ^ "(Continuous) Sliders - Material Components for the Web". Retrieved 17 December 2018.
  115. ^ "(Discrete) Sliders - Material Components for the Web". Retrieved 17 December 2018.
  116. ^ "PolymerElements/paper-toast - webcomponents.org". Retrieved 17 December 2018.
  117. ^ "AngularJS Material - Demos > Toast".
  118. ^ "Toasts - Materialize". Retrieved 17 December 2018.
  119. ^ "Snackbar React component - Material-UI". Retrieved 17 December 2018.
  120. ^ "Material Design Lite (Snackbar)". Retrieved 17 December 2018.
  121. ^ "Snackbars - Material Components for the Web". Retrieved 17 December 2018.
  122. ^ a b "PolymerElements/paper-tab - webcomponents.org". Retrieved 17 December 2018.
  123. ^ a b "AngularJS Material - Demos > Tabs". Retrieved 17 December 2018.
  124. ^ a b "Tabs - Materialize". Retrieved 17 December 2018.
  125. ^ "(Fixed) Tabs React component - Material-UI". Retrieved 17 December 2018.
  126. ^ a b "Tab - Material Components for the Web". Retrieved 17 December 2018.
  127. ^ "(Scrollable) Tabs React component - Material-UI". Retrieved 17 December 2018.
  128. ^ a b "PolymerElements/paper-input - webcomponents.org". Retrieved 17 December 2018.
  129. ^ "(Filled) Text Field React component - Material-UI". Retrieved 17 December 2018.
  130. ^ "Text Field - Material Components for the Web". Retrieved 17 December 2018.
  131. ^ "(Outlined) Text Field React component - Material-UI". Retrieved 17 December 2018.
  132. ^ "(Outlined) Text Field - Material Components for the Web". Retrieved 17 December 2018.
  133. ^ "PolymerElements/paper-tooltip - webcomponents.org". Retrieved 17 December 2018.
  134. ^ "AngularJS Material - Demos > Tooltip". Retrieved 17 December 2018.
  135. ^ "Tooltips - Materialize". Retrieved 17 December 2018.
  136. ^ "Tooltip React component - Material-UI". Retrieved 17 December 2018.
  137. ^ "Material Design Lite (Tooltip)". Retrieved 17 December 2018.