# Module root

Compose Material 3

# Package androidx.compose.material3

Build Jetpack Compose UIs with <a href="https://m3.material.io" class="external" target="_blank">Material Design 3</a>, 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.

![Material You image](https://developer.android.com/images/reference/androidx/compose/material3/material-you.png)

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 <a href="https://developer.android.com/jetpack/compose/themes/material#material3" class="external" target="_blank">Material Design 3 and Material You</a> section in the Material Theming in Compose guide.

## Overview

### Theming

Material 3 makes brand expression in an interface simpler and more beautiful than ever before, with <a href="https://m3.material.io/styles/color/overview" class="external" target="_blank">color</a> and <a href="https://m3.material.io/styles/typography/overview" class="external" target="_blank">typography</a> theming.

|      | **APIs** | **Description** |
| ---- | -------- | --------------- |
| **Material Theming** | [MaterialTheme] | M3 theme |
| **Color scheme** | [ColorScheme] | M3 color scheme |
|  | [lightColorScheme] | Light color scheme |
|  | [darkColorScheme] | Dark color scheme |
| **Dynamic color** | [dynamicLightColorScheme] | Dynamic light color scheme |
|  | [dynamicDarkColorScheme] | Dynamic dark color scheme |
| **Typography** | [Typography] | M3 type scale |

### Components

Material 3 Components are interactive building blocks for creating a user interface.

|      | **APIs** | **Description** |
| ---- | -------- | --------------- |
| **Badges** | [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 card |
|  | [ElevatedCard] | M3 elevated card |
|  | [OutlinedCard] | M3 outlined card |
| **Checkboxes** | [Checkbox] | M3 checkbox |
|  | [TriStateCheckbox] | M3 parent checkbox |
| **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 |
| **Menus** | [DropdownMenu] | M3 dropdown menu |
|  | [DropdownMenuItem] | M3 dropdown menu item |
| **Navigation bar** | [NavigationBar] | M3 navigation bar |
|  | [NavigationBarItem] | M3 navigation bar item |
| **Navigation drawer** | [DismissableNavigationDrawer] | M3 dismissable navigation drawer |
|  | [ModalNavigationDrawer] | M3 modal navigation drawer |
|  | [PermanentNavigationDrawer] | M3 permanent navigation drawer |
|  | [NavigationDrawerItem] | M3 navigation drawer item |
| **Navigation rail** | [NavigationRail] | M3 navigation rail |
|  | [NavigationRailItem] | M3 navigation rail item |
| **Progress indicators** | [CircularProgressIndicator] | M3 circular progress indicator |
|  | [LinearProgressIndicator] | M3 linear progress indicator |
| **Radio buttons** | [RadioButton] | M3 radio button |
| **Sliders** | [Slider] | M3 slider |
| **Snackbars** | [Snackbar] | M3 snackbar |
| **Tabs** | [Tab] | M3 tab |
|  | [LeadingIconTab] | M3 leading icon tab |
|  | [TabRow] | M3 tab row |
|  | [ScrollableTabRow] | M3 scrollable tab row |
| **Text fields** | [TextField] | M3 text field |
|  | [OutlinedTextField] | M3 outlined text field |
| **Top app bar** | [SmallTopAppBar] | M3 small top app bar |
|  | [CenterAlignedTopAppBar] | M3 center-aligned top app bar |
|  | [MediumTopAppBar] | M3 medium top app bar |
|  | [LargeTopAppBar] | M3 large top app bar |

### Surfaces and layout

Material 3 defines the qualities that can be expressed by UI regions, surfaces, and components.

|      | **APIs** | **Description** |
| ---- | -------- | --------------- |
| **Surfaces** | [Surface] | M3 surface |
| **Layout** | [Scaffold] | Basic M3 visual layout structure |

### Icons

|      | **APIs** | **Description** |
| ---- | -------- | --------------- |
| **Icon** | [Icon] | M3 icon |
| **Icon button** | [IconButton] | M3 icon button |
| **Icon toggle button** | [IconToggleButton] | M3 icon toggle button |

Also check out the `androidx.compose.material.icons` [package](/reference/kotlin/androidx/compose/material/icons/package-summary).