Compose Material 3
Build Jetpack Compose UIs with Material Design 3, the next evolution of Material Design. Material 3 includes updated theming and components and Material You personalization features like dynamic color, and is designed to be cohesive with the new Android 12 visual style and system UI.
In this page, you'll find documentation for types, properties, and functions available in the androidx.compose.material3
package.
For more information, check out the Material Design 3 and Material You section in the Material Theming in Compose guide.
APIs | Description | |
---|---|---|
Material Theming | [MaterialTheme] | M3 theme |
Color scheme | [ColorScheme] | M3 color scheme |
[lightColorScheme] | M3 light color scheme | |
[darkColorScheme] | M3 dark color scheme | |
Dynamic color | [dynamicLightColorScheme] | M3 dynamic light color scheme |
[dynamicDarkColorScheme] | M3 dynamic dark color scheme | |
Typography | [Typography] | M3 typography |
Shape | [Shapes] | M3 shape |
APIs | Description | |
---|---|---|
Badge | [Badge] | M3 badge |
[BadgedBox] | M3 badged box | |
Bottom app bar | [BottomAppBar] | M3 bottom app bar |
Buttons | [Button] | M3 filled button |
[ElevatedButton] | M3 elevated button | |
[FilledTonalButton] | M3 filled tonal button | |
[OutlinedButton] | M3 outlined button | |
[TextButton] | M3 text button | |
Cards | [Card] | M3 filled card |
[ElevatedCard] | M3 elevated card | |
[OutlinedCard] | M3 outlined card | |
Checkbox | [Checkbox] | M3 checkbox |
[TriStateCheckbox] | M3 indeterminate checkbox | |
Chips | [AssistChip] | M3 assist chip |
[ElevatedAssistChip] | M3 elevated assist chip | |
[FilterChip] | M3 filter chip | |
[ElevatedFilterChip] | M3 elevated filter chip | |
[InputChip] | M3 input chip | |
[SuggestionChip] | M3 suggestion chip | |
[ElevatedSuggestionChip] | M3 elevated suggestion chip | |
Dialogs | [AlertDialog] | M3 basic dialog |
Dividers | [Divider] | M3 divider |
Extended FAB | [ExtendedFloatingActionButton] | M3 extended FAB |
FAB | [FloatingActionButton] | M3 FAB |
[SmallFloatingActionButton] | M3 small FAB | |
[LargeFloatingActionButton] | M3 large FAB | |
Icon button | [IconButton] | M3 standard icon button |
[IconToggleButton] | M3 standard icon toggle button | |
[FilledIconButton] | M3 filled icon button | |
[FilledIconToggleButton] | M3 filled icon toggle button | |
[FilledTonalIconButton] | M3 filled tonal icon button | |
[FilledTonalIconToggleButton] | M3 filled tonal icon toggle button | |
[OutlinedIconButton] | M3 outlined icon button | |
[OutlinedIconToggleButton] | M3 outlined icon toggle button | |
Menus | [DropdownMenu] | M3 menu |
[DropdownMenuItem] | M3 menu item | |
[ExposedDropdownMenuBox] | M3 exposed dropdown menu | |
Navigation bar | [NavigationBar] | M3 navigation bar |
[NavigationBarItem] | M3 navigation bar item | |
Navigation drawer | [ModalNavigationDrawer] | M3 modal navigation drawer |
[PermanentNavigationDrawer] | M3 permanent standard navigation drawer | |
[DismissibleNavigationDrawer] | M3 dismissible standard navigation drawer | |
[NavigationDrawerItem] | M3 navigation drawer item | |
Navigation rail | [NavigationRail] | M3 navigation rail |
[NavigationRailItem] | M3 navigation rail item | |
Progress indicators | [LinearProgressIndicator] | M3 linear progress indicator |
[CircularProgressIndicator] | M3 circular progress indicator | |
Radio button | [RadioButton] | M3 radio button |
Sliders | [Slider] | M3 slider |
[RangeSlider] | M3 range slider | |
Snackbars | [Snackbar] | M3 snackbar |
Switch | [Switch] | M3 switch |
Tabs | [Tab] | M3 tab |
[LeadingIconTab] | M3 leading icon tab | |
[TabRow] | M3 tab row | |
[ScrollableTabRow] | M3 scrollable tab row | |
Text fields | [TextField] | M3 filled text field |
[OutlinedTextField] | M3 outlined text field | |
Top app bar | [CenterAlignedTopAppBar] | M3 center-aligned top app bar |
[SmallTopAppBar] | M3 small top app bar | |
[MediumTopAppBar] | M3 medium top app bar | |
[LargeTopAppBar] | M3 large top app bar |
APIs | Description | |
---|---|---|
Surfaces | [Surface] | M3 surface |
Scaffold | [Scaffold] | M3 layout |
APIs | Description | |
---|---|---|
Icon | [Icon] | M3 icon |
Text | [Text] | M3 text |
Also check out the androidx.compose.material.icons
package.