androidx.compose.material

Build Jetpack Compose UIs with ready to use Material Design Components. This is the higher level entry point of Compose, designed to provide components that match those described at material.io.

Material Design image

In this page, you'll find documentation for types, properties, and functions available in the androidx.compose.material package.

For more information, check out the Material Theming in Compose guide.

Overview

Theming

Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.

APIs Description
Material Theming MaterialTheme Material Theme
Color Colors Material Design color system
Typography Typography Material Design type scale
Shape Shapes Material Design shape

Components

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

APIs Description
App bars: bottom BottomAppBar Bottom app bar
App bars: top TopAppBar Top app bar
Backdrop BackdropScaffold Backdrop
Bottom navigation BottomNavigation Bottom navigation
Buttons Button Contained button
OutlinedButton Outlined button
TextButton Text button
Buttons: floating action button FloatingActionButton Floating action button
ExtendedFloatingActionButton Extended floating action button
Cards Card Card
Checkboxes Checkbox Checkbox
TriStateCheckbox Parent checkbox
Dialogs AlertDialog Alert dialog
Dividers Divider Divider
Lists ListItem List item
Menus DropdownMenu Dropdown menu
DropdownMenuItem Dropdown menu item
Navigation drawer ModalDrawer Modal navigation drawer
BottomDrawer Bottom navigation drawer
Progress indicators LinearProgressIndicator Linear progress indicator
CircularProgressIndicator Circular progress indicator
Radio buttons RadioButton Radio button
Sheets: bottom BottomSheetScaffold Standard bottom sheet
ModalBottomSheetLayout Modal bottom sheet
Sliders Slider Slider
Snackbars Snackbar Snackbar
Switches Switch Switch
Tabs Tab Tab
LeadingIconTab Icon tab
TabRow Fixed tabs
ScrollableTabRow Scrollable tabs
Text fields TextField Filled text field
OutlinedTextField Outlined text field

Dark theme

A dark theme is a low-light UI that displays mostly dark surfaces.

APIs Description
System androidx.compose.foundation.isSystemInDarkTheme System dark theme
Elevation ElevationOverlay Elevation overlay
Color primarySurface Primary surface color

Surfaces and layout

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

APIs Description
Surfaces Surface Material surface
Layout Scaffold Basic Material Design visual layout structure

Icons

APIs Description
Icon Icon Icon
Icon button IconButton Icon button
Icon toggle button IconToggleButton Icon toggle button

Also check out the androidx.compose.material.icons package.

Interfaces

ButtonColors

Represents the background and content colors used in a button in different states.
Cmn
ButtonElevation

Represents the elevation for a button in different states.
Cmn
CheckboxColors

Represents the colors used by the three different sections (checkmark, box, and border) of a Checkbox or TriStateCheckbox in different states.
Cmn
ChipColors

Represents the background and content colors used in a clickable chip in different states.
Cmn
ElevationOverlay

An ElevationOverlay is an overlay applied to the background color of Surface components, used to emphasize elevation in dark theme, where shadows are not as visible.
Cmn
FloatingActionButtonElevation

Represents the elevation for a floating action button in different states.
Cmn
RadioButtonColors

Represents the color used by a RadioButton in different states.
Cmn
SelectableChipColors

Represents the background and content colors used in a selectable chip in different states.
Cmn
SliderColors

Represents the colors used by a Slider and its parts in different states
Cmn
SnackbarData

Interface to represent one particular Snackbar as a piece of the SnackbarHostState
Cmn
SwitchColors

Represents the colors used by a Switch in different states
Cmn
TextFieldColors

Represents the colors of the input text, background and content (including label, placeholder, leading and trailing icons) used in a text field in different states.
Cmn
TextFieldColorsWithIcons

This interface is deprecated. Empty interface; use parent TextFieldColors instead
Cmn
ThresholdConfig

This interface is deprecated. Material's Swipeable has been replaced by Foundation's AnchoredDraggable APIs.
Cmn

Classes

BackdropScaffoldState

State of the BackdropScaffold composable.
Cmn
BottomDrawerState

State of the BottomDrawer composable.
Cmn
BottomSheetScaffoldState

State of the BottomSheetScaffold composable.
Cmn
BottomSheetState

State of the persistent bottom sheet in BottomSheetScaffold.
Cmn
Colors

Material Design color system
Cmn
DismissState

State of the SwipeToDismiss composable.
Cmn
DrawerState

State of the ModalDrawer composable.
Cmn
ExposedDropdownMenuBoxScope

Scope for ExposedDropdownMenuBox.
Cmn
FabPosition

The possible positions for a FloatingActionButton attached to a Scaffold.
Cmn
FixedThreshold

This class is deprecated. Material's Swipeable has been replaced by Foundation's AnchoredDraggable APIs.
Cmn
FractionalThreshold

This class is deprecated. Material's Swipeable has been replaced by Foundation's AnchoredDraggable APIs.
Cmn
ModalBottomSheetState

State of the ModalBottomSheetLayout composable.
Cmn
ResistanceConfig

This class is deprecated. Material's Swipeable has been replaced by Foundation's AnchoredDraggable APIs.
Cmn
RippleConfiguration

Configuration for ripple appearance, provided using LocalRippleConfiguration.
Cmn
ScaffoldState

State for Scaffold composable component.
Cmn
Shapes

Material Design shape
Cmn
SnackbarHostState

State of the SnackbarHost, controls the queue and the current Snackbar being shown inside the SnackbarHost.
Cmn
SwipeProgress

This class is deprecated. Material's Swipeable has been replaced by Foundation's AnchoredDraggable APIs.
Cmn
SwipeableState

This class is deprecated. Material's Swipeable has been replaced by Foundation's AnchoredDraggable APIs.
Cmn
TabPosition

Data class that contains information about a tab's position on screen, used for calculating where to place the indicator that shows which tab is selected.
Cmn
Typography

Material Design type scale
Cmn

Objects

AppBarDefaults

Contains default values used for TopAppBar and BottomAppBar.
Cmn
BackdropScaffoldDefaults

Contains useful defaults for BackdropScaffold.
Cmn
BottomNavigationDefaults

Contains default values used for BottomNavigation.
Cmn
BottomSheetScaffoldDefaults

Contains useful defaults for BottomSheetScaffold.
Cmn
ButtonDefaults

Contains the default values used by Button
Cmn
CheckboxDefaults

Defaults used in Checkbox and TriStateCheckbox.
Cmn
ChipDefaults

Contains the baseline values used by chips.
Cmn
ContentAlpha

Default alpha levels used by Material components.
Cmn
DrawerDefaults

Object to hold default values for ModalDrawer and BottomDrawer
Cmn
ExposedDropdownMenuDefaults

Contains default values used by Exposed Dropdown Menu.
Cmn
FloatingActionButtonDefaults

Contains the default values used by FloatingActionButton
Cmn
MaterialTheme

Contains functions to access the current theme values provided at the call site's position in the hierarchy.
Cmn
MenuDefaults

Contains default values used for DropdownMenuItem.
Cmn
ModalBottomSheetDefaults

Contains useful Defaults for ModalBottomSheetLayout.
Cmn
NavigationRailDefaults

Contains default values used for NavigationRail.
Cmn
ProgressIndicatorDefaults

Contains the default values used for LinearProgressIndicator and CircularProgressIndicator.
Cmn
RadioButtonDefaults

Defaults used in RadioButton.
Cmn
RippleDefaults

Default values used by ripple.
Cmn
ScaffoldDefaults

Object containing various default values for Scaffold component.
Cmn
SliderDefaults

Object to hold defaults used by Slider
Cmn
SnackbarDefaults

Object to hold defaults used by Snackbar
Cmn
SwipeableDefaults

This object is deprecated. Material's Swipeable has been replaced by Foundation's AnchoredDraggable APIs.
Cmn
SwitchDefaults

Contains the default values used by Switch
Cmn
TabRowDefaults

Contains default implementations and values used for TabRow.
Cmn
TextFieldDefaults

Contains the default values used by TextField and OutlinedTextField.
Cmn

Annotations

ExperimentalMaterialApi
Cmn

Enums

BackdropValue

Possible values of BackdropScaffoldState.
Cmn
BottomDrawerValue

Possible values of BottomDrawerState.
Cmn
BottomSheetValue

Possible values of BottomSheetState.
Cmn
DismissDirection

The directions in which a SwipeToDismiss can be dismissed.
Cmn
DismissValue

Possible values of DismissState.
Cmn
DrawerValue

Possible values of DrawerState.
Cmn
ModalBottomSheetValue

Possible values of ModalBottomSheetState.
Cmn
SnackbarDuration

Possible durations of the Snackbar in SnackbarHost
Cmn
SnackbarResult

Possible results of the SnackbarHostState.showSnackbar call
Cmn

Composables

AlertDialog

Material Design alert dialog
Cmn
android
BackdropScaffold

Material Design backdrop
Cmn
Badge

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

A BadgeBox is used to decorate content with a badge that can contain dynamic information, such as the presence of a new notification or a number of pending requests.
Cmn
BottomAppBar

Material Design bottom app bar
Cmn
BottomDrawer

Material Design bottom navigation drawer
Cmn
BottomNavigation

Material Design bottom navigation
Cmn
BottomNavigationItem

Material Design bottom navigation
Cmn
BottomSheetScaffold

Material Design standard bottom sheet
Cmn
Button

Material Design contained button
Cmn
Card

Material Design card
Cmn
Checkbox

Material Design checkbox
Cmn
Chip

Material Design action chip.
Cmn
CircularProgressIndicator

Indeterminate Material Design circular progress indicator.
Cmn
Divider

Material Design divider
Cmn
DropdownMenu

Material Design dropdown menu
Cmn
android
DropdownMenuItem

Material Design dropdown menu
Cmn
android
ExposedDropdownMenuBox

Material Design Exposed Dropdown Menu.
Cmn
ExtendedFloatingActionButton

Material Design extended floating action button
Cmn
FilterChip

Material Design filter chip
Cmn
FloatingActionButton

Material Design floating action button
Cmn
Icon

A Material Design icon component that draws bitmap using tint, with a default value of LocalContentColor.
Cmn
IconButton

IconButton is a clickable icon, used to represent actions.
Cmn
IconToggleButton

An IconButton with two states, for icons that can be toggled 'on' and 'off', such as a bookmark icon, or a navigation icon that opens a drawer.
Cmn
LeadingIconTab

Material Design tab
Cmn
LinearProgressIndicator

Indeterminate Material Design linear progress indicator.
Cmn
ListItem

Material Design list
Cmn
MaterialTheme

Material Theming
Cmn
ModalBottomSheetLayout

Material Design modal bottom sheet
Cmn
ModalDrawer

Material Design modal navigation drawer
Cmn
NavigationRail

Material Design navigation rail
Cmn
NavigationRailItem

Material Design navigation rail
Cmn
OutlinedButton

Material Design outlined button
Cmn
OutlinedSecureTextField

Material Design outlined text field for secure content
Cmn
OutlinedTextField

Material Design outlined text field.
Cmn
ProvideTextStyle

This function is used to set the current value of LocalTextStyle, merging the given style with the current style values for any missing attributes.
Cmn
RadioButton

Material Design radio button
Cmn
RangeSlider

Material Design slider
Cmn
Scaffold

Material Design layout
Cmn
ScrollableTabRow

Material Design scrollable tabs
Cmn
SecureTextField

Material Design filled text field for secure content
Cmn
Slider

Material Design slider
Cmn
Snackbar

Material Design snackbar
Cmn
SnackbarHost

Host for Snackbars to be used in Scaffold to properly show, hide and dismiss items based on material specification and the hostState.
Cmn
Surface

Material Design surface
Cmn
SwipeToDismiss

A composable that can be dismissed by swiping left or right.
Cmn
Switch

Material Design switch
Cmn
Tab

Material Design tab
Cmn
TabRow

Material Design fixed tabs
Cmn
Text

High level element that displays text and provides semantics / accessibility information.
Cmn
TextButton

Material Design text button
Cmn
TextField

Material Design filled text field.
Cmn
TopAppBar

Material Design top app bar
Cmn
TriStateCheckbox

Material Design checkbox
Cmn
contentColorFor

The Material color system contains pairs of colors that are typically used for the background and content color inside a component.
Cmn
rememberBackdropScaffoldState

Create and remember a BackdropScaffoldState.
Cmn
rememberBottomDrawerState

Create and remember a BottomDrawerState.
Cmn
rememberBottomSheetScaffoldState

Create and remember a BottomSheetScaffoldState.
Cmn
rememberBottomSheetState

Create a BottomSheetState and remember it.
Cmn
rememberDismissState

Create and remember a DismissState.
Cmn
rememberDrawerState

Create and remember a DrawerState.
Cmn
rememberModalBottomSheetState

Create a ModalBottomSheetState and remember it.
Cmn
rememberScaffoldState

Creates a ScaffoldState with the default animation clock and memoizes it.
Cmn
rememberSwipeableState

Create and remember a SwipeableState with the default animation clock.
Cmn

Modifiers

minimumInteractiveComponentSize

Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.
Cmn
swipeable

Enable swipe gestures between a set of predefined states.
Cmn

Top-level functions summary

BackdropScaffoldState
BackdropScaffoldState(
    initialValue: BackdropValue,
    density: Density,
    animationSpec: AnimationSpec<Float>,
    confirmValueChange: (BackdropValue) -> Boolean,
    snackbarHostState: SnackbarHostState
)

State of the persistent bottom sheet in BackdropScaffold.
Cmn
Colors
darkColors(
    primary: Color,
    primaryVariant: Color,
    secondary: Color,
    secondaryVariant: Color,
    background: Color,
    surface: Color,
    error: Color,
    onPrimary: Color,
    onSecondary: Color,
    onBackground: Color,
    onSurface: Color,
    onError: Color
)

Creates a complete color definition for the Material color specification using the default dark theme values.
Cmn
Colors
lightColors(
    primary: Color,
    primaryVariant: Color,
    secondary: Color,
    secondaryVariant: Color,
    background: Color,
    surface: Color,
    error: Color,
    onPrimary: Color,
    onSecondary: Color,
    onBackground: Color,
    onSurface: Color,
    onError: Color
)

Creates a complete color definition for the Material color specification using the default light theme values.
Cmn
IndicationNodeFactory
ripple(bounded: Boolean, radius: Dp, color: Color)

Creates a Ripple using the provided values and values inferred from the theme.
Cmn
IndicationNodeFactory
ripple(color: ColorProducer, bounded: Boolean, radius: Dp)

Creates a Ripple using the provided values and values inferred from the theme.
Cmn

Extension functions summary

Color
Colors.contentColorFor(backgroundColor: Color)

The Material color system contains pairs of colors that are typically used for the background and content color inside a component.
Cmn

Top-level properties summary

ProvidableCompositionLocal<Dp>

CompositionLocal containing the current absolute elevation provided by Surface components.
Cmn
ProvidableCompositionLocal<Float>

CompositionLocal containing the preferred content alpha for a given position in the hierarchy.
Cmn
ProvidableCompositionLocal<Color>

CompositionLocal containing the preferred content color for a given position in the hierarchy.
Cmn
ProvidableCompositionLocal<ElevationOverlay?>

CompositionLocal containing the ElevationOverlay used by Surface components.
Cmn
ProvidableCompositionLocal<Boolean>

CompositionLocal that configures whether Material components that have a visual size that is lower than the minimum touch target size for accessibility (such as Button) will include extra space outside the component to ensure that they are accessible.
Cmn
ProvidableCompositionLocal<Boolean>

This property is deprecated. Use LocalMinimumInteractiveComponentEnforcement instead.
Cmn
ProvidableCompositionLocal<RippleConfiguration?>

CompositionLocal used for providing RippleConfiguration down the tree.
Cmn
ProvidableCompositionLocal<TextStyle>

CompositionLocal containing the preferred TextStyle that will be used by Text components by default.
Cmn

Extension properties summary

Color

primarySurface represents the background color of components that are Colors.primary in light theme, and Colors.surface in dark theme, such as androidx.compose.material.TabRow and androidx.compose.material.TopAppBar.
Cmn

Top-level functions

BackdropScaffoldState

Cmn 
fun BackdropScaffoldState(
    initialValue: BackdropValue,
    density: Density,
    animationSpec: AnimationSpec<Float> = BackdropScaffoldDefaults.AnimationSpec,
    confirmValueChange: (BackdropValue) -> Boolean = { true },
    snackbarHostState: SnackbarHostState = SnackbarHostState()
): BackdropScaffoldState

State of the persistent bottom sheet in BackdropScaffold.

Parameters
initialValue: BackdropValue

The initial value of the state.
density: Density

The density that this state can use to convert values to and from dp.
animationSpec: AnimationSpec<Float> = BackdropScaffoldDefaults.AnimationSpec

The default animation that will be used to animate to a new state.
confirmValueChange: (BackdropValue) -> Boolean = { true }

Optional callback invoked to confirm or veto a pending state change.
snackbarHostState: SnackbarHostState = SnackbarHostState()

The SnackbarHostState used to show snackbars inside the scaffold.

darkColors

Cmn 
fun darkColors(
    primary: Color = Color(0xFFBB86FC),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    secondaryVariant: Color = secondary,
    background: Color = Color(0xFF121212),
    surface: Color = Color(0xFF121212),
    error: Color = Color(0xFFCF6679),
    onPrimary: Color = Color.Black,
    onSecondary: Color = Color.Black,
    onBackground: Color = Color.White,
    onSurface: Color = Color.White,
    onError: Color = Color.Black
): Colors

Creates a complete color definition for the Material color specification using the default dark theme values.

Note: secondaryVariant is typically the same as secondary in dark theme since contrast levels are higher, and hence there is less need for a separate secondary color.

See also
lightColors

lightColors

Cmn 
fun lightColors(
    primary: Color = Color(0xFF6200EE),
    primaryVariant: Color = Color(0xFF3700B3),
    secondary: Color = Color(0xFF03DAC6),
    secondaryVariant: Color = Color(0xFF018786),
    background: Color = Color.White,
    surface: Color = Color.White,
    error: Color = Color(0xFFB00020),
    onPrimary: Color = Color.White,
    onSecondary: Color = Color.Black,
    onBackground: Color = Color.Black,
    onSurface: Color = Color.Black,
    onError: Color = Color.White
): Colors

Creates a complete color definition for the Material color specification using the default light theme values.

See also
darkColors

ripple

Cmn 
fun ripple(
    bounded: Boolean = true,
    radius: Dp = Dp.Unspecified,
    color: Color = Color.Unspecified
): IndicationNodeFactory

Creates a Ripple using the provided values and values inferred from the theme.

A Ripple is a Material implementation of Indication that expresses different Interactions by drawing ripple animations and state layers.

A Ripple responds to PressInteraction.Press by starting a new animation, and responds to other Interactions by showing a fixed state layer with varying alpha values depending on the Interaction.

MaterialTheme provides Ripples using androidx.compose.foundation.LocalIndication, so a Ripple will be used as the default Indication inside components such as androidx.compose.foundation.clickable and androidx.compose.foundation.indication, in addition to Material provided components that use a Ripple as well.

You can also explicitly create a Ripple and provide it to custom components in order to change the parameters from the default, such as to create an unbounded ripple with a fixed size.

To create a Ripple with a manually defined color that can change over time, see the other ripple overload with a ColorProducer parameter. This will avoid unnecessary recompositions when changing the color, and preserve existing ripple state when the color changes.

Parameters
bounded: Boolean = true

If true, ripples are clipped by the bounds of the target layout. Unbounded ripples always animate from the target layout center, bounded ripples animate from the touch position.
radius: Dp = Dp.Unspecified

the radius for the ripple. If Dp.Unspecified is provided then the size will be calculated based on the target layout size.
color: Color = Color.Unspecified

the color of the ripple. This color is usually the same color used by the text or iconography in the component. This color will then have RippleDefaults.rippleAlpha applied to calculate the final color used to draw the ripple. If Color.Unspecified is provided the color used will be RippleDefaults.rippleColor instead.

ripple

Cmn 
fun ripple(
    color: ColorProducer,
    bounded: Boolean = true,
    radius: Dp = Dp.Unspecified
): IndicationNodeFactory

Creates a Ripple using the provided values and values inferred from the theme.

A Ripple is a Material implementation of Indication that expresses different Interactions by drawing ripple animations and state layers.

A Ripple responds to PressInteraction.Press by starting a new ripple animation, and responds to other Interactions by showing a fixed state layer with varying alpha values depending on the Interaction.

MaterialTheme provides Ripples using androidx.compose.foundation.LocalIndication, so a Ripple will be used as the default Indication inside components such as androidx.compose.foundation.clickable and androidx.compose.foundation.indication, in addition to Material provided components that use a Ripple as well.

You can also explicitly create a Ripple and provide it to custom components in order to change the parameters from the default, such as to create an unbounded ripple with a fixed size.

To create a Ripple with a static color, see the ripple overload with a Color parameter. This overload is optimized for Ripples that have dynamic colors that change over time, to reduce unnecessary recompositions.

Parameters
color: ColorProducer

the color of the ripple. This color is usually the same color used by the text or iconography in the component. This color will then have RippleDefaults.rippleAlpha applied to calculate the final color used to draw the ripple. If you are creating this ColorProducer outside of composition (where it will be automatically remembered), make sure that its instance is stable (such as by remembering the object that holds it), or remember the returned ripple object to make sure that ripple nodes are not being created each recomposition.
bounded: Boolean = true

If true, ripples are clipped by the bounds of the target layout. Unbounded ripples always animate from the target layout center, bounded ripples animate from the touch position.
radius: Dp = Dp.Unspecified

the radius for the ripple. If Dp.Unspecified is provided then the size will be calculated based on the target layout size.

Extension functions

Colors.contentColorFor

Cmn 
fun Colors.contentColorFor(backgroundColor: Color): Color

The Material color system contains pairs of colors that are typically used for the background and content color inside a component. For example, a Button typically uses primary for its background, and onPrimary for the color of its content (usually text or iconography).

This function tries to match the provided backgroundColor to a 'background' color in this Colors, and then will return the corresponding color used for content. For example, when backgroundColor is Colors.primary, this will return Colors.onPrimary.

If backgroundColor does not match a background color in the theme, this will return Color.Unspecified.

Returns
Color

the matching content color for backgroundColor. If backgroundColor is not present in the theme's Colors, then returns Color.Unspecified.
See also
contentColorFor

Top-level properties

LocalAbsoluteElevation

Cmn 
val LocalAbsoluteElevation: ProvidableCompositionLocal<Dp>

CompositionLocal containing the current absolute elevation provided by Surface components. This absolute elevation is a sum of all the previous elevations. Absolute elevation is only used for calculating elevation overlays in dark theme, and is not used for drawing the shadow in a Surface. See ElevationOverlay for more information on elevation overlays.

import androidx.compose.material.LocalAbsoluteElevation
import androidx.compose.material.Surface
import androidx.compose.ui.unit.dp

Surface(elevation = 4.dp) {
    // This will equal 4.dp
    val elevation = LocalAbsoluteElevation.current
    Surface(elevation = 2.dp) {
        // This will equal 6.dp (4 + 2)
        val elevation = LocalAbsoluteElevation.current
    }
}

LocalContentAlpha

Cmn 
val LocalContentAlpha: ProvidableCompositionLocal<Float>

CompositionLocal containing the preferred content alpha for a given position in the hierarchy. This alpha is used for text and iconography (Text and Icon) to emphasize / de-emphasize different parts of a component. See the Material guide on Text Legibility for more information on alpha levels used by text and iconography.

See ContentAlpha for the default levels used by most Material components.

MaterialTheme sets this to ContentAlpha.high by default, as this is the default alpha for body text.

import androidx.compose.foundation.layout.Column
import androidx.compose.material.ContentAlpha
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.Text
import androidx.compose.runtime.CompositionLocalProvider

// Note the alpha values listed below are the values for light theme. The values are slightly
// different in dark theme to provide proper contrast against the background.
Column {
    Text(
        "No content alpha applied - uses the default content alpha set by MaterialTheme - " +
            "87% alpha"
    )
    CompositionLocalProvider(LocalContentAlpha provides 1.00f) {
        Text("1.00f alpha applied - 100% alpha")
    }
    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
        Text("High content alpha applied - 87% alpha")
    }
    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
        Text("Medium content alpha applied - 60% alpha")
    }
    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
        Text("Disabled content alpha applied - 38% alpha")
    }
}

LocalContentColor

Cmn 
val LocalContentColor: ProvidableCompositionLocal<Color>

CompositionLocal containing the preferred content color for a given position in the hierarchy. This typically represents the on color for a color in Colors. For example, if the background color is Colors.surface, this color is typically set to Colors.onSurface.

This color should be used for any typography / iconography, to ensure that the color of these adjusts when the background color changes. For example, on a dark background, text should be light, and on a light background, text should be dark.

Defaults to Color.Black if no color has been explicitly set.

LocalElevationOverlay

Cmn 
val LocalElevationOverlay: ProvidableCompositionLocal<ElevationOverlay?>

CompositionLocal containing the ElevationOverlay used by Surface components. Provide null to turn off ElevationOverlays for the children within this CompositionLocal..

See also
ElevationOverlay

LocalMinimumInteractiveComponentEnforcement

Cmn 
@ExperimentalMaterialApi
val LocalMinimumInteractiveComponentEnforcement: ProvidableCompositionLocal<Boolean>

CompositionLocal that configures whether Material components that have a visual size that is lower than the minimum touch target size for accessibility (such as Button) will include extra space outside the component to ensure that they are accessible. If set to false there will be no extra space, and so it is possible that if the component is placed near the edge of a layout / near to another component without any padding, there will not be enough space for an accessible touch target.

LocalMinimumTouchTargetEnforcement

Cmn
Added in 1.4.0
Deprecated in 1.4.0
@ExperimentalMaterialApi
val LocalMinimumTouchTargetEnforcement: ProvidableCompositionLocal<Boolean>

CompositionLocal that configures whether Material components that have a visual size that is lower than the minimum touch target size for accessibility (such as Button) will include extra space outside the component to ensure that they are accessible. If set to false there will be no extra space, and so it is possible that if the component is placed near the edge of a layout / near to another component without any padding, there will not be enough space for an accessible touch target.

LocalRippleConfiguration

Cmn 
val LocalRippleConfiguration: ProvidableCompositionLocal<RippleConfiguration?>

CompositionLocal used for providing RippleConfiguration down the tree. This acts as a tree-local 'override' for ripples used inside components that you cannot directly control, such as to change the color of a specific component's ripple, or disable it entirely by providing null.

In most cases you should rely on the default theme behavior for consistency with other components

  • this exists as an escape hatch for individual components and is not intended to be used for full theme customization across an application. For this use case you should instead build your own custom ripple that queries your design system theme values directly using createRippleModifierNode.

LocalTextStyle

Cmn 
val LocalTextStyle: ProvidableCompositionLocal<TextStyle>

CompositionLocal containing the preferred TextStyle that will be used by Text components by default. To set the value for this CompositionLocal, see ProvideTextStyle which will merge any missing TextStyle properties with the existing TextStyle set in this CompositionLocal.

See also
ProvideTextStyle

Extension properties

Colors.primarySurface

Cmn 
val Colors.primarySurface: Color

primarySurface represents the background color of components that are Colors.primary in light theme, and Colors.surface in dark theme, such as androidx.compose.material.TabRow and androidx.compose.material.TopAppBar. This is to reduce brightness of large surfaces in dark theme, aiding contrast and readability. See Dark Theme.

Returns
Color

Colors.primary if in light theme, else Colors.surface