called when the user tries to dismiss the Dialog by clicking outside or pressing the back button. This is not called when the dismiss button is clicked.

onDismissRequest

button which is meant to confirm a proposed action, thus resolving what triggered the dialog. The dialog does not set up any events for this button so they need to be set up by the caller.

confirmButton

the [Modifier] to be applied to this dialog

modifier

button which is meant to dismiss the dialog. The dialog does not set up any events for this button so they need to be set up by the caller.

dismissButton

optional icon that will appear above the [title] or above the [text], in case a title was not provided.

icon

title which should specify the purpose of the dialog. The title is not mandatory, because there may be sufficient information inside the [text].

title

text which presents the details regarding the dialog's purpose.

text

defines the shape of this dialog's container

shape

the color used for the background of this dialog. Use [Color.Transparent] to have no color.

containerColor

iconContentColor

titleContentColor

textContentColor

when [containerColor] is [ColorScheme.surface], a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: [Surface].

tonalElevation

typically platform specific properties to further configure the dialog

properties

AlertDialog

onClick

label

the [Modifier] to be applied to this chip

controls the enabled state of this chip. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

enabled

optional icon at the start of the chip, preceding the [label] text

leadingIcon

trailingIcon

defines the shape of this chip's container, border (when [border] is not null), and shadow (when using [elevation])

[ChipColors] that will be used to resolve the colors used for this chip in different states. See [AssistChipDefaults.assistChipColors].

colors

[ChipElevation] used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See [AssistChipDefaults.assistChipElevation].

elevation

the border to draw around the container of this chip. Pass `null` for no border. See [AssistChipDefaults.assistChipBorder].

border

the [MutableInteractionSource] representing the stream of [Interaction]s for this chip. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this chip in different states

interactionSource

AssistChip

the [Modifier] to be applied to this badge

the color used for the background of this badge

the preferred color for content inside this badge. Defaults to either the matching content color for [containerColor], or to the current [LocalContentColor] if [containerColor] is not a color from the theme.

contentColor

optional content to be rendered inside this badg

content

Badge

the badge to be displayed - typically a [Badge]

badge

the [Modifier] to be applied to this BadgedBox

the anchor to which this badge will be positione

BadgedBox

the icon content of this BottomAppBar. The default layout here is a [Row], so content inside will be placed horizontally.

actions

the [Modifier] to be applied to this BottomAppBar

optional floating action button at the end of this BottomAppBar

floatingActionButton

the color used for the background of this BottomAppBar. Use [Color.Transparent] to have no color.

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for [containerColor], or to the current [LocalContentColor] if [containerColor] is not a color from the theme.

the padding applied to the content of this BottomAppBar

contentPadding

a window insets that app bar will respect

windowInsets

BottomAppBar

sheetContent

the [Modifier] to be applied to this scaffold

scaffoldState

the height of the bottom sheet when it is collapsed

sheetPeekHeight

sheetShape

sheetContainerColor

the preferred content color provided by the bottom sheet to its children. Defaults to the matching content color for [sheetContainerColor], or if that is not a color from the theme, this will keep the same content color set above the bottom sheet.

sheetContentColor

sheetTonalElevation

sheetShadowElevation

optional visual marker to pull the scaffold's bottom sheet

sheetDragHandle

whether the sheet swiping is enabled and should react to the user's input

sheetSwipeEnabled

top app bar of the screen, typically a [SmallTopAppBar]

topBar

component to host [Snackbar]s that are pushed to be shown via [SnackbarHostState.showSnackbar], typically a [SnackbarHost]

snackbarHost

the color used for the background of this scaffold. Use [Color.Transparent] to have no color.

the preferred color for content inside this scaffold. Defaults to either the matching content color for [containerColor], or to the current [LocalContentColor] if [containerColor] is not a color from the theme.

content of the screen. The lambda receives a [PaddingValues] that should be applied to the content root via [Modifier.padding] and [Modifier.consumeWindowInsets] to properly offset top and bottom bars. If using [Modifier.verticalScroll], apply this modifier to the child of the scroll, and not on the scroll itself

Material Design standard bottom sheet scaffold

BottomSheetScaffold

the [Modifier] to be applied to this button

controls the enabled state of this button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

defines the shape of this button's container, border (when [border] is not null), and shadow (when using [elevation])

[ButtonColors] that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors].

[ButtonElevation] used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See [ButtonElevation.shadowElevation] and [ButtonElevation.tonalElevation].

the border to draw around the container of this button

the spacing values to apply internally between the container and the content

the [MutableInteractionSource] representing the stream of [Interaction]s for this button. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this button in different states

Button

Creates a [CalendarModel] to be used by the date picker.

CalendarModel

the [Modifier] to be applied to this card

defines the shape of this card's container, border (when [border] is not null), and shadow (when using [elevation])

[CardColors] that will be used to resolve the colors used for this card in different states. See [CardDefaults.cardColors].

[CardElevation] used to resolve the elevation for this card in different states. This controls the size of the shadow below the card. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See also: [Surface].

the border to draw around the container of this car

Card

the title to be displayed in the top app bar

the [Modifier] to be applied to this top app bar

the navigation icon displayed at the start of the top app bar. This should typically be an [IconButton] or [IconToggleButton].

navigationIcon

the actions displayed at the end of the top app bar. This should typically be [IconButton]s. The default layout here is a [Row], so icons inside will be placed horizontally.

a window insets that app bar will respect.

[TopAppBarColors] that will be used to resolve the colors used for this top app bar in different states. See [TopAppBarDefaults.centerAlignedTopAppBarColors].

a [TopAppBarScrollBehavior] which holds various offset values that will be applied by this top app bar to set up its height and colors. A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls. See [TopAppBarScrollBehavior.nestedScrollConnection]

scrollBehavior

Material Design center-aligned small top app bar

CenterAlignedTopAppBar

whether this checkbox is checked or unchecked

checked

called when this checkbox is clicked. If `null`, then this checkbox will not be interactable, unless something else handles its input events and updates its state.

onCheckedChange

the [Modifier] to be applied to this checkbox

controls the enabled state of this checkbox. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

[CheckboxColors] that will be used to resolve the colors used for this checkbox in different states. See [CheckboxDefaults.colors].

the [MutableInteractionSource] representing the stream of [Interaction]s for this checkbox. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this checkbox in different states

Checkbox

the progress of this progress indicator, where 0.0 represents no progress and 1.0 represents full progress. Values outside of this range are coerced into the range.

progress

the [Modifier] to be applied to this progress indicator

color

strokeWidth

color of the track behind the indicator, visible when the progress has not reached the area of the overall indicator yet

trackColor

stroke cap to use for the ends of this progress indicato

strokeCap

Determinate Material Design circular progress indicator

CircularProgressIndicator

Contains default values used by the [DatePicker].

state of the date picker. See [rememberDatePickerState].

state

the [Modifier] to be applied to this date picker

a [DatePickerFormatter] that provides formatting skeletons for dates display

dateFormatter

the title to be displayed in the date picker

the headline to be displayed in the date picker

headline

indicates if this DatePicker should show a mode toggle action that transforms it into a date input

showModeToggle

[DatePickerColors] that will be used to resolve the colors used for this date picker in different states. See [DatePickerDefaults.colors]

DatePicker

button which is meant to confirm a proposed action, thus resolving what triggered the dialog. The dialog does not set up any events for this button, nor does it control its enablement, so those need to be set up by the caller.

the [Modifier] to be applied to this dialog's content.

defines the dialog's surface shape as well its shadow

when [DatePickerColors.containerColor] is [ColorScheme.surface], a higher the elevation will result in a darker color in light theme and lighter color in dark theme

[DatePickerColors] that will be used to resolve the colors used for this date picker in different states. See [DatePickerDefaults.colors].

the content of the dialog (i.e. a [DatePicker], for example

DatePickerDialog

state of the date range picker. See [rememberDateRangePickerState].

the [Modifier] to be applied to this date range picker

the title to be displayed in the date range picker

the headline to be displayed in the date range picker

indicates if this DateRangePicker should show a mode toggle action that transforms it into a date range input

[DatePickerColors] that will be used to resolve the colors used for this date range picker in different states. See [DatePickerDefaults.colors]

DateRangePicker

Contains default values used by the [DateRangePicker].

DateRangePickerTitle

the [Modifier] to be applied to this drawer's content

defines the shape of this drawer's container

drawerShape

the color used for the background of this drawer. Use [Color.Transparent] to have no color.

drawerContainerColor

the preferred color for content inside this drawer. Defaults to either the matching content color for [drawerContainerColor], or to the current [LocalContentColor] if [drawerContainerColor] is not a color from the theme.

drawerContentColor

when [drawerContainerColor] is [ColorScheme.surface], a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: [Surface].

drawerTonalElevation

content inside of a dismissible navigation drawe

Content inside of a dismissible navigation drawer.

DismissibleDrawerSheet

drawerContent

the [Modifier] to be applied to this drawer

drawerState

whether or not the drawer can be interacted by gestures

gesturesEnabled

DismissibleNavigationDrawer

the [Modifier] to be applied to this divider line.

thickness of this divider line. Using [Dp.Hairline] will produce a single pixel divider regardless of screen density.

thickness

Divider

the query text to be shown in the search bar's input field

query

the callback to be invoked when the input service updates the query. An updated text comes as a parameter of the callback.

onQueryChange

the callback to be invoked when the input service triggers the [ImeAction.Search] action. The current [query] comes as a parameter of the callback.

onSearch

active

the callback to be invoked when this search bar's active state is changed

onActiveChange

the [Modifier] to be applied to this search bar

DockedSearchBar

We extracted all components found in the Material 3 library in one place. Explore all available and add them to your project.

Jetpack Compose Material 3 components

AlertDialog

AssistChip

Badge

BadgedBox

BottomAppBar

BottomSheetScaffold

Button

Card

CenterAlignedTopAppBar

Checkbox

CircularProgressIndicator

DatePicker

DateRangePicker

DismissibleNavigationDrawer

Divider

DockedSearchBar

DropdownMenu

DropdownMenuItem

ElevatedAssistChip

ElevatedButton

ElevatedCard

ElevatedFilterChip

ElevatedSuggestionChip

ExposedDropdownMenuBox

ExtendedFloatingActionButton

FilledIconButton

FilledIconToggleButton

FilledTonalButton

FilledTonalIconButton

FilledTonalIconToggleButton

FilterChip

FloatingActionButton

IconButton

IconToggleButton

InputChip

LargeFloatingActionButton

LargeTopAppBar

LinearProgressIndicator

ListItem

MediumTopAppBar

ModalBottomSheet

ModalNavigationDrawer

NavigationBar

NavigationRail

OutlinedButton

OutlinedCard

OutlinedIconButton

OutlinedIconToggleButton

OutlinedTextField

PermanentNavigationDrawer

RadioButton

SearchBar

SmallFloatingActionButton

SmallTopAppBar

Snackbar

SuggestionChip

Switch

Tab

TextButton

TextField

TimePicker

TopAppBar

TriStateCheckbox

Bring your next idea to life with Compose UI