Components
Material Components are interactive building blocks for creating a user interface.
Browse all components or select a specific platform.
App bars: bottom
A bottom app bar displays navigation and key actions at the bottom of mobile screens
App bars: top
The top app bar displays information and actions relating to the current screen
Backdrop
A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content
Banners
A banner displays a prominent message and related optional actions
Bottom navigation
Bottom navigation bars allow movement between primary destinations in an app
Buttons
Buttons allow users to take actions, and make choices, with a single tap
Buttons: floating action button
A floating action button (FAB) represents the primary action of a screen
Cards
Cards contain content and actions about a single subject
Checkboxes
Checkboxes allow the user to select one or more items from a set or turn an option on or off
Chips
Chips are compact elements that represent an input, attribute, or action
Data tables
Data tables display sets of data
Date pickers
Date pickers let users select a date, or a range of dates
Dialogs
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks
Dividers
A divider is a thin line that groups content in lists and layouts
Image lists
Image lists display a collection of images in an organized grid
Lists
Lists are continuous, vertical indexes of text or images
Menus
Menus display a list of choices on temporary surfaces
Navigation drawer
Navigation drawers provide access to destinations in your app
Navigation rail
The navigation rail provides ergonomic movement between primary destinations in an app
Progress indicators
Progress indicators express an unspecified wait time or display the length of a process
Radio buttons
Radio buttons allow the user to select one option from a set
Sheets: bottom
Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen
Sheets: side
Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen
Sliders
Sliders allow users to make selections from a range of values
Snackbars
Snackbars provide brief messages about app processes at the bottom of the screen
Switches
Switches toggle the state of a single setting on or off
Tabs
Tabs organize content across different screens, data sets, and other interactions
Text fields
Text fields let users enter and edit text
Time pickers
Time pickers help users select and set a specific time.
Tooltips
Tooltips display informative text when users hover over, focus on, or tap an element