Components

Components are interactive building blocks for creating an user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input.

actions

Action components help people achieve an aim.

Buttons

Common buttons prompt most actions in a UI

Floating Action Buttons

Floating action buttons (FABs) help people take primary actions

Icon buttons

Icon buttons help people take minor actions with one tap

Segmented buttons

Segmented buttons help people select options, switch views, or sort elements

communication

Communication components provide helpful information.

Badges

Badges show notifications, counts, or status information on navigation items and icons

Progress indicators

Progress indicators show the status of a process in real time

Snackbar

Snackbars show short updates about app processes at the bottom of the screen

Tooltips

Communication components provide helpful information

containment

Containment components hold information and actions - including other components like buttons, menus, or chips.

Cards

Cards display content and actions about a single subject

Dialogs

Dialogs provide important prompts in a user flow

Divider

Dividers are thin lines that group content in lists or other containers

Lists

Lists are continuous, vertical indexes of text and images

navigation

Navigation components help people move through the UI.

Bottom app bar

Bottom app bars display navigation and key actions at the bottom of mobile and tablet screens

Navigation bar

Navigation bars let people switch between UI views on smaller devices

Navigation drawer

Navigation drawers let people switch between UI views on larger devices

Navigation rail

Navigation rails let people switch between UI views on mid-sized devices

Search

Search lets people enter a keyword or phrase to get relevant information

Tabs

Tabs organize content across different screens and views

Top app bars

Top app bars display navigation, actions, and text at the top of a screen

selection

Selection components let people specify choices.

Checkbox

Checkboxes let users select one or more items from a list, or turn an item on or off

Chips

Chips help people enter information, make selections, filter content, or trigger actions

Radio button

Radio buttons let people select one option from a set of options

Select

Selects let users select one or more items from a list.

Sliders

Sliders let users make selections from a range of values

Switch