### Material components in Compose

Jetpack Compose offers an implementation of Material Design, a comprehensive design system for creating digital interfaces. You can use composable functions to implement Material components.  
![](http://developer.android.com/static/develop/ui/compose/images/components/hero.svg)

## Actions

[![](http://developer.android.com/static/develop/ui/compose/images/components/buttons-landing.svg)](http://developer.android.com/develop/ui/compose/components/button)  

### [Buttons](http://developer.android.com/develop/ui/compose/components/button)

Buttons prompt most actions in a UI.  
[Learn more](http://developer.android.com/develop/ui/compose/components/button)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/fab-landing.svg)](http://developer.android.com/develop/ui/compose/components/button)  

### [Floating action button](http://developer.android.com/develop/ui/compose/components/button)

Floating actions buttons (FABs) help users take primary actions.  
[Learn more](http://developer.android.com/develop/ui/compose/components/button)[![](http://developer.android.com/static/develop/ui/compose/images/components/icon-button-landing.svg)](http://developer.android.com/develop/ui/compose/components/icon-button)  

### [Icon button](http://developer.android.com/develop/ui/compose/components/icon-button)

Icon buttons help users take minor actions with one tap.  
[Learn more](http://developer.android.com/develop/ui/compose/components/icon-button)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/segmented-button-landing.svg)](http://developer.android.com/develop/ui/compose/components/segmented-button)  

### [Segmented button](http://developer.android.com/develop/ui/compose/components/segmented-button)

Segmented buttons help users select options, switch views, or sort elements.  
[Learn more](http://developer.android.com/develop/ui/compose/components/segmented-button)

## Communication

[![](http://developer.android.com/static/develop/ui/compose/images/components/badge-landing.svg)](http://developer.android.com/develop/ui/compose/components/badges)  

### [Badges](http://developer.android.com/develop/ui/compose/components/badges)

Badges show notifications, counts, or status information on navigation items and icons.  
[Learn more](http://developer.android.com/develop/ui/compose/components/badges)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/progress-landing.svg)](http://developer.android.com/develop/ui/compose/components/progress)  

### [Progress indicators](http://developer.android.com/develop/ui/compose/components/progress)

Progress indicators express an unspecified wait time or display the duration of a process.  
[Learn more](http://developer.android.com/develop/ui/compose/components/progress)[![](http://developer.android.com/static/develop/ui/compose/images/components/snackbar-landing.svg)](http://developer.android.com/develop/ui/compose/components/snackbar)  

### [Snackbar](http://developer.android.com/develop/ui/compose/components/snackbar)

Snackbars show short updates about app processes at the bottom of the screen.  
[Learn more](http://developer.android.com/develop/ui/compose/components/snackbar)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/tooltip-landing.svg)](http://developer.android.com/develop/ui/compose/components/tooltip)  

### [Tooltips](http://developer.android.com/develop/ui/compose/components/tooltip)

Tooltips display brief labels or messages.  
[Learn more](http://developer.android.com/develop/ui/compose/components/tooltip)

## Containment

[![](http://developer.android.com/static/develop/ui/compose/images/components/bottom-sheet-landing.svg)](http://developer.android.com/develop/ui/compose/components/bottom-sheets)  

### [Bottom sheets](http://developer.android.com/develop/ui/compose/components/bottom-sheets)

Bottom sheets show secondary content anchored to the bottom of the screen.  
[Learn more](http://developer.android.com/develop/ui/compose/components/bottom-sheets)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/card-landing.svg)](http://developer.android.com/develop/ui/compose/components/card)  

### [Cards](http://developer.android.com/develop/ui/compose/components/card)

Cards display content and actions about a single subject.  
[Learn more](http://developer.android.com/develop/ui/compose/components/card)[![](http://developer.android.com/static/develop/ui/compose/images/components/carousel-landing.svg)](http://developer.android.com/develop/ui/compose/components/carousel)  

### [Carousel](http://developer.android.com/develop/ui/compose/components/carousel)

Carousels show a collection of items that can be scrolled on and off the screen.  
[Learn more](http://developer.android.com/develop/ui/compose/components/carousel)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/dialog-landing.svg)](http://developer.android.com/develop/ui/compose/components/dialog)  

### [Dialogs](http://developer.android.com/develop/ui/compose/components/dialog)

Dialogs provide important prompts in a user flow.  
[Learn more](http://developer.android.com/develop/ui/compose/components/dialog)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/divider-landing.svg)](http://developer.android.com/develop/ui/compose/components/divider)  

### [Dividers](http://developer.android.com/develop/ui/compose/components/divider)

Dividers are thin lines that group content in lists or other containers.  
[Learn more](http://developer.android.com/develop/ui/compose/components/divider)[![](http://developer.android.com/static/develop/ui/compose/images/components/list-landing.svg)](http://developer.android.com/develop/ui/compose/lists)  

### [Lists](http://developer.android.com/develop/ui/compose/lists)

Lists are continuous, vertical indexes of text and images.  
[Learn more](http://developer.android.com/develop/ui/compose/lists)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/scaffold-landing.svg)](http://developer.android.com/develop/ui/compose/components/scaffold)  

### [Scaffold](http://developer.android.com/develop/ui/compose/components/scaffold)

Scaffolds hold together different parts of the UI in complex user interfaces.  
[Learn more](http://developer.android.com/develop/ui/compose/components/scaffold)

## Navigation

[![](http://developer.android.com/static/develop/ui/compose/images/components/app-bar-landing.svg)](http://developer.android.com/develop/ui/compose/components/app-bars)  

### [App bars](http://developer.android.com/develop/ui/compose/components/app-bars)

App bars are placed at the top of a screen to help users navigate.  
[Learn more](http://developer.android.com/develop/ui/compose/components/app-bars)[![](http://developer.android.com/static/develop/ui/compose/images/components/nav-bar-landing.svg)](http://developer.android.com/develop/ui/compose/components/navigation-bar)  

### [Navigation bar](http://developer.android.com/develop/ui/compose/components/navigation-bar)

Navigation bars let people switch between UI views on smaller devices.  
[Learn more](http://developer.android.com/develop/ui/compose/components/navigation-bar)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/drawers-landing.svg)](http://developer.android.com/develop/ui/compose/components/drawer)  

### [Navigation drawer](http://developer.android.com/develop/ui/compose/components/drawer)

Navigation drawers let people switch between UI views on larger devices.  
[Learn more](http://developer.android.com/develop/ui/compose/components/drawer)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/nav-rail-landing.svg)](http://developer.android.com/develop/ui/compose/components/navigation-rail)  

### [Navigation rail](http://developer.android.com/develop/ui/compose/components/navigation-rail)

Navigation rails let people switch between UI views on mid-size devices.  
[Learn more](http://developer.android.com/develop/ui/compose/components/navigation-rail)[![](http://developer.android.com/static/develop/ui/compose/images/components/tabs-landing.svg)](http://developer.android.com/develop/ui/compose/components/tabs)  

### [Tabs](http://developer.android.com/develop/ui/compose/components/tabs)

Tabs organize content across different screens and views.  
[Learn more](http://developer.android.com/develop/ui/compose/components/tabs)

## Selection

[![](http://developer.android.com/static/develop/ui/compose/images/components/checkbox-landing.svg)](http://developer.android.com/develop/ui/compose/components/checkbox)  

### [Checkbox](http://developer.android.com/develop/ui/compose/components/checkbox)

Checkboxes let users select one or more items from a list, or turn an item on or off.  
[Learn more](http://developer.android.com/develop/ui/compose/components/checkbox)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/chip-landing.svg)](http://developer.android.com/develop/ui/compose/components/chip)  

### [Chips](http://developer.android.com/develop/ui/compose/components/chip)

Chips help people enter information, make selections, filter content, or trigger actions.  
[Learn more](http://developer.android.com/develop/ui/compose/components/chip)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/date-picker-landing.svg)](http://developer.android.com/develop/ui/compose/components/datepickers)  

### [Date picker](http://developer.android.com/develop/ui/compose/components/datepickers)

Date pickers let people select a date, or a range of dates.  
[Learn more](http://developer.android.com/develop/ui/compose/components/datepickers)[![](http://developer.android.com/static/develop/ui/compose/images/components/menu-landing.svg)](http://developer.android.com/develop/ui/compose/components/menu)  

### [Menus](http://developer.android.com/develop/ui/compose/components/menu)

Menus display a list of choices on a temporary surface.  
[Learn more](http://developer.android.com/develop/ui/compose/components/menu)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/radio-button-landing.svg)](http://developer.android.com/develop/ui/compose/components/radio-button)  

### [Radio button](http://developer.android.com/develop/ui/compose/components/radio-button)

Radio buttons let people select one option from a set of options.  
[Learn more](http://developer.android.com/develop/ui/compose/components/radio-button)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/slider-landing.svg)](http://developer.android.com/develop/ui/compose/components/slider)  

### [Sliders](http://developer.android.com/develop/ui/compose/components/slider)

Sliders let users make selectios from a range of values.  
[Learn more](http://developer.android.com/develop/ui/compose/components/slider)[![](http://developer.android.com/static/develop/ui/compose/images/components/switch-landing.svg)](http://developer.android.com/develop/ui/compose/components/switch)  

### [Switch](http://developer.android.com/develop/ui/compose/components/switch)

Switches toggle the selection of an item on or off.  
[Learn more](http://developer.android.com/develop/ui/compose/components/switch)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/time-picker-landing.svg)](http://developer.android.com/develop/ui/compose/components/time-pickers)  

### [Time pickers](http://developer.android.com/develop/ui/compose/components/time-pickers)

Time pickers help users select and set a specific time.  
[Learn more](http://developer.android.com/develop/ui/compose/components/time-pickers)

## Text inputs

[![](http://developer.android.com/static/develop/ui/compose/images/components/search-bar-landing.svg)](http://developer.android.com/develop/ui/compose/components/search-bar)  

### [Search](http://developer.android.com/develop/ui/compose/components/search-bar)

Search lets users enter a keyword or phrase to get relevant information.  
[Learn more](http://developer.android.com/develop/ui/compose/components/search-bar)  
[![](http://developer.android.com/static/develop/ui/compose/images/components/text-field-landing.svg)](http://developer.android.com/develop/ui/compose/text/user-input)  

### [Text fields](http://developer.android.com/develop/ui/compose/text/user-input)

Text fields let users enter text into a UI.  
[Learn more](http://developer.android.com/develop/ui/compose/text/user-input)[list_alt](http://developer.android.com/develop/ui/compose/lists)  

### [Lists and grids](http://developer.android.com/develop/ui/compose/lists)

Learn how to use basic layouts in Compose.  
[Learn more](http://developer.android.com/develop/ui/compose/lists)  
[folder_open](http://developer.android.com/develop/ui/compose/resources)  

### [Resources](http://developer.android.com/develop/ui/compose/resources)

Learn how to manage resources such as strings and images.  
[Learn more](http://developer.android.com/develop/ui/compose/resources)