Components
Components are interactive building blocks for creating a 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.
Common ButtonsButtons prompt most actions in a UI
Extended FABExtended floating action buttons (extended FABs) help people take primary actions
Floating action buttonsFloating action buttons (FABs) help people take primary actions
Icon buttonsIcon buttons help people take minor actions with one tap
Segmented buttonSegmented buttons help people select options, switch views, or sort elements
Communication
Communication components provide helpful information.
BadgesBadges show notifications, counts, or status information on navigation items and icons
Progress indicatorsProgress indicators show the status of a process in real time
SnackbarSnackbars show short updates about app processes at the bottom of the screen
TooltipsTooltips display brief labels or messages
Containment
Containment components hold information and actions – including other components like buttons, menus, or chips.
Bottom sheetsBottom sheets show secondary content anchored to the bottom of the screen
CardsCards display content and actions about a single subject
CarouselCarousels show a collection of items that can be scrolled on and off the screen
DialogsDialogs provide important prompts in a user flow
DividerDividers are thin lines that group content in lists or other containers
ListsLists are continuous, vertical indexes of text and images
Side sheetsSide sheets show secondary content anchored to the side of the screen
Navigation
Navigation components help people move through the UI.
Bottom app barBottom app bars display navigation and key actions at the bottom of mobile and tablet screens
Navigation barNavigation bars let people switch between UI views on smaller devices
Navigation drawerNavigation drawers let people switch between UI views on larger devices
Navigation railNavigation rails let people switch between UI views on mid-sized devices
SearchSearch lets people enter a keyword or phrase to get relevant information
TabsTabs organize content across different screens and views
Top app barTop app bars display navigation, actions, and text at the top of a screen
Selection
Selection components let people specify choices.
CheckboxCheckboxes let users select one or more items from a list, or turn an item on or off
ChipsChips help people enter information, make selections, filter content, or trigger actions
Date pickersDate pickers let people select a date, or a range of dates
MenusMenus display a list of choices on a temporary surface
Radio buttonRadio buttons let people select one option from a set of options
SlidersSliders let users make selections from a range of values
SwitchSwitches toggle the selection of an item on or off
Time pickersTime pickers help users select and set a specific time
Text inputs
Text input components let people enter and edit text.
Text fieldsText fields let users enter text into a UI