--- url: /components.md description: >- 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. --- # 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. ![Components](/assets/41ad0990-mroehtir-component-overview.BZL4LElq.webp) ## Buttons ::: tip Do [![](/assets/1163dfa4-mo9w2k1e-button1.BTzvoshF.webp)](components/button-groups/overview.md) Button groups organize buttons and add interactions between them ::: ::: tip Do [![](/assets/8bb53bda-mo9w3u7m-button2.CbBghC8j.webp)](components/buttons/overview.md) Buttons prompt most actions in a UI ::: ::: tip Do [![](/assets/2dd61ec0-mo9w4z3r-button3.B6w4Up8m.webp)](components/extended-fab/overview.md) Extended floating action buttons (extended FABs) help people take primary actions ::: ::: tip Do [![](/assets/4dc761ea-mo9w664s-button4.DPB_IKq3.webp)](components/fab-menu/overview.md) The floating action button (FAB) menu opens from a FAB to display multiple related actions ::: ::: tip Do [![](/assets/78b73abe-mo9w79nz-button5.CyS8W_pT.webp)](components/floating-action-button/overview.md) Floating action buttons (FABs) help people take primary actions ::: ::: tip Do [![](/assets/4c395634-mo9w85qq-button6.DhrDmztp.webp)](components/icon-buttons/overview.md) Icon buttons help people take actions with a single tap ::: ::: tip Do [![](/assets/4e8b2453-mo9w97va-button7.Dn_QCp3O.webp)](components/segmented-buttons/overview.md) Segmented buttons help people select options, switch views, or sort elements ::: ::: tip Do [![](/assets/171ad7ab-mo9wcqsh-button8.CPGaT7tY.webp)](components/split-button/overview.md) Split buttons open a menu to give people more options related to an action ::: ## Date & time pickers ::: tip Do [![](/assets/f8f50fc6-mo9wgndb-date1.DWOLGtoQ.webp)](components/date-pickers/overview.md) Date pickers let people select a date, or a range of dates ::: ::: tip Do [![](/assets/b57fe7d2-mo9whr41-date2.CvTE2dnB.webp)](components/time-pickers/overview.md) Time pickers help people select and set a specific time ::: ## Loading & progress ::: tip Do [![](/assets/77ea6b0c-mo9womcb-loading1.x4UZ84oB.webp)](components/loading-indicator/overview.md) Loading indicators show the progress of a process for a short wait time ::: ::: tip Do [![](/assets/d9b36a8e-mo9ws73e-loading2.DgLhkAh7.webp)](components/progress-indicators/overview.md) Progress indicators show the status of a process in real time ::: ## Navigation ::: tip Do [![](/assets/3776bfdd-mo9yuwsx-nav1.BaxH17g8.webp)](components/navigation-bar/overview.md) Navigation bars let people switch between UI views on smaller devices ::: ::: tip Do [![](/assets/e37114c3-mo9yy4bf-nav2.0IKkTwQD.webp)](components/navigation-drawer/overview.md) Navigation drawers let people switch between UI views on larger devices ::: ::: tip Do [![](/assets/3ccbc9e5-mo9yzddn-nav3.D3EWc4LI.webp)](components/navigation-rail/overview.md) Navigation rails let people switch between UI views on mid-sized devices ::: ## Sheets ::: tip Do [![](/assets/48acb6ea-mob3ive3-sheet1.CaxW0Cq1.webp)](components/bottom-sheets/overview.md) Bottom sheets show secondary content anchored to the bottom of the screen ::: ::: tip Do [![](/assets/a12e0324-mob3lfia-sheet2.DcpGmX9C.webp)](components/side-sheets/overview.md) Side sheets show secondary content anchored to the side of the screen ::: ## All other components ::: tip Do [![](/assets/56955eeb-mob407ys-appbar.B7Ecz2Rb.webp)](components/app-bars/overview.md) App bars are placed at the top of the screen to help people navigate through a product ::: ::: tip Do [![](/assets/e5901d8b-mob48l13-badges.ywqYw2u3.webp)](components/badges/overview.md) Badges show notifications, counts, or status information on navigation items and icons ::: ::: tip Do [![](/assets/09aae24d-mob49v2b-cards.DpFcZhn_.webp)](components/cards/overview.md) Cards display content and actions about a single subject ::: ::: tip Do [![](/assets/0f8cf6e1-mob4b901-carousal.7nDk-0kq.webp)](components/carousel/overview.md) Carousels show a collection of items that can be scrolled on and off the screen ::: ::: tip Do [![](/assets/7e691179-mob4h6pe-checkbox.DjUWfvKO.webp)](components/checkbox/overview.md) Checkboxes let users select one or more items from a list, or turn an item on or off ::: ::: tip Do [![](/assets/4ed4c4be-mob4iwq0-chips.kKj1dGE-.webp)](components/chips/overview.md) Chips help people enter information, make selections, filter content, or trigger actions ::: ::: tip Do [![](/assets/60ee58da-mob4kat8-dialog.C7xqY4Lt.webp)](components/dialogs/overview.md) Dialogs provide important prompts in a user flow ::: ::: tip Do [![](/assets/98f4b77b-mob54kj4-divider.dcHc-zYw.webp)](components/divider/overview.md) Dividers are thin lines that group content in lists or other containers ::: ::: tip Do [![](/assets/20d9b1b2-mob55rrx-lists.tJzfFZkB.webp)](components/lists/overview.md) Lists are continuous, vertical indexes of text and images ::: ::: tip Do [![](/assets/d7b4a7e7-mob57lyr-menus.By2HJUIW.webp)](components/menus/overview.md) Menus display a list of choices on a temporary surface ::: ::: tip Do [![](/assets/edd83bf3-mob5k2ha-radio.Dh8zWTFy.webp)](components/radio-button/overview.md) Radio buttons let people select one option from a set of options ::: ::: tip Do [![](/assets/e6840236-mob5l1uc-search.CSk13EHq.webp)](components/search/overview.md) Search lets people enter a keyword or phrase to get relevant information ::: ::: tip Do [![](/assets/b230584c-mob5s28d-slider.DLLot8Gv.webp)](components/sliders/overview.md) Sliders allow users to make selections from a range of values ::: ::: tip Do [![](/assets/b3a27f57-mob5vjbm-snackbar.DE31njDW.webp)](components/snackbar/overview.md) Snackbars show short updates about app processes at the bottom of the screen ::: ::: tip Do [![](/assets/d04cf812-mob5wlkw-switchbar.D456PzUz.webp)](components/switch/overview.md) Switches toggle the selection of an item on and off ::: ::: tip Do [![](/assets/8663fd0a-mob5y0sv-tabs.CFmnjG34.webp)](components/tabs/overview.md) Tabs organize content across different screens and views ::: ::: tip Do [![](/assets/03ba445e-mob6026i-textfield.PCqD-o76.webp)](components/text-fields/overview.md) Text fields let users enter text into a UI ::: ::: tip Do [![](/assets/f3216642-mob6150l-toolbars.9FNeV4xU.webp)](components/toolbars/overview.md) Toolbars display frequently used actions relevant to the current page ::: ::: tip Do [![](/assets/ccdb03d2-mob62i9n-tooltips.bqDjZoeb.webp)](components/tooltips/overview.md) Tooltips display brief labels or messages :::