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

App bars: bottom

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

App bars: top

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

Backdrop

A banner displays a prominent message and related optional actions.

Banners

Bottom navigation bars allow movement between primary destinations in an app.

Bottom navigation

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

Buttons

Cards contain content and actions about a single subject.

Cards

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Checkboxes

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

Chips

Data tables display sets of data across rows and columns.

Data tables

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

Date pickers

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

Dialogs

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

Dividers

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

Buttons: floating action button

Image lists display a collection of images in an organized grid.

Image lists

Lists are continuous, vertical indexes of text or images.

Lists

Menus display a list of choices on temporary surfaces.

Menus

Navigation drawers provide access to destinations in your app.

Navigation drawer

Navigation rails provide ergonomic movement between primary destinations in apps.

Navigation rail

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

Progress indicators

Radio buttons allow users to select one option from a set.

Radio buttons

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

Sheets: bottom

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

Sheets: side

Sliders allow users to make selections from a range of values.

Sliders

Snack bars provide brief messages about app processes at the bottom of the screen.

Snackbars

Switches toggle the state of a single item on or off.

Switches

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

Tabs

Text fields let users enter and edit text.

Text fields

Time pickers help users select and set a specific time.

Time pickers

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

Color scheme