Components

Material Components are interactive building blocks for creating a user interface.

Browse all components or select a specific platform.

App bars: bottom
App bars: bottom

App bars: bottom

A bottom app bar displays navigation and key actions at the bottom of mobile screens

App bars: top
App bars: top

App bars: top

The top app bar displays information and actions relating to the current screen

Backdrop
Backdrop

Backdrop

A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content

Banners
Banners

Banners

A banner displays a prominent message and related optional actions

Bottom navigation
Bottom navigation

Bottom navigation

Bottom navigation bars allow movement between primary destinations in an app

Buttons
Buttons

Buttons

Buttons allow users to take actions, and make choices, with a single tap

Buttons: floating action button
Buttons: floating action button

Buttons: floating action button

A floating action button (FAB) represents the primary action of a screen

Cards
Cards

Cards

Cards contain content and actions about a single subject

Checkboxes
Checkboxes

Checkboxes

Checkboxes allow the user to select one or more items from a set or turn an option on or off

Chips
Chips

Chips

Chips are compact elements that represent an input, attribute, or action

Data tables
Data tables

Data tables

Data tables display sets of data

Date pickers
Date pickers

Date pickers

Date pickers let users select a date, or a range of dates

Dialogs
Dialogs

Dialogs

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks

Dividers
Dividers

Dividers

A divider is a thin line that groups content in lists and layouts

Image lists
Image lists

Image lists

Image lists display a collection of images in an organized grid

Lists
Lists

Lists

Lists are continuous, vertical indexes of text or images

Menus
Menus

Menus

Menus display a list of choices on temporary surfaces

Navigation drawer
Navigation drawer

Navigation drawer

Navigation drawers provide access to destinations in your app

Navigation rail
Navigation rail

Navigation rail

The navigation rail provides ergonomic movement between primary destinations in an app

Progress indicators
Progress indicators

Progress indicators

Progress indicators express an unspecified wait time or display the length of a process

Radio buttons
Radio buttons

Radio buttons

Radio buttons allow the user to select one option from a set

Sheets: bottom
Sheets: bottom

Sheets: bottom

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen

Sheets: side
Sheets: side

Sheets: side

Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen

Sliders
Sliders

Sliders

Sliders allow users to make selections from a range of values

Snackbars
Snackbars

Snackbars

Snackbars provide brief messages about app processes at the bottom of the screen

Switches
Switches

Switches

Switches toggle the state of a single setting on or off

Tabs
Tabs

Tabs

Tabs organize content across different screens, data sets, and other interactions

Text fields
Text fields

Text fields

Text fields let users enter and edit text

Time pickers
Time pickers

Time pickers

Time pickers help users select and set a specific time.

Tooltips
Tooltips

Tooltips

Tooltips display informative text when users hover over, focus on, or tap an element