Quick guides collection
Display interactive components
Choose the right component for your UI and see how to implement it in your app.
Create a scaffold component to hold the UI together
A fundamental structure that provides a standardized platform for complex user interfaces. Scaffolds hold together different parts of the UI, such as app bars and floating action buttons, giving apps a coherent look and feel.
Display an app bar
Containers provide the user access to key features and navigation items. There are two types of app bars, top app bars and bottom app bars.
Create a button
These fundamental components allow users to trigger a defined action. There are five types of buttons. View the appearance of each of the five button types, as well as where you should use them, and see how to implement them.
Create a floating action button (FAB
A high-emphasis button that lets users perform a primary action in an application. This button component promotes a single, focused action that is the most common pathway a user might take and is typically found anchored to the bottom right of the screen.
Create a card as a container
Acts as a Material Design container for your UI. Cards typically present a single coherent piece of content. It is the focus on portraying a single piece of content that distinguishes Card from other containers.
Create a chip to represent complex entities
A compact, interactive UI element that represents complex entities such as a contact or tag, often with an icon and label. Chips can be checkable, dismissible, or clickable.
Display pop-up messages or requests for user input
Displays pop up messages or requests user input on a layer above the main app content. This component creates an interruptive UI experience to capture user attention.
Create a progress indicator
Visually surfaces the status of an operation. Using motion to bring to the user's attention how near completion the process is, such as loading or processing data, these indicators can signify that processing is taking place, without indicating nearness to completion.
Create a slider for a range of values
Enables users to make selections from a range of values along a continuum, such as setting audio volume or filtering graph data across a range of prices.
Add a switch that users can toggle
Enables users to toggle between two states. Users can drag or click a switch's thumb to change the current state.
Create a bottom sheet
Shows secondary content anchored to the bottom of the screen. You can use standard or modal bottom sheets to show secondary content to users.
Create a slide-in menu with the navigation drawer component
A slide-in menu that lets users navigate to various sections of your app. Users can activate it by swiping from the side or tapping a menu icon.
Create a notification with a snackbar
Shows a brief notification that at the bottom of the screen. This can provide feedback about an operation or action without interrupting the user experience. Snackbars disappear after a few seconds. The user can also dismiss them manually.
Display a list or grid
Display and arrange sets of items efficiently with lists and grids.
Have questions or feedback
Go to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts.