commonMain.androidx.compose.material3.compose-material-3-documentation.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of material3-jvm Show documentation
Compose Material3.
There is a newer version: 1.0.9
# Module root

Compose Material 3

# Package androidx.compose.material3

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.

![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 Material Design 3 and Material You section in the Material Theming in Compose guide.

## Overview

### Theming

|      | **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 |

### Components

|      | **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 |

### Surfaces and layout

|      | **APIs** | **Description** |
| ---- | -------- | --------------- |
| **Surfaces** | [Surface] | M3 surface |
| **Scaffold** | [Scaffold] | M3 layout |

### Icons and text

|      | **APIs** | **Description** |
| ---- | -------- | --------------- |
| **Icon** | [Icon] | M3 icon |
| **Text** | [Text] | M3 text |

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