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

Will be called when the user clicks the card

onClick

A slot for displaying the application name, expected to be a single line of start aligned text of [Typography.title3]

appName

A slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text.

time

A slot for displaying the title of the card, expected to be one or two lines of start aligned text of [Typography.button]

Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable.

enabled

A slot for a small ([CardDefaults.AppImageSize]x[CardDefaults.AppImageSize] ) [Image] associated with the application.

appImage

A painter used to paint the background of the card. A card will normally have a gradient background. Use [CardDefaults.cardBackgroundPainter()] to obtain an appropriate painter

backgroundPainter

The default color to use for content() slot unless explicitly set.

contentColor

The default color to use for appName() and appImage() slots unless explicitly set.

appColor

The default color to use for time() slot unless explicitly set.

timeColor

The default color to use for title() slot unless explicitly set

titleColor

AppCard

drawerState

optional [Modifier] for the entire component

whether or not drawer can be interacted by gestures

gesturesEnabled

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

content

BottomDrawer

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].

colors

[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].

elevation

the border to draw around the container of this car

border

Card

total number of items present in the carousel.

itemCount

carouselState

duration for which item should be visible before moving to the next item.

autoScrollDurationMillis

animation transform applied when we are moving from start to end in the carousel while scrolling to the next item

contentTransformStartToEnd

animation transform applied when we are moving from end to start in the carousel while scrolling to the next item

contentTransformEndToStart

indicator showing the position of the current item among all items.

carouselIndicator

Composes a hero card rotator to highlight a piece of content.

Carousel

time between the rendering of the background and the overlay.

overlayEnterTransitionStartDelayMillis

animation used to bring the overlay into view.

overlayEnterTransition

animation used to remove the overlay from view.

overlayExitTransition

composable defining the background of the slide.

background

composable defining the content overlaid on the background

overlay

This composable is intended for use in Carousel.

CarouselItem

CheckboxCard

A compact card that gives the user a choice.

ChoiceCompactCard

defines the [Composable] image to be displayed on top of the Card.

image

defines the [Composable] title placed below the image in the Card.

the [Modifier] to be applied to this card.

defines the [Composable] supporting text placed below the title of the Card.

subtitle

defines the [Composable] description placed below the subtitle of the Card.

description

[CardShape] defines the shape of this card's container in different interaction states. See [CardDefaults.shape].

[CardColors] defines the background & content colors used in this card for different interaction states. See [CardDefaults.colors].

[CardScale] defines size of the card relative to its original size for different interaction states. See [CardDefaults.scale].

scale

[CardBorder] defines a border around the card for different interaction states. See [CardDefaults.border].

[CardGlow] defines a shadow to be shown behind the card for different interaction states. See [CardDefaults.glow].

glow

[PaddingValues] defines the inner padding applied to the card's content.

contentPadding

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

interactionSource

[ClassicCard] is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.

ClassicCard

[CardColors] defines the background & content colors used in this card for different interaction states. See [CardDefaults.compactCardColors].

[Brush] defines a brush/gradient to be used to draw the scrim over the image in the background. See [CardDefaults.ContainerGradient].

scrimBrush

[CompactCard] is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.

CompactCard

ContentCard

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

Executes when the user tries to dismiss the Dialog.

onCloseRequest

The content to be displayed inside the dialog

children

Dialog

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

defines the shape of this drawer's container

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.

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

windowInsets

content inside of a dismissible navigation drawe

Content inside of a dismissible navigation drawer.

DismissibleDrawerSheet

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

color

Divider

defines the shape of this card's container and shadow (when using [elevation])

[CardColors] that will be used to resolve the color(s) used for this card in different states. See [CardDefaults.elevatedCardElevation].

[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]

ElevatedCard

A card that showcases a feature of your app.

FeatureShowcaseCard

Composable defining the background to be displayed for a given item's index. `listHasFocus` argument can be used to hide the background when the list is not in focus

Alignment of the List with respect to the Immersive List.

listAlignment

composable defining the list of items that has to be rendered

list

Immersive List consists of a list with multiple items and a background that displays content based on the item in focus.

ImmersiveList

A card that displays a single item (usually in a list)

ItemListCard

The background color to apply - typically Color.Transparent

backgroundColor

A slot based composable for creating a list header item.

ListHeader

headlineContent

[Modifier] to be applied to the list item

the content displayed above the headline content

overlineContent

supportingContent

leadingContent

the trailing meta text, icon, switch or checkbox

trailingContent

[ListItemColors] that will be used to resolve the background and content color for this list item in different states. See [ListItemDefaults.colors]

shadowElevation

ListItem

Executes when the user clicks outside of the bottom sheet, after sheet animates to [Hidden].

Optional [Modifier] for the bottom sheet.

sheetState

The color used for the background of this bottom sheet

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

The tonal elevation of this bottom sheet.

Color of the scrim that obscures content when the bottom sheet is open.

Optional visual marker to swipe the bottom sheet.

dragHandle

The content to be displayed inside the bottom sheet

ModalBottomSheet

sheetContent

Optional [Modifier] for the entire component.

sheetShape

ModalBottomSheetLayout

A list of all Jetpack Compose Containment components listed on our website, you can use in your Jetpack Compose projects.

Jetpack Compose Containment components

AlertDialog

BottomDrawer

Card

CheckboxCard

ChoiceCompactCard

ContentCard

Divider

ElevatedCard

FeatureShowcaseCard

ItemListCard

ListItem

ModalBottomSheet

ModalBottomSheetLayout

OutlinedCard

PermissionRequiredDialog

PermissionRequiredHeaderDialog

PickerDialog

PostCard

ProfileCard

ProfileCompactCard

TodoCard

Bring your next idea to life with Compose UI