Using Web Components with Material 3

Google is working on new web components that implement the Material 3 design. On this page we want to give you a peak at these Material 3 web components, not just showing each component but also how to use them in a bigger context. Let us know what you think at

Warning: The Material 3 web components are currently under heavy development and are not ready for production.



Floating action button (FAB)

Currently, these Material 3 web components use Material Icons. In the future, Google wants to use Material Symbols.


Navigation bar & tab

Segmented button



Text field