Executes 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

A 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

Modifier to be applied to the layout of the dialog.

modifier

A 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

The title of the Dialog which should specify the purpose of the Dialog. The title is not mandatory, because there may be sufficient information inside the [text]. Provided text style will be [Typography.h6].

title

The text which presents the details regarding the Dialog's purpose. Provided text style will be [Typography.body1].

text

shape

backgroundColor

The preferred content color provided by this dialog to its children.

contentColor

Typically platform specific properties to further configure the dialog

properties

Alert dialog is a [Dialog] which interrupts the user with urgent information, details or actions.

AlertDialog

App bar for the back layer. Make sure that the [peekHeight] is equal to the height of the app bar, so that the app bar is fully visible. Consider using [TopAppBar] but set the elevation to 0dp and background color to transparent as a surface is already provided.

appBar

backLayerContent

frontLayerContent

Optional [Modifier] for the root of the scaffold.

scaffoldState

Whether or not the backdrop can be interacted with by gestures.

gesturesEnabled

The height of the visible part of the back layer when it is concealed.

peekHeight

The minimum height of the front layer when it is inactive.

headerHeight

Whether the app bar should be shown when the back layer is revealed. By default, it will always be shown above the back layer's content. If this is set to `false`, the back layer will automatically switch between the app bar and its content with an animation.

persistentAppBar

Whether the front layer should stick to the height of the back layer.

stickyFrontLayer

backLayerBackgroundColor

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

backLayerContentColor

frontLayerShape

frontLayerElevation

frontLayerBackgroundColor

The preferred content color provided by the back front to its children. Defaults to the matching content color for [frontLayerBackgroundColor], or if that is not a color from the theme, this will keep the same content color set above the front layer.

frontLayerContentColor

The color of the scrim applied to the front layer when the back layer is revealed. If the color passed is [Color.Unspecified], then a scrim will not be applied and interaction with the front layer will not be blocked when the back layer is revealed.

frontLayerScrimColor

The component hosting the snackbars shown inside the scaffold

snackbarHost

BackdropScaffold

the color of label text rendered in the badge

optional content to be rendered inside the badg

content

Badge is a component that can contain dynamic information, such as the presence of a new notification or a number of pending requests.

Badge

the badge to be displayed - typically a [Badge]

badge

the anchor to which this badge will be positione

BadgedBox

The [Modifier] to be applied to this BottomAppBar

The background color for the BottomAppBar. Use [Color.Transparent] to have no color.

The preferred content color provided by this BottomAppBar to its children. Defaults to either the matching content color for [backgroundColor], or if [backgroundColor] is not a color from the theme, this will keep the same value set above this BottomAppBar.

the shape of the cutout that will be added to the BottomAppBar - this should typically be the same shape used inside the [FloatingActionButton], when [BottomAppBar] and [FloatingActionButton] are being used together in [Scaffold]. This shape will be drawn with an offset around all sides. If null, where will be no cutout.

cutoutShape

elevation

the padding applied to the content of this BottomAppBar

contentPadding

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

BottomAppBar

drawerState

optional [Modifier] for the entire component

whether or not drawer can be interacted by gestures

drawerShape

drawer sheet elevation. This controls the size of the shadow below the drawer sheet

drawerElevation

composable that represents content inside the drawer

drawerContent

background color to be used for the drawer sheet

drawerBackgroundColor

color of the content to use inside the drawer sheet. Defaults to either the matching content color for [drawerBackgroundColor], or, if it is not a color from the theme, this will keep the same value set above this Surface.

drawerContentColor

color of the scrim that obscures content when the drawer is open. If the color passed is [Color.Unspecified], then a scrim will no longer be applied and the bottom drawer will not block interaction with the rest of the screen when visible.

scrimColor

BottomDrawer

optional [Modifier] for this BottomNavigation

The background color for this BottomNavigation

The preferred content color provided by this BottomNavigation to its children. Defaults to either the matching content color for [backgroundColor], or if [backgroundColor] is not a color from the theme, this will keep the same value set above this BottomNavigation.

destinations inside this BottomNavigation, this should contain multiple [BottomNavigationItem]

BottomNavigation

sheetContent

An optional [Modifier] for the root of the scaffold.

topBar

The composable hosting the snackbars shown inside the scaffold.

floatingActionButton

The position of the floating action button.

floatingActionButtonPosition

Whether the bottom sheet can be interacted with by gestures.

sheetGesturesEnabled

sheetShape

sheetElevation

The background color of the bottom sheet.

sheetBackgroundColor

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

sheetContentColor

The height of the bottom sheet when it is collapsed. If the peek height equals the sheet's full height, the sheet will only have a collapsed state.

sheetPeekHeight

Whether the drawer sheet can be interacted with by gestures.

drawerGesturesEnabled

The background color of the drawer sheet.

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

The color of the scrim that is applied when the drawer is open.

drawerScrimColor

The main content of the screen. You should use the provided [PaddingValues] to properly offset the content, so that it is not obstructed by the bottom sheet when collapsed

BottomSheetScaffold

Will be called when the user clicks the button

onClick

Controls the enabled state of the button. When `false`, this button will not be clickable

enabled

the [MutableInteractionSource] representing the stream of [Interaction]s for this Button. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this Button in different [Interaction]s.

interactionSource

[ButtonElevation] used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. Pass `null` here to disable elevation for this button. See [ButtonDefaults.elevation].

Defines the button's shape as well as its shadow

border

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

colors

The spacing values to apply internally between the container and the conten

Button

Modifier to be applied to the layout of the card.

Defines the card's shape as well its shadow. A shadow is only  displayed if the [elevation] is greater than zero.

The preferred content color provided by this card to its children. Defaults to either the matching content color for [backgroundColor], or if [backgroundColor] is not a color from the theme, this will keep the same value set above this card.

Optional border to draw on top of the card

The z-coordinate at which to place this card. This controls  the size of the shadow below the card

Card

checked

callback to be invoked when checkbox is being clicked, therefore the change of checked state in requested.  If null, then this is passive and relies entirely on a higher-level component to control the "checked" state.

onCheckedChange

Modifier to be applied to the layout of the checkbox

whether the component is enabled or grayed out

the [MutableInteractionSource] representing the stream of [Interaction]s for this Checkbox. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this Checkbox in different [Interaction]s.

[CheckboxColors] that will be used to determine the color of the checkmark / box / border in different states. See [CheckboxDefaults.colors]

Checkbox

When disabled, chip will not respond to user input. It will also appear visually disabled and disabled to accessibility services.

The [MutableInteractionSource] represents the stream of [Interaction]s for this chip. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this [*component*] in different [Interaction]s.

Border to draw around the chip. Pass `null` here for no border.

[ChipColors] that will be used to resolve the background and content color for this chip in different states. See [ChipDefaults.chipColors].

Optional icon at the start of the chip, preceding the content text.

leadingIcon

Chip

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

The stroke width for the progress indicator.

strokeWidth

The color of the background behind the indicator, visible when the progress has not reached that area of the overall indicator yet.

stroke cap to use for the ends of this progress indicato

strokeCap

Material Design circular progress indicator

CircularProgressIndicator

thickness of the divider line, 1 dp is used by default. Using [Dp.Hairline] will produce a single pixel divider regardless of screen density.

thickness

start offset of this line, no offset by defaul

startIndent

Divider

Whether the menu is currently open and visible to the user

expanded

Called when the user requests to dismiss the menu, such as by tapping outside the menu's bounds

[DpOffset] to be added to the position of the men

offset

DropdownMenu

The modifier to be applied to the menu item

Controls the enabled state of the menu item - when `false`, the menu item will not be clickable and [onClick] will not be invoked

the padding applied to the content of this menu item

the [MutableInteractionSource] representing the stream of [Interaction]s for this DropdownMenuItem. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this DropdownMenuItem in different [Interaction]s

DropdownMenuItem

Whether Dropdown Menu should be expanded or not.

Executes when the user clicks on the ExposedDropdownMenuBox.

onExpandedChange

The content to be displayed inside ExposedDropdownMenuBox

ExposedDropdownMenuBox

callback invoked when this FAB is clicked

Optional icon for this FAB, typically this will be a [Icon].

icon

the [MutableInteractionSource] representing the stream of [Interaction]s for this FAB. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this FAB in different [Interaction]s.

The background color. Use [Color.Transparent] to have no color

The preferred content color. Will be used by text and iconography

[FloatingActionButtonElevation] used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB

Material Design extended floating action button

ExtendedFloatingActionButton

the input text to be shown in the text field

value

the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback

onValueChange

the label to be displayed inside the text field container. The default text style for internal [Text] is [Typography.caption] when the text field is in focus and [Typography.subtitle1] when the text field is not in focus

label

the style to be applied to the input text. The default [textStyle] uses the [currentTextStyle] defined by the theme

textStyle

the optional placeholder to be displayed when the text field is in focus and the input text is empty. The default text style for internal [Text] is [Typography.subtitle1]

placeholder

the optional leading icon to be displayed at the beginning of the text field container

the optional trailing icon to be displayed at the end of the text field container

trailingIcon

FilledTextField

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

Jetpack Compose Material components

BackdropScaffold

BottomAppBar

BottomDrawer

BottomNavigation

BottomSheetScaffold

Button

Card

Checkbox

CircularProgressIndicator

Divider

DropdownMenu

ExtendedFloatingActionButton

FloatingActionButton

LeadingIconTab

LinearProgressIndicator

ListItem

ModalBottomSheetLayout

ModalDrawer

NavigationRail

OutlinedButton

OutlinedTextField

RadioButton

ScrollableTabRow

Slider

Snackbar

Switch

Tab

TabRow

TextButton

TextField

TopAppBar

TriStateCheckbox

Bring your next idea to life with Compose UI