# Components

Every md-gb element of Material Web 3.0: buttons, pickers, progress indicators, navigation, sheets and more, each with live examples and API.

The md-gb elements: interactive building blocks for your interface, each with live examples, guidelines and its API.

## Buttons

- [Button Group](/material-web/3.0/components/button-group/): A button group arranges related buttons and can manage their selection, density and overflow.
- [Buttons](/material-web/3.0/components/button/): Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
- [FAB menu](/material-web/3.0/components/fab-menu/): A FAB menu opens from a FAB to show several related actions, and the FAB becomes its close button.
- [Floating action button (FAB)](/material-web/3.0/components/fab/): A FAB represents the most important action on a screen, and an extended FAB adds a text label.
- [Icon Buttons](/material-web/3.0/components/icon-button/): Icon buttons help people take supplementary actions with a single tap.
- [Segmented button](/material-web/3.0/components/segmented-button/): A segmented button set lets people pick one or several options from two to five segments, such as a time range or a view.
- [Split button](/material-web/3.0/components/split-button/): A split button pairs a main action with a trailing button that opens a menu of related actions.

## Date & time pickers

- [Date picker](/material-web/3.0/components/date-picker/): A date picker lets people select a date or a range of dates.
- [Time picker](/material-web/3.0/components/time-picker/): Time pickers let people choose an hour and minute on a clock dial, or type them into fields.

## Loading & progress

- [Loading indicator](/material-web/3.0/components/loading-indicator/): A loading indicator shows that a short process is running, with a shape that morphs through Material shapes while it turns.
- [Progress indicators](/material-web/3.0/components/progress/): Progress indicators inform people about the status of ongoing processes, such as loading an app or submitting a form.
- [Pull to refresh](/material-web/3.0/components/pull-to-refresh/): A pull to refresh container lets people pull its content down to reload it, with a loading indicator that shows progress.

## Navigation

- [Navigation Bar](/material-web/3.0/components/navigation-bar/): A navigation bar lets people switch between a small number of top-level destinations, and can hide as the page scrolls.
- [Navigation Drawer](/material-web/3.0/components/navigation-drawer/): A Material Design navigation drawer.
- [Navigation Rail](/material-web/3.0/components/navigation-rail/): A navigation rail lets people switch between top-level destinations on larger windows, and expands to show full labels.

## Sheets

- [Sheets](/material-web/3.0/components/sheets/): Sheets show supplementary content and actions anchored to the bottom or the side of the window.

## All other components

- [App Bar](/material-web/3.0/components/app-bar/): An app bar sits at the top of a screen and shows its title, navigation and actions, and can hide or compress as the page scrolls.
- [Badge](/material-web/3.0/components/badge/): A badge shows a small dot or a count to signal new or changed information.
- [Card](/material-web/3.0/components/card/): A card contains content and actions about a single subject.
- [Carousel](/material-web/3.0/components/carousel/): A carousel is a scrollable list of visual items that change size as they move through the layout.
- [Checkbox](/material-web/3.0/components/checkbox/): Checkboxes let people select one or more items from a set, or turn an option on or off.
- [Chips](/material-web/3.0/components/chip/): Chips help people enter information, make selections, filter content, or trigger actions.
- [Dialogs](/material-web/3.0/components/dialog/): Dialogs provide important prompts in a user flow.
- [Divider](/material-web/3.0/components/divider/): A divider is a thin line that groups content in lists and containers.
- [Lists](/material-web/3.0/components/list/): Lists are continuous, vertical indexes of text and images, with optional selection, reordering, expanding and swipe actions.
- [Menus](/material-web/3.0/components/menu/): Menus show a temporary set of actions or choices, opened from a button, a text field or a context.
- [Radio](/material-web/3.0/components/radio/): Radio buttons let people select one option from a set of options.
- [Search](/material-web/3.0/components/search/): A search bar lets people enter a query and find matching results, with a search view that shows suggestions and results.
- [Select](/material-web/3.0/components/select/): Select menus let people choose one option from a list that opens on a temporary surface.
- [Sliders](/material-web/3.0/components/slider/): Sliders let people view and select a value, or a range of values, along a track.
- [Snackbar](/material-web/3.0/components/snackbar/): Snackbars tell people about a process an app has performed or will perform, without interrupting them.
- [Switch](/material-web/3.0/components/switch/): Switches toggle the state of an item on or off.
- [Tabs](/material-web/3.0/components/tabs/): Tabs organize groups of related content that are at the same level of hierarchy.
- [Text field](/material-web/3.0/components/text-field/): Text fields let people enter and edit text.
- [Toolbar](/material-web/3.0/components/toolbar/): A toolbar holds actions that relate to the content on the screen, docked to an edge or floating above it.
- [Tooltip](/material-web/3.0/components/tooltip/): Tooltips add context to a button or other element, as a short plain label or a richer panel with a subhead and actions.