A state object that can be hoisted to control and observe the bottom app bar state. The state is read and updated by a BottomAppBarScrollBehavior implementation.

BottomSheetDefaults

@Stable

object BottomSheetDefaults

Contains the default values used by ModalBottomSheet and BottomSheetScaffold.

BottomSheetScaffoldState

@Stable

class BottomSheetScaffoldState(val bottomSheetState: SheetState, val snackbarHostState: SnackbarHostState)

State of the BottomSheetScaffold composable.

ButtonColors

@Immutable

class ButtonColors(val containerColor: Color, val contentColor: Color, val disabledContainerColor: Color, val disabledContentColor: Color)

Represents the container and content colors used in a button in different states.

ButtonDefaults

object ButtonDefaults

Contains the default values used by all 5 button types.

ButtonElevation

@Stable

class ButtonElevation

Represents the elevation for a button in different states.

CalendarLocale

expect class CalendarLocale

Represents a Locale for the calendar. This locale will be used when formatting dates, determining the input format, and more.

CardColors

@Immutable

class CardColors(val containerColor: Color, val contentColor: Color, val disabledContainerColor: Color, val disabledContentColor: Color)

Represents the container and content colors used in a card in different states.

CardDefaults

object CardDefaults

Contains the default values used by all card types.

CardElevation

@Immutable

class CardElevation

Represents the elevation for a card in different states.

CheckboxColors

@Immutable

class CheckboxColors(val checkedCheckmarkColor: Color, val uncheckedCheckmarkColor: Color, val checkedBoxColor: Color, val uncheckedBoxColor: Color, val disabledCheckedBoxColor: Color, val disabledUncheckedBoxColor: Color, val disabledIndeterminateBoxColor: Color, val checkedBorderColor: Color, val uncheckedBorderColor: Color, val disabledBorderColor: Color, val disabledUncheckedBorderColor: Color, val disabledIndeterminateBorderColor: Color)

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

CheckboxDefaults

object CheckboxDefaults

Defaults used in Checkbox and TriStateCheckbox.

ChipBorder

@Immutable

class ~~ChipBorder~~

Represents the border stroke used in a chip in different states.

ChipColors

@Immutable

class ChipColors(val containerColor: Color, val labelColor: Color, val leadingIconContentColor: Color, val trailingIconContentColor: Color, val disabledContainerColor: Color, val disabledLabelColor: Color, val disabledLeadingIconContentColor: Color, val disabledTrailingIconContentColor: Color)

Represents the container and content colors used in a clickable chip in different states.

ChipElevation

@Immutable

class ChipElevation(val elevation: Dp, val pressedElevation: Dp, val focusedElevation: Dp, val hoveredElevation: Dp, val draggedElevation: Dp, val disabledElevation: Dp)

Represents the elevation used in a selectable chip in different states.

ColorScheme

@Immutable

class ColorScheme(val primary: Color, val onPrimary: Color, val primaryContainer: Color, val onPrimaryContainer: Color, val inversePrimary: Color, val secondary: Color, val onSecondary: Color, val secondaryContainer: Color, val onSecondaryContainer: Color, val tertiary: Color, val onTertiary: Color, val tertiaryContainer: Color, val onTertiaryContainer: Color, val background: Color, val onBackground: Color, val surface: Color, val onSurface: Color, val surfaceVariant: Color, val onSurfaceVariant: Color, val surfaceTint: Color, val inverseSurface: Color, val inverseOnSurface: Color, val error: Color, val onError: Color, val errorContainer: Color, val onErrorContainer: Color, val outline: Color, val outlineVariant: Color, val scrim: Color, val surfaceBright: Color, val surfaceDim: Color, val surfaceContainer: Color, val surfaceContainerHigh: Color, val surfaceContainerHighest: Color, val surfaceContainerLow: Color, val surfaceContainerLowest: Color)

A color scheme holds all the named color parameters for a MaterialTheme.

DatePickerColors

@Immutable

class DatePickerColors(val containerColor: Color, val titleContentColor: Color, val headlineContentColor: Color, val weekdayContentColor: Color, val subheadContentColor: Color, val navigationContentColor: Color, val yearContentColor: Color, val disabledYearContentColor: Color, val currentYearContentColor: Color, val selectedYearContentColor: Color, val disabledSelectedYearContentColor: Color, val selectedYearContainerColor: Color, val disabledSelectedYearContainerColor: Color, val dayContentColor: Color, val disabledDayContentColor: Color, val selectedDayContentColor: Color, val disabledSelectedDayContentColor: Color, val selectedDayContainerColor: Color, val disabledSelectedDayContainerColor: Color, val todayContentColor: Color, val todayDateBorderColor: Color, val dayInSelectionRangeContainerColor: Color, val dayInSelectionRangeContentColor: Color, val dividerColor: Color, val dateTextFieldColors: TextFieldColors)

Represents the colors used by the date picker.

DatePickerDefaults

@Stable

object DatePickerDefaults

Contains default values used by the DatePicker.

DatePickerFormatter

interface DatePickerFormatter

A date formatter interface used by DatePicker.

DatePickerState

@Stable

interface DatePickerState

A state object that can be hoisted to observe the date picker state. See rememberDatePickerState.

DateRangePickerDefaults

@Stable

object DateRangePickerDefaults

Contains default values used by the DateRangePicker.

DateRangePickerState

@Stable

interface DateRangePickerState

A state object that can be hoisted to observe the date range picker state. See rememberDateRangePickerState.

DisplayMode

@Immutable

@JvmInline

value class DisplayMode

Represents the different modes that a date picker can be at.

DividerDefaults

object DividerDefaults

Default values for Divider

DrawerDefaults

object DrawerDefaults

Object to hold default values for ModalNavigationDrawer

DrawerState

@Stable

class DrawerState(initialValue: DrawerValue, confirmStateChange: (DrawerValue) -> Boolean = { true })

State of the ModalNavigationDrawer and DismissibleNavigationDrawer composable.

DrawerValue

enum DrawerValue : Enum<DrawerValue>

Possible values of DrawerState.

ExperimentalMaterial3Api

annotation class ExperimentalMaterial3Api

ExposedDropdownMenuBoxScope

sealed class ExposedDropdownMenuBoxScope

Scope for ExposedDropdownMenuBox.

ExposedDropdownMenuDefaults

object ExposedDropdownMenuDefaults

Contains default values used by Exposed Dropdown Menu.

FabPosition

@JvmInline

value class FabPosition

The possible positions for a FloatingActionButton attached to a Scaffold.

FilterChipDefaults

object FilterChipDefaults

Contains the baseline values used by FilterChip.

FloatingActionButtonDefaults

object FloatingActionButtonDefaults

Contains the default values used by FloatingActionButton

FloatingActionButtonElevation

@Stable

open class FloatingActionButtonElevation

Represents the tonal and shadow elevation for a floating action button in different states.

IconButtonColors

@Immutable

class IconButtonColors(val containerColor: Color, val contentColor: Color, val disabledContainerColor: Color, val disabledContentColor: Color)

Represents the container and content colors used in an icon button in different states.

IconButtonDefaults

object IconButtonDefaults

Contains the default values used by all icon button types.

IconToggleButtonColors

@Immutable

class IconToggleButtonColors(val containerColor: Color, val contentColor: Color, val disabledContainerColor: Color, val disabledContentColor: Color, val checkedContainerColor: Color, val checkedContentColor: Color)

Represents the container and content colors used in a toggleable icon button in different states.

InputChipDefaults

object InputChipDefaults

Contains the baseline values used by an InputChip.

ListItemColors

@Immutable

class ListItemColors(val containerColor: Color, val headlineColor: Color, val leadingIconColor: Color, val overlineColor: Color, val supportingTextColor: Color, val trailingIconColor: Color, val disabledHeadlineColor: Color, val disabledLeadingIconColor: Color, val disabledTrailingIconColor: Color)

Represents the container and content colors used in a list item in different states.

ListItemDefaults

object ListItemDefaults

Contains the default values used by list items.

MaterialTheme

object MaterialTheme

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

MenuAnchorType

@JvmInline

value class MenuAnchorType

The type of element that can serve as a dropdown menu anchor.

MenuDefaults

object MenuDefaults

Contains default values used for DropdownMenu and DropdownMenuItem.

MenuItemColors

@Immutable

class MenuItemColors(val textColor: Color, val leadingIconColor: Color, val trailingIconColor: Color, val disabledTextColor: Color, val disabledLeadingIconColor: Color, val disabledTrailingIconColor: Color)

Represents the text and icon colors used in a menu item at different states.

ModalBottomSheetDefaults

@Immutable

expect object ModalBottomSheetDefaults

Default values for ModalBottomSheet

ModalBottomSheetProperties

@Immutable

expect class ModalBottomSheetProperties(shouldDismissOnBackPress: Boolean = true)

Properties used to customize the behavior of a ModalBottomSheet.

MultiChoiceSegmentedButtonRowScope

interface MultiChoiceSegmentedButtonRowScope : RowScope

Scope for the children of a MultiChoiceSegmentedButtonRow

NavigationBarDefaults

object NavigationBarDefaults

Defaults used in NavigationBar.

NavigationBarItemColors

@Immutable

class NavigationBarItemColors(val selectedIconColor: Color, val selectedTextColor: Color, val selectedIndicatorColor: Color, val unselectedIconColor: Color, val unselectedTextColor: Color, val disabledIconColor: Color, val disabledTextColor: Color)

Represents the colors of the various elements of a navigation item.

NavigationBarItemDefaults

object NavigationBarItemDefaults

Defaults used in NavigationBarItem.

NavigationDrawerItemColors

@Stable

interface NavigationDrawerItemColors

Represents the colors of the various elements of a drawer item.

NavigationDrawerItemDefaults

object NavigationDrawerItemDefaults

Defaults used in NavigationDrawerItem.

NavigationRailDefaults

object NavigationRailDefaults

Defaults used in NavigationRail

NavigationRailItemColors

@Immutable

class NavigationRailItemColors(val selectedIconColor: Color, val selectedTextColor: Color, val selectedIndicatorColor: Color, val unselectedIconColor: Color, val unselectedTextColor: Color, val disabledIconColor: Color, val disabledTextColor: Color)

Represents the colors of the various elements of a navigation item.

NavigationRailItemDefaults

object NavigationRailItemDefaults

Defaults used in NavigationRailItem.

OutlinedTextFieldDefaults

@Immutable

object OutlinedTextFieldDefaults

Contains the default values used by OutlinedTextField. For defaults used in TextField, see TextFieldDefaults.

ProgressIndicatorDefaults

object ProgressIndicatorDefaults

Contains the default values used for LinearProgressIndicator and CircularProgressIndicator.

RadioButtonColors

@Immutable

class RadioButtonColors(val selectedColor: Color, val unselectedColor: Color, val disabledSelectedColor: Color, val disabledUnselectedColor: Color)

Represents the color used by a RadioButton in different states.

RadioButtonDefaults

object RadioButtonDefaults

Defaults used in RadioButton.

RangeSliderState

class RangeSliderState(activeRangeStart: Float = 0.0f, activeRangeEnd: Float = 1.0f, @IntRange(from = 0) val steps: Int = 0, var onValueChangeFinished: () -> Unit? = null, val valueRange: ClosedFloatingPointRange<Float> = 0f..1f)

Class that holds information about RangeSlider's active range.

RichTooltipColors

@Stable

@Immutable

class RichTooltipColors(val containerColor: Color, val contentColor: Color, val titleContentColor: Color, val actionContentColor: Color)

RippleConfiguration

@Immutable

class RippleConfiguration(val color: Color = Color.Unspecified, val rippleAlpha: RippleAlpha? = null)

Configuration for ripple appearance, provided using LocalRippleConfiguration. In most cases the default values should be used, for custom design system use cases you should instead build your own custom ripple using createRippleModifierNode. To disable the ripple, provide null using LocalRippleConfiguration.

RippleDefaults

object RippleDefaults

Default values used by ripple.

ScaffoldDefaults

object ScaffoldDefaults

Object containing various default values for Scaffold component.

SearchBarColors

@Immutable

class SearchBarColors(val containerColor: Color, val dividerColor: Color, val inputFieldColors: TextFieldColors)

Represents the colors used by a search bar in different states.

SearchBarDefaults

object SearchBarDefaults

Defaults used in SearchBar and DockedSearchBar.

SegmentedButtonColors

@Immutable

class SegmentedButtonColors(val activeContainerColor: Color, val activeContentColor: Color, val activeBorderColor: Color, val inactiveContainerColor: Color, val inactiveContentColor: Color, val inactiveBorderColor: Color, val disabledActiveContainerColor: Color, val disabledActiveContentColor: Color, val disabledActiveBorderColor: Color, val disabledInactiveContainerColor: Color, val disabledInactiveContentColor: Color, val disabledInactiveBorderColor: Color)

The different colors used in parts of the SegmentedButton in different states

SegmentedButtonDefaults

@Stable

object SegmentedButtonDefaults

SelectableChipColors

@Immutable

class SelectableChipColors(containerColor: Color, labelColor: Color, leadingIconColor: Color, trailingIconColor: Color, disabledContainerColor: Color, disabledLabelColor: Color, disabledLeadingIconColor: Color, disabledTrailingIconColor: Color, selectedContainerColor: Color, disabledSelectedContainerColor: Color, selectedLabelColor: Color, selectedLeadingIconColor: Color, selectedTrailingIconColor: Color)

Represents the container and content colors used in a selectable chip in different states.

SelectableChipElevation

@Immutable

class SelectableChipElevation(val elevation: Dp, val pressedElevation: Dp, val focusedElevation: Dp, val hoveredElevation: Dp, val draggedElevation: Dp, val disabledElevation: Dp)

Represents the elevation used in a selectable chip in different states.

SelectableDates

@Stable

interface SelectableDates

An interface that controls the selectable dates and years in the date pickers UI.

ShapeDefaults

object ShapeDefaults

Contains the default values used by Shapes

Shapes

@Immutable

class Shapes(val extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall, val small: CornerBasedShape = ShapeDefaults.Small, val medium: CornerBasedShape = ShapeDefaults.Medium, val large: CornerBasedShape = ShapeDefaults.Large, val extraLarge: CornerBasedShape = ShapeDefaults.ExtraLarge)

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

SheetState

@Stable

class SheetState(skipPartiallyExpanded: Boolean, density: Density, initialValue: SheetValue = Hidden, confirmValueChange: (SheetValue) -> Boolean = { true }, skipHiddenState: Boolean = false)

State of a sheet composable, such as ModalBottomSheet

SheetValue

enum SheetValue : Enum<SheetValue>

Possible values of SheetState.

SingleChoiceSegmentedButtonRowScope

interface SingleChoiceSegmentedButtonRowScope : RowScope

Scope for the children of a SingleChoiceSegmentedButtonRow

SliderColors

@Immutable

class SliderColors(val thumbColor: Color, val activeTrackColor: Color, val activeTickColor: Color, val inactiveTrackColor: Color, val inactiveTickColor: Color, val disabledThumbColor: Color, val disabledActiveTrackColor: Color, val disabledActiveTickColor: Color, val disabledInactiveTrackColor: Color, val disabledInactiveTickColor: Color)

Represents the color used by a Slider in different states.

SliderDefaults

@Stable

object SliderDefaults

Object to hold defaults used by Slider

SliderPositions

@Stable

class ~~SliderPositions~~(initialActiveRange: ClosedFloatingPointRange<Float> = 0f..1f, initialTickFractions: FloatArray = floatArrayOf())

Class that holds information about Slider's and RangeSlider's active track and fractional positions where the discrete ticks should be drawn on the track.

SliderState

class SliderState(value: Float = 0.0f, @IntRange(from = 0) val steps: Int = 0, var onValueChangeFinished: () -> Unit? = null, val valueRange: ClosedFloatingPointRange<Float> = 0f..1f) : DraggableState

Class that holds information about Slider's active range.

SnackbarData

@Stable

interface SnackbarData

Interface to represent the data of one particular Snackbar as a piece of the SnackbarHostState.

SnackbarDefaults

object SnackbarDefaults

Contains the default values used for Snackbar.

SnackbarDuration

enum SnackbarDuration : Enum<SnackbarDuration>

Possible durations of the Snackbar in SnackbarHost

SnackbarHostState

@Stable

class SnackbarHostState

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

SnackbarResult

enum SnackbarResult : Enum<SnackbarResult>

Possible results of the SnackbarHostState.showSnackbar call

SnackbarVisuals

@Stable

interface SnackbarVisuals

Interface to represent the visuals of one particular Snackbar as a piece of the SnackbarData.

SuggestionChipDefaults

object SuggestionChipDefaults

Contains the baseline values used by SuggestionChip.

SwipeToDismissBoxDefaults

object SwipeToDismissBoxDefaults

Contains default values for SwipeToDismissBox and SwipeToDismissBoxState.

SwipeToDismissBoxState

class SwipeToDismissBoxState(initialValue: SwipeToDismissBoxValue, density: Density, confirmValueChange: (SwipeToDismissBoxValue) -> Boolean = { true }, positionalThreshold: (totalDistance: Float) -> Float)

State of the SwipeToDismissBox composable.

SwipeToDismissBoxValue

enum SwipeToDismissBoxValue : Enum<SwipeToDismissBoxValue>

The directions in which a SwipeToDismissBox can be dismissed.

SwitchColors

@Immutable

class SwitchColors(val checkedThumbColor: Color, val checkedTrackColor: Color, val checkedBorderColor: Color, val checkedIconColor: Color, val uncheckedThumbColor: Color, val uncheckedTrackColor: Color, val uncheckedBorderColor: Color, val uncheckedIconColor: Color, val disabledCheckedThumbColor: Color, val disabledCheckedTrackColor: Color, val disabledCheckedBorderColor: Color, val disabledCheckedIconColor: Color, val disabledUncheckedThumbColor: Color, val disabledUncheckedTrackColor: Color, val disabledUncheckedBorderColor: Color, val disabledUncheckedIconColor: Color)

Represents the colors used by a Switch in different states

SwitchDefaults

object SwitchDefaults

Contains the default values used by Switch

TabIndicatorScope

interface TabIndicatorScope

Scope for the composable used to render a Tab indicator, this can be used for more complex indicators requiring layout information about the tabs like TabRowDefaults.PrimaryIndicator and TabRowDefaults.SecondaryIndicator

TabPosition

@Immutable

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

TabRowDefaults

object TabRowDefaults

Contains default implementations and values used for TabRow.

TextFieldColors

@Immutable

class TextFieldColors(val focusedTextColor: Color, val unfocusedTextColor: Color, val disabledTextColor: Color, val errorTextColor: Color, val focusedContainerColor: Color, val unfocusedContainerColor: Color, val disabledContainerColor: Color, val errorContainerColor: Color, val cursorColor: Color, val errorCursorColor: Color, val textSelectionColors: TextSelectionColors, val focusedIndicatorColor: Color, val unfocusedIndicatorColor: Color, val disabledIndicatorColor: Color, val errorIndicatorColor: Color, val focusedLeadingIconColor: Color, val unfocusedLeadingIconColor: Color, val disabledLeadingIconColor: Color, val errorLeadingIconColor: Color, val focusedTrailingIconColor: Color, val unfocusedTrailingIconColor: Color, val disabledTrailingIconColor: Color, val errorTrailingIconColor: Color, val focusedLabelColor: Color, val unfocusedLabelColor: Color, val disabledLabelColor: Color, val errorLabelColor: Color, val focusedPlaceholderColor: Color, val unfocusedPlaceholderColor: Color, val disabledPlaceholderColor: Color, val errorPlaceholderColor: Color, val focusedSupportingTextColor: Color, val unfocusedSupportingTextColor: Color, val disabledSupportingTextColor: Color, val errorSupportingTextColor: Color, val focusedPrefixColor: Color, val unfocusedPrefixColor: Color, val disabledPrefixColor: Color, val errorPrefixColor: Color, val focusedSuffixColor: Color, val unfocusedSuffixColor: Color, val disabledSuffixColor: Color, val errorSuffixColor: Color)

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

TextFieldDefaults

@Immutable

object TextFieldDefaults

Contains the default values used by TextField. For defaults used in OutlinedTextField, see OutlinedTextFieldDefaults.

TimePickerColors

@Immutable

class TimePickerColors(val clockDialColor: Color, val selectorColor: Color, val containerColor: Color, val periodSelectorBorderColor: Color, val clockDialSelectedContentColor: Color, val clockDialUnselectedContentColor: Color, val periodSelectorSelectedContainerColor: Color, val periodSelectorUnselectedContainerColor: Color, val periodSelectorSelectedContentColor: Color, val periodSelectorUnselectedContentColor: Color, val timeSelectorSelectedContainerColor: Color, val timeSelectorUnselectedContainerColor: Color, val timeSelectorSelectedContentColor: Color, val timeSelectorUnselectedContentColor: Color)

Represents the colors used by a TimePicker in different states

TimePickerDefaults

@Stable

object TimePickerDefaults

Contains the default values used by TimePicker

TimePickerLayoutType

@Immutable

@JvmInline

value class TimePickerLayoutType

Represents the different configurations for the layout of the Time Picker

TimePickerSelectionMode

@JvmInline

value class TimePickerSelectionMode

The selection mode for the time picker

TimePickerState

interface TimePickerState

A state object that can be hoisted to observe the time picker state. It holds the current values and allows for directly setting those values.

TooltipDefaults

object TooltipDefaults

Tooltip defaults that contain default values for both PlainTooltip and RichTooltip

TooltipScope

sealed interface TooltipScope

Tooltip scope for TooltipBox to be used to obtain the LayoutCoordinates of the anchor content, and to draw a caret for the tooltip.

TooltipState

interface TooltipState

The state that is associated with a TooltipBox. Each instance of TooltipBox should have its own TooltipState.

TopAppBarColors

@Stable

class TopAppBarColors(val containerColor: Color, val scrolledContainerColor: Color, val navigationIconContentColor: Color, val titleContentColor: Color, val actionIconContentColor: Color)

Represents the colors used by a top app bar in different states. This implementation animates the container color according to the top app bar scroll state. It does not animate the leading, headline, or trailing colors.

TopAppBarDefaults

object TopAppBarDefaults

Contains default values used for the top app bar implementations.

TopAppBarScrollBehavior

@Stable

interface TopAppBarScrollBehavior

A TopAppBarScrollBehavior defines how an app bar should behave when the content under it is scrolled.

TopAppBarState

@Stable

class TopAppBarState(initialHeightOffsetLimit: Float, initialHeightOffset: Float, initialContentOffset: Float)

A state object that can be hoisted to control and observe the top app bar state. The state is read and updated by a TopAppBarScrollBehavior implementation.

Typography

@Immutable

class Typography(val displayLarge: TextStyle = TypographyTokens.DisplayLarge, val displayMedium: TextStyle = TypographyTokens.DisplayMedium, val displaySmall: TextStyle = TypographyTokens.DisplaySmall, val headlineLarge: TextStyle = TypographyTokens.HeadlineLarge, val headlineMedium: TextStyle = TypographyTokens.HeadlineMedium, val headlineSmall: TextStyle = TypographyTokens.HeadlineSmall, val titleLarge: TextStyle = TypographyTokens.TitleLarge, val titleMedium: TextStyle = TypographyTokens.TitleMedium, val titleSmall: TextStyle = TypographyTokens.TitleSmall, val bodyLarge: TextStyle = TypographyTokens.BodyLarge, val bodyMedium: TextStyle = TypographyTokens.BodyMedium, val bodySmall: TextStyle = TypographyTokens.BodySmall, val labelLarge: TextStyle = TypographyTokens.LabelLarge, val labelMedium: TextStyle = TypographyTokens.LabelMedium, val labelSmall: TextStyle = TypographyTokens.LabelSmall)

The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.

Properties

LocalAbsoluteTonalElevation

val LocalAbsoluteTonalElevation: 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 surface tonal colors, and is not used for drawing the shadow in a Surface.

LocalContentColor

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 ColorScheme. For example, if the background color is ColorScheme.surface, this color is typically set to ColorScheme.onSurface.

LocalMinimumInteractiveComponentEnforcement

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.

LocalMinimumInteractiveComponentSize

val LocalMinimumInteractiveComponentSize: ProvidableCompositionLocal<Dp>

CompositionLocal that configures the minimum touch target size for Material components (such as Button) to ensure they are accessible. If a component has a visual size that is lower than the minimum touch target size, extra space outside the component will be included. If set to Dp.Unspecified 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

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.

LocalTextStyle

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.

LocalTonalElevationEnabled

val LocalTonalElevationEnabled: ProvidableCompositionLocal<Boolean>

Composition Local used to check if ColorScheme.applyTonalElevation will be applied down the tree.

LocalUseFallbackRippleImplementation

val LocalUseFallbackRippleImplementation: ProvidableCompositionLocal<Boolean>

Temporary CompositionLocal to allow configuring whether the old ripple implementation that uses the deprecated androidx.compose.material.ripple.RippleTheme API should be used in Material components and LocalIndication, instead of the new ripple API. This flag defaults to false, and will be removed after one stable release: it should only be used to temporarily unblock upgrading.

Functions

AlertDialog

@Composable

fun ~~AlertDialog~~(onDismissRequest: () -> Unit, modifier: Modifier = Modifier, properties: DialogProperties = DialogProperties(), content: @Composable () -> Unit)

Basic alert dialog dialog.

@Composable

expect fun AlertDialog(onDismissRequest: () -> Unit, confirmButton: @Composable () -> Unit, modifier: Modifier = Modifier, dismissButton: @Composable () -> Unit? = null, icon: @Composable () -> Unit? = null, title: @Composable () -> Unit? = null, text: @Composable () -> Unit? = null, shape: Shape = AlertDialogDefaults.shape, containerColor: Color = AlertDialogDefaults.containerColor, iconContentColor: Color = AlertDialogDefaults.iconContentColor, titleContentColor: Color = AlertDialogDefaults.titleContentColor, textContentColor: Color = AlertDialogDefaults.textContentColor, tonalElevation: Dp = AlertDialogDefaults.TonalElevation, properties: DialogProperties = DialogProperties())

Material Design basic dialog.

AssistChip

@Composable

fun AssistChip(onClick: () -> Unit, label: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, shape: Shape = AssistChipDefaults.shape, colors: ChipColors = AssistChipDefaults.assistChipColors(), elevation: ChipElevation? = AssistChipDefaults.assistChipElevation(), border: BorderStroke? = AssistChipDefaults.assistChipBorder(enabled), interactionSource: MutableInteractionSource? = null)

Material Design assist chip.

Badge

@Composable

fun Badge(modifier: Modifier = Modifier, containerColor: Color = BadgeDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), content: @Composable RowScope.() -> Unit? = null)

A badge represents dynamic information such as a number of pending requests in a navigation bar.

BadgedBox

@Composable

fun BadgedBox(badge: @Composable BoxScope.() -> Unit, modifier: Modifier = Modifier, content: @Composable BoxScope.() -> Unit)

Material Design badge box.

BasicAlertDialog

@Composable

fun BasicAlertDialog(onDismissRequest: () -> Unit, modifier: Modifier = Modifier, properties: DialogProperties = DialogProperties(), content: @Composable () -> Unit)

Basic alert dialog dialog.

BottomAppBar

@Composable

fun BottomAppBar(modifier: Modifier = Modifier, containerColor: Color = BottomAppBarDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation, contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding, windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets, content: @Composable RowScope.() -> Unit)

@Composable

fun BottomAppBar(actions: @Composable RowScope.() -> Unit, modifier: Modifier = Modifier, floatingActionButton: @Composable () -> Unit? = null, containerColor: Color = BottomAppBarDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation, contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding, windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets)

@Composable

Material Design bottom app bar.

BottomAppBarState

fun BottomAppBarState(initialHeightOffsetLimit: Float, initialHeightOffset: Float, initialContentOffset: Float): BottomAppBarState

Creates a BottomAppBarState.

BottomSheetScaffold

@Composable

fun BottomSheetScaffold(sheetContent: @Composable ColumnScope.() -> Unit, modifier: Modifier = Modifier, scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(), sheetPeekHeight: Dp = BottomSheetDefaults.SheetPeekHeight, sheetMaxWidth: Dp = BottomSheetDefaults.SheetMaxWidth, sheetShape: Shape = BottomSheetDefaults.ExpandedShape, sheetContainerColor: Color = BottomSheetDefaults.ContainerColor, sheetContentColor: Color = contentColorFor(sheetContainerColor), sheetTonalElevation: Dp = 0.dp, sheetShadowElevation: Dp = BottomSheetDefaults.Elevation, sheetDragHandle: @Composable () -> Unit? = { BottomSheetDefaults.DragHandle() }, sheetSwipeEnabled: Boolean = true, topBar: @Composable () -> Unit? = null, snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }, containerColor: Color = MaterialTheme.colorScheme.surface, contentColor: Color = contentColorFor(containerColor), content: @Composable (PaddingValues) -> Unit)

Material Design standard bottom sheet scaffold.

Button

@Composable

fun Button(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.shape, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.ContentPadding, interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

Material Design button.

Card

@Composable

fun Card(modifier: Modifier = Modifier, shape: Shape = CardDefaults.shape, colors: CardColors = CardDefaults.cardColors(), elevation: CardElevation = CardDefaults.cardElevation(), border: BorderStroke? = null, content: @Composable ColumnScope.() -> Unit)

@Composable

fun Card(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = CardDefaults.shape, colors: CardColors = CardDefaults.cardColors(), elevation: CardElevation = CardDefaults.cardElevation(), border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

Material Design filled card.

CenterAlignedTopAppBar

@Composable

fun CenterAlignedTopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, expandedHeight: Dp = TopAppBarDefaults.TopAppBarExpandedHeight, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Material Design center-aligned small top app bar.

Checkbox

@Composable

fun Checkbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, colors: CheckboxColors = CheckboxDefaults.colors(), interactionSource: MutableInteractionSource? = null)

Material Design checkbox.

CircularProgressIndicator

@Composable

fun CircularProgressIndicator(modifier: Modifier = Modifier, color: Color = ProgressIndicatorDefaults.circularColor, strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth, trackColor: Color = ProgressIndicatorDefaults.circularIndeterminateTrackColor, strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularIndeterminateStrokeCap)

Indeterminate Material Design circular progress indicator.

@Composable

fun ~~CircularProgressIndicator~~(progress: Float, modifier: Modifier = Modifier, color: Color = ProgressIndicatorDefaults.circularColor, strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth, trackColor: Color = ProgressIndicatorDefaults.circularTrackColor, strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularDeterminateStrokeCap)

@Composable

fun CircularProgressIndicator(progress: () -> Float, modifier: Modifier = Modifier, color: Color = ProgressIndicatorDefaults.circularColor, strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth, trackColor: Color = ProgressIndicatorDefaults.circularDeterminateTrackColor, strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularDeterminateStrokeCap, gapSize: Dp = ProgressIndicatorDefaults.CircularIndicatorTrackGapSize)

Determinate Material Design circular progress indicator.

contentColorFor

@Composable

@ReadOnlyComposable

fun 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).

contentColorFor

@Stable

fun ColorScheme.contentColorFor(backgroundColor: Color): Color

darkColorScheme

fun darkColorScheme(primary: Color = ColorDarkTokens.Primary, onPrimary: Color = ColorDarkTokens.OnPrimary, primaryContainer: Color = ColorDarkTokens.PrimaryContainer, onPrimaryContainer: Color = ColorDarkTokens.OnPrimaryContainer, inversePrimary: Color = ColorDarkTokens.InversePrimary, secondary: Color = ColorDarkTokens.Secondary, onSecondary: Color = ColorDarkTokens.OnSecondary, secondaryContainer: Color = ColorDarkTokens.SecondaryContainer, onSecondaryContainer: Color = ColorDarkTokens.OnSecondaryContainer, tertiary: Color = ColorDarkTokens.Tertiary, onTertiary: Color = ColorDarkTokens.OnTertiary, tertiaryContainer: Color = ColorDarkTokens.TertiaryContainer, onTertiaryContainer: Color = ColorDarkTokens.OnTertiaryContainer, background: Color = ColorDarkTokens.Background, onBackground: Color = ColorDarkTokens.OnBackground, surface: Color = ColorDarkTokens.Surface, onSurface: Color = ColorDarkTokens.OnSurface, surfaceVariant: Color = ColorDarkTokens.SurfaceVariant, onSurfaceVariant: Color = ColorDarkTokens.OnSurfaceVariant, surfaceTint: Color = primary, inverseSurface: Color = ColorDarkTokens.InverseSurface, inverseOnSurface: Color = ColorDarkTokens.InverseOnSurface, error: Color = ColorDarkTokens.Error, onError: Color = ColorDarkTokens.OnError, errorContainer: Color = ColorDarkTokens.ErrorContainer, onErrorContainer: Color = ColorDarkTokens.OnErrorContainer, outline: Color = ColorDarkTokens.Outline, outlineVariant: Color = ColorDarkTokens.OutlineVariant, scrim: Color = ColorDarkTokens.Scrim, surfaceBright: Color = ColorDarkTokens.SurfaceBright, surfaceContainer: Color = ColorDarkTokens.SurfaceContainer, surfaceContainerHigh: Color = ColorDarkTokens.SurfaceContainerHigh, surfaceContainerHighest: Color = ColorDarkTokens.SurfaceContainerHighest, surfaceContainerLow: Color = ColorDarkTokens.SurfaceContainerLow, surfaceContainerLowest: Color = ColorDarkTokens.SurfaceContainerLowest, surfaceDim: Color = ColorDarkTokens.SurfaceDim): ColorScheme

Returns a dark Material color scheme.

DatePicker

@Composable

fun DatePicker(state: DatePickerState, modifier: Modifier = Modifier, dateFormatter: DatePickerFormatter = remember { DatePickerDefaults.dateFormatter() }, title: @Composable () -> Unit? = { DatePickerDefaults.DatePickerTitle( displayMode = state.displayMode, modifier = Modifier.padding(DatePickerTitlePadding) ) }, headline: @Composable () -> Unit? = { DatePickerDefaults.DatePickerHeadline( selectedDateMillis = state.selectedDateMillis, displayMode = state.displayMode, dateFormatter = dateFormatter, modifier = Modifier.padding(DatePickerHeadlinePadding) ) }, showModeToggle: Boolean = true, colors: DatePickerColors = DatePickerDefaults.colors())

Material Design date picker.

DatePickerDialog

@Composable

expect fun DatePickerDialog(onDismissRequest: () -> Unit, confirmButton: @Composable () -> Unit, modifier: Modifier = Modifier, dismissButton: @Composable () -> Unit? = null, shape: Shape = DatePickerDefaults.shape, tonalElevation: Dp = DatePickerDefaults.TonalElevation, colors: DatePickerColors = DatePickerDefaults.colors(), properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = false), content: @Composable ColumnScope.() -> Unit)

Material Design date picker dialog.

DatePickerState

fun DatePickerState(locale: CalendarLocale, initialSelectedDateMillis: Long? = null, initialDisplayedMonthMillis: Long? = initialSelectedDateMillis, yearRange: IntRange = DatePickerDefaults.YearRange, initialDisplayMode: DisplayMode = DisplayMode.Picker, selectableDates: SelectableDates = DatePickerDefaults.AllDates): DatePickerState

Creates a DatePickerState.

DateRangePicker

@Composable

fun DateRangePicker(state: DateRangePickerState, modifier: Modifier = Modifier, dateFormatter: DatePickerFormatter = remember { DatePickerDefaults.dateFormatter() }, title: @Composable () -> Unit? = { DateRangePickerDefaults.DateRangePickerTitle( displayMode = state.displayMode, modifier = Modifier.padding(DateRangePickerTitlePadding) ) }, headline: @Composable () -> Unit? = { DateRangePickerDefaults.DateRangePickerHeadline( selectedStartDateMillis = state.selectedStartDateMillis, selectedEndDateMillis = state.selectedEndDateMillis, displayMode = state.displayMode, dateFormatter, modifier = Modifier.padding(DateRangePickerHeadlinePadding) ) }, showModeToggle: Boolean = true, colors: DatePickerColors = DatePickerDefaults.colors())

Material Design date range picker.

DateRangePickerState

fun DateRangePickerState(locale: CalendarLocale, initialSelectedStartDateMillis: Long? = null, initialSelectedEndDateMillis: Long? = null, initialDisplayedMonthMillis: Long? = initialSelectedStartDateMillis, yearRange: IntRange = DatePickerDefaults.YearRange, initialDisplayMode: DisplayMode = DisplayMode.Picker, selectableDates: SelectableDates = DatePickerDefaults.AllDates): DateRangePickerState

Creates a DateRangePickerState.

DismissibleDrawerSheet

@Composable

fun DismissibleDrawerSheet(modifier: Modifier = Modifier, drawerShape: Shape = RectangleShape, drawerContainerColor: Color = DrawerDefaults.standardContainerColor, drawerContentColor: Color = contentColorFor(drawerContainerColor), drawerTonalElevation: Dp = DrawerDefaults.DismissibleDrawerElevation, windowInsets: WindowInsets = DrawerDefaults.windowInsets, content: @Composable ColumnScope.() -> Unit)

@Composable

fun DismissibleDrawerSheet(drawerState: DrawerState, modifier: Modifier = Modifier, drawerShape: Shape = RectangleShape, drawerContainerColor: Color = DrawerDefaults.standardContainerColor, drawerContentColor: Color = contentColorFor(drawerContainerColor), drawerTonalElevation: Dp = DrawerDefaults.DismissibleDrawerElevation, windowInsets: WindowInsets = DrawerDefaults.windowInsets, content: @Composable ColumnScope.() -> Unit)

Content inside of a dismissible navigation drawer.

DismissibleNavigationDrawer

@Composable

fun DismissibleNavigationDrawer(drawerContent: @Composable () -> Unit, modifier: Modifier = Modifier, drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed), gesturesEnabled: Boolean = true, content: @Composable () -> Unit)

Material Design navigation drawer.

Divider

@Composable

fun ~~Divider~~(modifier: Modifier = Modifier, thickness: Dp = DividerDefaults.Thickness, color: Color = DividerDefaults.color)

DockedSearchBar

@Composable

fun DockedSearchBar(inputField: @Composable () -> Unit, expanded: Boolean, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, shape: Shape = SearchBarDefaults.dockedShape, colors: SearchBarColors = SearchBarDefaults.colors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, content: @Composable ColumnScope.() -> Unit)

Material Design search.

@Composable

fun ~~DockedSearchBar~~(query: String, onQueryChange: (String) -> Unit, onSearch: (String) -> Unit, active: Boolean, onActiveChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, placeholder: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, shape: Shape = SearchBarDefaults.dockedShape, colors: SearchBarColors = SearchBarDefaults.colors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

DropdownMenu

@Composable

expect fun DropdownMenu(expanded: Boolean, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, offset: DpOffset = DpOffset(0.dp, 0.dp), scrollState: ScrollState = rememberScrollState(), properties: PopupProperties = DefaultMenuProperties, shape: Shape = MenuDefaults.shape, containerColor: Color = MenuDefaults.containerColor, tonalElevation: Dp = MenuDefaults.TonalElevation, shadowElevation: Dp = MenuDefaults.ShadowElevation, border: BorderStroke? = null, content: @Composable ColumnScope.() -> Unit)

Material Design dropdown menu.

DropdownMenuItem

@Composable

expect fun DropdownMenuItem(text: @Composable () -> Unit, onClick: () -> Unit, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, enabled: Boolean = true, colors: MenuItemColors = MenuDefaults.itemColors(), contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding, interactionSource: MutableInteractionSource? = null)

Material Design dropdown menu item.

ElevatedAssistChip

@Composable

fun ElevatedAssistChip(onClick: () -> Unit, label: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, shape: Shape = AssistChipDefaults.shape, colors: ChipColors = AssistChipDefaults.elevatedAssistChipColors(), elevation: ChipElevation? = AssistChipDefaults.elevatedAssistChipElevation(), border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null)

Material Design elevated assist chip.

ElevatedButton

@Composable

fun ElevatedButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.elevatedShape, colors: ButtonColors = ButtonDefaults.elevatedButtonColors(), elevation: ButtonElevation? = ButtonDefaults.elevatedButtonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.ContentPadding, interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

Material Design elevated button.

ElevatedCard

@Composable

fun ElevatedCard(modifier: Modifier = Modifier, shape: Shape = CardDefaults.elevatedShape, colors: CardColors = CardDefaults.elevatedCardColors(), elevation: CardElevation = CardDefaults.elevatedCardElevation(), content: @Composable ColumnScope.() -> Unit)

@Composable

fun ElevatedCard(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = CardDefaults.elevatedShape, colors: CardColors = CardDefaults.elevatedCardColors(), elevation: CardElevation = CardDefaults.elevatedCardElevation(), interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

Material Design elevated card.

ElevatedFilterChip

@Composable

fun ElevatedFilterChip(selected: Boolean, onClick: () -> Unit, label: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, shape: Shape = FilterChipDefaults.shape, colors: SelectableChipColors = FilterChipDefaults.elevatedFilterChipColors(), elevation: SelectableChipElevation? = FilterChipDefaults.elevatedFilterChipElevation(), border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null)

Material Design elevated filter chip.

ElevatedSuggestionChip

@Composable

fun ElevatedSuggestionChip(onClick: () -> Unit, label: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, icon: @Composable () -> Unit? = null, shape: Shape = SuggestionChipDefaults.shape, colors: ChipColors = SuggestionChipDefaults.elevatedSuggestionChipColors(), elevation: ChipElevation? = SuggestionChipDefaults.elevatedSuggestionChipElevation(), border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null)

Material Design elevated suggestion chip.

ExposedDropdownMenuBox

@Composable

expect fun ExposedDropdownMenuBox(expanded: Boolean, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, content: @Composable ExposedDropdownMenuBoxScope.() -> Unit)

Material Design Exposed Dropdown Menu.

ExtendedFloatingActionButton

@Composable

fun ExtendedFloatingActionButton(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = FloatingActionButtonDefaults.extendedFabShape, containerColor: Color = FloatingActionButtonDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(), interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

@Composable

fun ExtendedFloatingActionButton(text: @Composable () -> Unit, icon: @Composable () -> Unit, onClick: () -> Unit, modifier: Modifier = Modifier, expanded: Boolean = true, shape: Shape = FloatingActionButtonDefaults.extendedFabShape, containerColor: Color = FloatingActionButtonDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(), interactionSource: MutableInteractionSource? = null)

Material Design extended floating action button.

FilledIconButton

@Composable

fun FilledIconButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.filledShape, colors: IconButtonColors = IconButtonDefaults.filledIconButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design filled icon button.

FilledIconToggleButton

@Composable

fun FilledIconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.filledShape, colors: IconToggleButtonColors = IconButtonDefaults.filledIconToggleButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design filled icon toggle button.

FilledTonalButton

@Composable

fun FilledTonalButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.filledTonalShape, colors: ButtonColors = ButtonDefaults.filledTonalButtonColors(), elevation: ButtonElevation? = ButtonDefaults.filledTonalButtonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.ContentPadding, interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

Material Design filled tonal button.

FilledTonalIconButton

@Composable

fun FilledTonalIconButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.filledShape, colors: IconButtonColors = IconButtonDefaults.filledTonalIconButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design filled tonal icon button.

FilledTonalIconToggleButton

@Composable

fun FilledTonalIconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.filledShape, colors: IconToggleButtonColors = IconButtonDefaults.filledTonalIconToggleButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design filled tonal icon toggle button.

FilterChip

@Composable

fun FilterChip(selected: Boolean, onClick: () -> Unit, label: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, shape: Shape = FilterChipDefaults.shape, colors: SelectableChipColors = FilterChipDefaults.filterChipColors(), elevation: SelectableChipElevation? = FilterChipDefaults.filterChipElevation(), border: BorderStroke? = FilterChipDefaults.filterChipBorder(enabled, selected), interactionSource: MutableInteractionSource? = null)

Material Design filter chip.

FloatingActionButton

@Composable

fun FloatingActionButton(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = FloatingActionButtonDefaults.shape, containerColor: Color = FloatingActionButtonDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design floating action button.

HorizontalDivider

@Composable

fun HorizontalDivider(modifier: Modifier = Modifier, thickness: Dp = DividerDefaults.Thickness, color: Color = DividerDefaults.color)

Material Design divider.

Icon

@Composable

fun Icon(bitmap: ImageBitmap, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current)

A Material Design icon component that draws bitmap using tint, with a default value of LocalContentColor. If bitmap has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

@Composable

fun Icon(painter: Painter, tint: ColorProducer?, contentDescription: String?, modifier: Modifier = Modifier)

A Material Design icon component that draws painter using tint. If painter has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use null for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

@Composable

fun Icon(painter: Painter, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current)

A Material Design icon component that draws painter using tint, with a default value of LocalContentColor. If painter has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

@Composable

fun Icon(imageVector: ImageVector, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current)

A Material Design icon component that draws imageVector using tint, with a default value of LocalContentColor. If imageVector has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

IconButton

@Composable

fun IconButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconButtonColors = IconButtonDefaults.iconButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design standard icon button.

IconToggleButton

@Composable

fun IconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconToggleButtonColors = IconButtonDefaults.iconToggleButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design standard icon toggle button.

InputChip

@Composable

fun InputChip(selected: Boolean, onClick: () -> Unit, label: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, leadingIcon: @Composable () -> Unit? = null, avatar: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, shape: Shape = InputChipDefaults.shape, colors: SelectableChipColors = InputChipDefaults.inputChipColors(), elevation: SelectableChipElevation? = InputChipDefaults.inputChipElevation(), border: BorderStroke? = InputChipDefaults.inputChipBorder(enabled, selected), interactionSource: MutableInteractionSource? = null)

Material Design input chip.

Label

@Composable

fun Label(label: @Composable TooltipScope.() -> Unit, modifier: Modifier = Modifier, interactionSource: MutableInteractionSource? = null, isPersistent: Boolean = false, content: @Composable () -> Unit)

Label component that will append a label to content. The positioning logic uses TooltipDefaults.rememberPlainTooltipPositionProvider.

LargeFloatingActionButton

@Composable

fun LargeFloatingActionButton(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = FloatingActionButtonDefaults.largeShape, containerColor: Color = FloatingActionButtonDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design large floating action button.

LargeTopAppBar

@Composable

fun LargeTopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, collapsedHeight: Dp = TopAppBarDefaults.LargeAppBarCollapsedHeight, expandedHeight: Dp = TopAppBarDefaults.LargeAppBarExpandedHeight, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarDefaults.largeTopAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Material Design large top app bar.

LeadingIconTab

@Composable

fun LeadingIconTab(selected: Boolean, onClick: () -> Unit, text: @Composable () -> Unit, icon: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, selectedContentColor: Color = LocalContentColor.current, unselectedContentColor: Color = selectedContentColor, interactionSource: MutableInteractionSource? = null)

Material Design tab.

lightColorScheme

fun lightColorScheme(primary: Color = ColorLightTokens.Primary, onPrimary: Color = ColorLightTokens.OnPrimary, primaryContainer: Color = ColorLightTokens.PrimaryContainer, onPrimaryContainer: Color = ColorLightTokens.OnPrimaryContainer, inversePrimary: Color = ColorLightTokens.InversePrimary, secondary: Color = ColorLightTokens.Secondary, onSecondary: Color = ColorLightTokens.OnSecondary, secondaryContainer: Color = ColorLightTokens.SecondaryContainer, onSecondaryContainer: Color = ColorLightTokens.OnSecondaryContainer, tertiary: Color = ColorLightTokens.Tertiary, onTertiary: Color = ColorLightTokens.OnTertiary, tertiaryContainer: Color = ColorLightTokens.TertiaryContainer, onTertiaryContainer: Color = ColorLightTokens.OnTertiaryContainer, background: Color = ColorLightTokens.Background, onBackground: Color = ColorLightTokens.OnBackground, surface: Color = ColorLightTokens.Surface, onSurface: Color = ColorLightTokens.OnSurface, surfaceVariant: Color = ColorLightTokens.SurfaceVariant, onSurfaceVariant: Color = ColorLightTokens.OnSurfaceVariant, surfaceTint: Color = primary, inverseSurface: Color = ColorLightTokens.InverseSurface, inverseOnSurface: Color = ColorLightTokens.InverseOnSurface, error: Color = ColorLightTokens.Error, onError: Color = ColorLightTokens.OnError, errorContainer: Color = ColorLightTokens.ErrorContainer, onErrorContainer: Color = ColorLightTokens.OnErrorContainer, outline: Color = ColorLightTokens.Outline, outlineVariant: Color = ColorLightTokens.OutlineVariant, scrim: Color = ColorLightTokens.Scrim, surfaceBright: Color = ColorLightTokens.SurfaceBright, surfaceContainer: Color = ColorLightTokens.SurfaceContainer, surfaceContainerHigh: Color = ColorLightTokens.SurfaceContainerHigh, surfaceContainerHighest: Color = ColorLightTokens.SurfaceContainerHighest, surfaceContainerLow: Color = ColorLightTokens.SurfaceContainerLow, surfaceContainerLowest: Color = ColorLightTokens.SurfaceContainerLowest, surfaceDim: Color = ColorLightTokens.SurfaceDim): ColorScheme

Returns a light Material color scheme.

LinearProgressIndicator

@Composable

fun LinearProgressIndicator(modifier: Modifier = Modifier, color: Color = ProgressIndicatorDefaults.linearColor, trackColor: Color = ProgressIndicatorDefaults.linearTrackColor, strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap, gapSize: Dp = ProgressIndicatorDefaults.LinearIndicatorTrackGapSize)

Indeterminate Material Design linear progress indicator.

@Composable

fun ~~LinearProgressIndicator~~(progress: Float, modifier: Modifier = Modifier, color: Color = ProgressIndicatorDefaults.linearColor, trackColor: Color = ProgressIndicatorDefaults.linearTrackColor, strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap)

@Composable

fun LinearProgressIndicator(progress: () -> Float, modifier: Modifier = Modifier, color: Color = ProgressIndicatorDefaults.linearColor, trackColor: Color = ProgressIndicatorDefaults.linearTrackColor, strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap, gapSize: Dp = ProgressIndicatorDefaults.LinearIndicatorTrackGapSize, drawStopIndicator: DrawScope.() -> Unit = { drawStopIndicator( drawScope = this, stopSize = ProgressIndicatorDefaults.LinearTrackStopIndicatorSize, color = color, strokeCap = strokeCap ) })

Determinate Material Design linear progress indicator.

ListItem

@Composable

fun ListItem(headlineContent: @Composable () -> Unit, modifier: Modifier = Modifier, overlineContent: @Composable () -> Unit? = null, supportingContent: @Composable () -> Unit? = null, leadingContent: @Composable () -> Unit? = null, trailingContent: @Composable () -> Unit? = null, colors: ListItemColors = ListItemDefaults.colors(), tonalElevation: Dp = ListItemDefaults.Elevation, shadowElevation: Dp = ListItemDefaults.Elevation)

Material Design list item.

MaterialTheme

@Composable

fun MaterialTheme(colorScheme: ColorScheme = MaterialTheme.colorScheme, shapes: Shapes = MaterialTheme.shapes, typography: Typography = MaterialTheme.typography, content: @Composable () -> Unit)

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

MediumTopAppBar

@Composable

fun MediumTopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, collapsedHeight: Dp = TopAppBarDefaults.MediumAppBarCollapsedHeight, expandedHeight: Dp = TopAppBarDefaults.MediumAppBarExpandedHeight, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarDefaults.mediumTopAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Material Design medium top app bar.

minimumInteractiveComponentSize

@Stable

fun Modifier.minimumInteractiveComponentSize(): Modifier

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

ModalBottomSheet

@Composable

fun ModalBottomSheet(onDismissRequest: () -> Unit, modifier: Modifier = Modifier, sheetState: SheetState = rememberModalBottomSheetState(), sheetMaxWidth: Dp = BottomSheetDefaults.SheetMaxWidth, shape: Shape = BottomSheetDefaults.ExpandedShape, containerColor: Color = BottomSheetDefaults.ContainerColor, contentColor: Color = contentColorFor(containerColor), tonalElevation: Dp = 0.dp, scrimColor: Color = BottomSheetDefaults.ScrimColor, dragHandle: @Composable () -> Unit? = { BottomSheetDefaults.DragHandle() }, contentWindowInsets: @Composable () -> WindowInsets = { BottomSheetDefaults.windowInsets }, properties: ModalBottomSheetProperties = ModalBottomSheetDefaults.properties, content: @Composable ColumnScope.() -> Unit)

Material Design modal bottom sheet.

ModalDrawerSheet

@Composable

fun ModalDrawerSheet(modifier: Modifier = Modifier, drawerShape: Shape = DrawerDefaults.shape, drawerContainerColor: Color = DrawerDefaults.modalContainerColor, drawerContentColor: Color = contentColorFor(drawerContainerColor), drawerTonalElevation: Dp = DrawerDefaults.ModalDrawerElevation, windowInsets: WindowInsets = DrawerDefaults.windowInsets, content: @Composable ColumnScope.() -> Unit)

@Composable

fun ModalDrawerSheet(drawerState: DrawerState, modifier: Modifier = Modifier, drawerShape: Shape = DrawerDefaults.shape, drawerContainerColor: Color = DrawerDefaults.modalContainerColor, drawerContentColor: Color = contentColorFor(drawerContainerColor), drawerTonalElevation: Dp = DrawerDefaults.ModalDrawerElevation, windowInsets: WindowInsets = DrawerDefaults.windowInsets, content: @Composable ColumnScope.() -> Unit)

Content inside of a modal navigation drawer.

ModalNavigationDrawer

@Composable

fun ModalNavigationDrawer(drawerContent: @Composable () -> Unit, modifier: Modifier = Modifier, drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed), gesturesEnabled: Boolean = true, scrimColor: Color = DrawerDefaults.scrimColor, content: @Composable () -> Unit)

Material Design navigation drawer.

MultiChoiceSegmentedButtonRow

@Composable

fun MultiChoiceSegmentedButtonRow(modifier: Modifier = Modifier, space: Dp = SegmentedButtonDefaults.BorderWidth, content: @Composable MultiChoiceSegmentedButtonRowScope.() -> Unit)

Material Segmented Button.

NavigationBar

@Composable

fun NavigationBar(modifier: Modifier = Modifier, containerColor: Color = NavigationBarDefaults.containerColor, contentColor: Color = MaterialTheme.colorScheme.contentColorFor(containerColor), tonalElevation: Dp = NavigationBarDefaults.Elevation, windowInsets: WindowInsets = NavigationBarDefaults.windowInsets, content: @Composable RowScope.() -> Unit)

Material Design bottom navigation bar.

NavigationBarItem

@Composable

fun RowScope.NavigationBarItem(selected: Boolean, onClick: () -> Unit, icon: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, label: @Composable () -> Unit? = null, alwaysShowLabel: Boolean = true, colors: NavigationBarItemColors = NavigationBarItemDefaults.colors(), interactionSource: MutableInteractionSource? = null)

Material Design navigation bar item.

NavigationDrawerItem

@Composable

fun NavigationDrawerItem(label: @Composable () -> Unit, selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, icon: @Composable () -> Unit? = null, badge: @Composable () -> Unit? = null, shape: Shape = NavigationDrawerTokens.ActiveIndicatorShape.value, colors: NavigationDrawerItemColors = NavigationDrawerItemDefaults.colors(), interactionSource: MutableInteractionSource? = null)

Material Design navigation drawer item.

NavigationRail

@Composable

fun NavigationRail(modifier: Modifier = Modifier, containerColor: Color = NavigationRailDefaults.ContainerColor, contentColor: Color = contentColorFor(containerColor), header: @Composable ColumnScope.() -> Unit? = null, windowInsets: WindowInsets = NavigationRailDefaults.windowInsets, content: @Composable ColumnScope.() -> Unit)

Material Design bottom navigation rail.

NavigationRailItem

@Composable

fun NavigationRailItem(selected: Boolean, onClick: () -> Unit, icon: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, label: @Composable () -> Unit? = null, alwaysShowLabel: Boolean = true, colors: NavigationRailItemColors = NavigationRailItemDefaults.colors(), interactionSource: MutableInteractionSource? = null)

Material Design navigation rail item.

OutlinedButton

@Composable

fun OutlinedButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.outlinedShape, colors: ButtonColors = ButtonDefaults.outlinedButtonColors(), elevation: ButtonElevation? = null, border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled), contentPadding: PaddingValues = ButtonDefaults.ContentPadding, interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

Material Design outlined button.

OutlinedCard

@Composable

fun OutlinedCard(modifier: Modifier = Modifier, shape: Shape = CardDefaults.outlinedShape, colors: CardColors = CardDefaults.outlinedCardColors(), elevation: CardElevation = CardDefaults.outlinedCardElevation(), border: BorderStroke = CardDefaults.outlinedCardBorder(), content: @Composable ColumnScope.() -> Unit)

@Composable

fun OutlinedCard(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = CardDefaults.outlinedShape, colors: CardColors = CardDefaults.outlinedCardColors(), elevation: CardElevation = CardDefaults.outlinedCardElevation(), border: BorderStroke = CardDefaults.outlinedCardBorder(enabled), interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

Material Design outlined card.

OutlinedIconButton

@Composable

fun OutlinedIconButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.outlinedShape, colors: IconButtonColors = IconButtonDefaults.outlinedIconButtonColors(), border: BorderStroke? = IconButtonDefaults.outlinedIconButtonBorder(enabled), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design outlined icon button.

OutlinedIconToggleButton

@Composable

fun OutlinedIconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.outlinedShape, colors: IconToggleButtonColors = IconButtonDefaults.outlinedIconToggleButtonColors(), border: BorderStroke? = IconButtonDefaults.outlinedIconToggleButtonBorder(enabled, checked), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design outlined icon toggle button.

OutlinedTextField

@Composable

fun OutlinedTextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = LocalTextStyle.current, label: @Composable () -> Unit? = null, placeholder: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, prefix: @Composable () -> Unit? = null, suffix: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, singleLine: Boolean = false, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, interactionSource: MutableInteractionSource? = null, shape: Shape = OutlinedTextFieldDefaults.shape, colors: TextFieldColors = OutlinedTextFieldDefaults.colors())

@Composable

fun OutlinedTextField(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = LocalTextStyle.current, label: @Composable () -> Unit? = null, placeholder: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, prefix: @Composable () -> Unit? = null, suffix: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, singleLine: Boolean = false, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, interactionSource: MutableInteractionSource? = null, shape: Shape = OutlinedTextFieldDefaults.shape, colors: TextFieldColors = OutlinedTextFieldDefaults.colors())

Material Design outlined text field.

PermanentDrawerSheet

@Composable

fun PermanentDrawerSheet(modifier: Modifier = Modifier, drawerShape: Shape = RectangleShape, drawerContainerColor: Color = DrawerDefaults.standardContainerColor, drawerContentColor: Color = contentColorFor(drawerContainerColor), drawerTonalElevation: Dp = DrawerDefaults.PermanentDrawerElevation, windowInsets: WindowInsets = DrawerDefaults.windowInsets, content: @Composable ColumnScope.() -> Unit)

Content inside of a permanent navigation drawer.

PermanentNavigationDrawer

@Composable

fun PermanentNavigationDrawer(drawerContent: @Composable () -> Unit, modifier: Modifier = Modifier, content: @Composable () -> Unit)

Material Design navigation permanent drawer.

PlainTooltip

@Composable

fun TooltipScope.PlainTooltip(modifier: Modifier = Modifier, caretSize: DpSize = DpSize.Unspecified, shape: Shape = TooltipDefaults.plainTooltipContainerShape, contentColor: Color = TooltipDefaults.plainTooltipContentColor, containerColor: Color = TooltipDefaults.plainTooltipContainerColor, tonalElevation: Dp = 0.dp, shadowElevation: Dp = 0.dp, content: @Composable () -> Unit)

Plain tooltip that provides a descriptive message.

PrimaryScrollableTabRow

@Composable

fun PrimaryScrollableTabRow(selectedTabIndex: Int, modifier: Modifier = Modifier, scrollState: ScrollState = rememberScrollState(), containerColor: Color = TabRowDefaults.primaryContainerColor, contentColor: Color = TabRowDefaults.primaryContentColor, edgePadding: Dp = TabRowDefaults.ScrollableTabRowEdgeStartPadding, indicator: @Composable TabIndicatorScope.() -> Unit = @Composable { TabRowDefaults.PrimaryIndicator( Modifier.tabIndicatorOffset(selectedTabIndex, matchContentSize = true), width = Dp.Unspecified, ) }, divider: @Composable () -> Unit = @Composable { HorizontalDivider() }, tabs: @Composable () -> Unit)

Material Design Scrollable Primary tabs

PrimaryTabRow

@Composable

fun PrimaryTabRow(selectedTabIndex: Int, modifier: Modifier = Modifier, containerColor: Color = TabRowDefaults.primaryContainerColor, contentColor: Color = TabRowDefaults.primaryContentColor, indicator: @Composable TabIndicatorScope.() -> Unit = { TabRowDefaults.PrimaryIndicator( modifier = Modifier.tabIndicatorOffset(selectedTabIndex, matchContentSize = true), width = Dp.Unspecified, ) }, divider: @Composable () -> Unit = @Composable { HorizontalDivider() }, tabs: @Composable () -> Unit)

Material Design Fixed Primary tabs

ProvideTextStyle

@Composable

fun ProvideTextStyle(value: TextStyle, content: @Composable () -> Unit)

This function is used to set the current value of LocalTextStyle, merging the given style with the current style values for any missing attributes. Any Text components included in this component's content will be styled with this style unless styled explicitly.

RadioButton

@Composable

fun RadioButton(selected: Boolean, onClick: () -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, colors: RadioButtonColors = RadioButtonDefaults.colors(), interactionSource: MutableInteractionSource? = null)

Material Design radio button.

RangeSlider

@Composable

fun RangeSlider(state: RangeSliderState, modifier: Modifier = Modifier, enabled: Boolean = true, colors: SliderColors = SliderDefaults.colors(), startInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, endInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, startThumb: @Composable (RangeSliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = startInteractionSource, colors = colors, enabled = enabled ) }, endThumb: @Composable (RangeSliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = endInteractionSource, colors = colors, enabled = enabled ) }, track: @Composable (RangeSliderState) -> Unit = { rangeSliderState -> SliderDefaults.Track( colors = colors, enabled = enabled, rangeSliderState = rangeSliderState ) })

@Composable

fun RangeSlider(value: ClosedFloatingPointRange<Float>, onValueChange: (ClosedFloatingPointRange<Float>) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, onValueChangeFinished: () -> Unit? = null, colors: SliderColors = SliderDefaults.colors(), startInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, endInteractionSource: MutableInteractionSource = remember { MutableInteractionSource() }, startThumb: @Composable (RangeSliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = startInteractionSource, colors = colors, enabled = enabled ) }, endThumb: @Composable (RangeSliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = endInteractionSource, colors = colors, enabled = enabled ) }, track: @Composable (RangeSliderState) -> Unit = { rangeSliderState -> SliderDefaults.Track( colors = colors, enabled = enabled, rangeSliderState = rangeSliderState ) }, @IntRange(from = 0) steps: Int = 0)

Material Design Range slider.

rememberBottomAppBarState

@Composable

fun rememberBottomAppBarState(initialHeightOffsetLimit: Float = -Float.MAX_VALUE, initialHeightOffset: Float = 0.0f, initialContentOffset: Float = 0.0f): BottomAppBarState

Creates a BottomAppBarState that is remembered across compositions.

rememberBottomSheetScaffoldState

@Composable

fun rememberBottomSheetScaffoldState(bottomSheetState: SheetState = rememberStandardBottomSheetState(), snackbarHostState: SnackbarHostState = remember { SnackbarHostState() }): BottomSheetScaffoldState

Create and remember a BottomSheetScaffoldState.

rememberDatePickerState

@Composable

fun rememberDatePickerState(initialSelectedDateMillis: Long? = null, initialDisplayedMonthMillis: Long? = initialSelectedDateMillis, yearRange: IntRange = DatePickerDefaults.YearRange, initialDisplayMode: DisplayMode = DisplayMode.Picker, selectableDates: SelectableDates = DatePickerDefaults.AllDates): DatePickerState

Creates a DatePickerState for a DatePicker that is remembered across compositions.

rememberDateRangePickerState

@Composable

fun rememberDateRangePickerState(initialSelectedStartDateMillis: Long? = null, initialSelectedEndDateMillis: Long? = null, initialDisplayedMonthMillis: Long? = initialSelectedStartDateMillis, yearRange: IntRange = DatePickerDefaults.YearRange, initialDisplayMode: DisplayMode = DisplayMode.Picker, selectableDates: SelectableDates = DatePickerDefaults.AllDates): DateRangePickerState

Creates a DateRangePickerState for a DateRangePicker that is remembered across compositions.

rememberDrawerState

@Composable

fun rememberDrawerState(initialValue: DrawerValue, confirmStateChange: (DrawerValue) -> Boolean = { true }): DrawerState

Create and remember a DrawerState.

rememberModalBottomSheetState

@Composable

fun rememberModalBottomSheetState(skipPartiallyExpanded: Boolean = false, confirmValueChange: (SheetValue) -> Boolean = { true }): SheetState

Create and remember a SheetState for ModalBottomSheet.

rememberStandardBottomSheetState

@Composable

fun rememberStandardBottomSheetState(initialValue: SheetValue = PartiallyExpanded, confirmValueChange: (SheetValue) -> Boolean = { true }, skipHiddenState: Boolean = true): SheetState

Create and remember a SheetState for BottomSheetScaffold.

rememberSwipeToDismissBoxState

@Composable

fun rememberSwipeToDismissBoxState(initialValue: SwipeToDismissBoxValue = SwipeToDismissBoxValue.Settled, confirmValueChange: (SwipeToDismissBoxValue) -> Boolean = { true }, positionalThreshold: (totalDistance: Float) -> Float = SwipeToDismissBoxDefaults.positionalThreshold): SwipeToDismissBoxState

Create and remember a SwipeToDismissBoxState.

rememberTimePickerState

@Composable

fun rememberTimePickerState(initialHour: Int = 0, initialMinute: Int = 0, is24Hour: Boolean = is24HourFormat): TimePickerState

Creates a TimePickerState for a time picker that is remembered across compositions and configuration changes.

rememberTooltipState

@Composable

fun rememberTooltipState(initialIsVisible: Boolean = false, isPersistent: Boolean = false, mutatorMutex: MutatorMutex = BasicTooltipDefaults.GlobalMutatorMutex): TooltipState

Create and remember the default TooltipState for TooltipBox.

rememberTopAppBarState

@Composable

fun rememberTopAppBarState(initialHeightOffsetLimit: Float = -Float.MAX_VALUE, initialHeightOffset: Float = 0.0f, initialContentOffset: Float = 0.0f): TopAppBarState

Creates a TopAppBarState that is remembered across compositions.

RichTooltip

@Composable

fun TooltipScope.RichTooltip(modifier: Modifier = Modifier, title: @Composable () -> Unit? = null, action: @Composable () -> Unit? = null, caretSize: DpSize = DpSize.Unspecified, shape: Shape = TooltipDefaults.richTooltipContainerShape, colors: RichTooltipColors = TooltipDefaults.richTooltipColors(), tonalElevation: Dp = ElevationTokens.Level0, shadowElevation: Dp = RichTooltipTokens.ContainerElevation, text: @Composable () -> Unit)

Rich text tooltip that allows the user to pass in a title, text, and action. Tooltips are used to provide a descriptive message.

ripple

@Stable

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

@Stable

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.

Scaffold

@Composable

fun Scaffold(modifier: Modifier = Modifier, topBar: @Composable () -> Unit = {}, bottomBar: @Composable () -> Unit = {}, snackbarHost: @Composable () -> Unit = {}, floatingActionButton: @Composable () -> Unit = {}, floatingActionButtonPosition: FabPosition = FabPosition.End, containerColor: Color = MaterialTheme.colorScheme.background, contentColor: Color = contentColorFor(containerColor), contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets, content: @Composable (PaddingValues) -> Unit)

Material Design layout.

ScrollableTabRow

@Composable

fun ScrollableTabRow(selectedTabIndex: Int, modifier: Modifier = Modifier, containerColor: Color = TabRowDefaults.primaryContainerColor, contentColor: Color = TabRowDefaults.primaryContentColor, edgePadding: Dp = TabRowDefaults.ScrollableTabRowEdgeStartPadding, indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions -> TabRowDefaults.SecondaryIndicator( Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex]) ) }, divider: @Composable () -> Unit = @Composable { HorizontalDivider() }, tabs: @Composable () -> Unit)

Material Design tabs

SearchBar

@Composable

fun SearchBar(inputField: @Composable () -> Unit, expanded: Boolean, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, shape: Shape = SearchBarDefaults.inputFieldShape, colors: SearchBarColors = SearchBarDefaults.colors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, windowInsets: WindowInsets = SearchBarDefaults.windowInsets, content: @Composable ColumnScope.() -> Unit)

Material Design search.

@Composable

fun ~~SearchBar~~(query: String, onQueryChange: (String) -> Unit, onSearch: (String) -> Unit, active: Boolean, onActiveChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, placeholder: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, shape: Shape = SearchBarDefaults.inputFieldShape, colors: SearchBarColors = SearchBarDefaults.colors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, windowInsets: WindowInsets = SearchBarDefaults.windowInsets, interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

SecondaryScrollableTabRow

@Composable

fun SecondaryScrollableTabRow(selectedTabIndex: Int, modifier: Modifier = Modifier, scrollState: ScrollState = rememberScrollState(), containerColor: Color = TabRowDefaults.secondaryContainerColor, contentColor: Color = TabRowDefaults.secondaryContentColor, edgePadding: Dp = TabRowDefaults.ScrollableTabRowEdgeStartPadding, indicator: @Composable TabIndicatorScope.() -> Unit = @Composable { TabRowDefaults.SecondaryIndicator( Modifier.tabIndicatorOffset(selectedTabIndex, matchContentSize = false) ) }, divider: @Composable () -> Unit = @Composable { HorizontalDivider() }, tabs: @Composable () -> Unit)

Material Design Scrollable Secondary tabs

SecondaryTabRow

@Composable

fun SecondaryTabRow(selectedTabIndex: Int, modifier: Modifier = Modifier, containerColor: Color = TabRowDefaults.secondaryContainerColor, contentColor: Color = TabRowDefaults.secondaryContentColor, indicator: @Composable TabIndicatorScope.() -> Unit = @Composable { TabRowDefaults.SecondaryIndicator( Modifier.tabIndicatorOffset(selectedTabIndex, matchContentSize = false) ) }, divider: @Composable () -> Unit = @Composable { HorizontalDivider() }, tabs: @Composable () -> Unit)

Material Design Fixed Secondary tabs

SegmentedButton

@Composable

fun MultiChoiceSegmentedButtonRowScope.SegmentedButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, shape: Shape, modifier: Modifier = Modifier, enabled: Boolean = true, colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(), border: BorderStroke = SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, checked)), interactionSource: MutableInteractionSource? = null, icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(checked) }, label: @Composable () -> Unit)

@Composable

fun SingleChoiceSegmentedButtonRowScope.SegmentedButton(selected: Boolean, onClick: () -> Unit, shape: Shape, modifier: Modifier = Modifier, enabled: Boolean = true, colors: SegmentedButtonColors = SegmentedButtonDefaults.colors(), border: BorderStroke = SegmentedButtonDefaults.borderStroke(colors.borderColor(enabled, selected)), interactionSource: MutableInteractionSource? = null, icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(selected) }, label: @Composable () -> Unit)

Material Segmented Button. Segmented buttons help people select options, switch views, or sort elements.

SingleChoiceSegmentedButtonRow

@Composable

fun SingleChoiceSegmentedButtonRow(modifier: Modifier = Modifier, space: Dp = SegmentedButtonDefaults.BorderWidth, content: @Composable SingleChoiceSegmentedButtonRowScope.() -> Unit)

Material Segmented Button.

Slider

@Composable

fun Slider(state: SliderState, modifier: Modifier = Modifier, enabled: Boolean = true, colors: SliderColors = SliderDefaults.colors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, thumb: @Composable (SliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = interactionSource, colors = colors, enabled = enabled ) }, track: @Composable (SliderState) -> Unit = { sliderState -> SliderDefaults.Track(colors = colors, enabled = enabled, sliderState = sliderState) })

@Composable

fun Slider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, @IntRange(from = 0) steps: Int = 0, onValueChangeFinished: () -> Unit? = null, colors: SliderColors = SliderDefaults.colors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

@Composable

fun Slider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, onValueChangeFinished: () -> Unit? = null, colors: SliderColors = SliderDefaults.colors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, @IntRange(from = 0) steps: Int = 0, thumb: @Composable (SliderState) -> Unit = { SliderDefaults.Thumb( interactionSource = interactionSource, colors = colors, enabled = enabled ) }, track: @Composable (SliderState) -> Unit = { sliderState -> SliderDefaults.Track(colors = colors, enabled = enabled, sliderState = sliderState) }, valueRange: ClosedFloatingPointRange<Float> = 0f..1f)

Material Design slider.

SmallFloatingActionButton

@Composable

fun SmallFloatingActionButton(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = FloatingActionButtonDefaults.smallShape, containerColor: Color = FloatingActionButtonDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design small floating action button.

Snackbar

@Composable

fun Snackbar(snackbarData: SnackbarData, modifier: Modifier = Modifier, actionOnNewLine: Boolean = false, shape: Shape = SnackbarDefaults.shape, containerColor: Color = SnackbarDefaults.color, contentColor: Color = SnackbarDefaults.contentColor, actionColor: Color = SnackbarDefaults.actionColor, actionContentColor: Color = SnackbarDefaults.actionContentColor, dismissActionContentColor: Color = SnackbarDefaults.dismissActionContentColor)

@Composable

fun Snackbar(modifier: Modifier = Modifier, action: @Composable () -> Unit? = null, dismissAction: @Composable () -> Unit? = null, actionOnNewLine: Boolean = false, shape: Shape = SnackbarDefaults.shape, containerColor: Color = SnackbarDefaults.color, contentColor: Color = SnackbarDefaults.contentColor, actionContentColor: Color = SnackbarDefaults.actionContentColor, dismissActionContentColor: Color = SnackbarDefaults.dismissActionContentColor, content: @Composable () -> Unit)

Material Design snackbar.

SnackbarHost

@Composable

fun SnackbarHost(hostState: SnackbarHostState, modifier: Modifier = Modifier, snackbar: @Composable (SnackbarData) -> Unit = { Snackbar(it) })

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

SuggestionChip

@Composable

fun SuggestionChip(onClick: () -> Unit, label: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, icon: @Composable () -> Unit? = null, shape: Shape = SuggestionChipDefaults.shape, colors: ChipColors = SuggestionChipDefaults.suggestionChipColors(), elevation: ChipElevation? = SuggestionChipDefaults.suggestionChipElevation(), border: BorderStroke? = SuggestionChipDefaults.suggestionChipBorder(enabled), interactionSource: MutableInteractionSource? = null)

Material Design suggestion chip.

Surface

@Composable

fun Surface(modifier: Modifier = Modifier, shape: Shape = RectangleShape, color: Color = MaterialTheme.colorScheme.surface, contentColor: Color = contentColorFor(color), tonalElevation: Dp = 0.dp, shadowElevation: Dp = 0.dp, border: BorderStroke? = null, content: @Composable () -> Unit)

@Composable

fun Surface(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = RectangleShape, color: Color = MaterialTheme.colorScheme.surface, contentColor: Color = contentColorFor(color), tonalElevation: Dp = 0.dp, shadowElevation: Dp = 0.dp, border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

@Composable

fun Surface(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = RectangleShape, color: Color = MaterialTheme.colorScheme.surface, contentColor: Color = contentColorFor(color), tonalElevation: Dp = 0.dp, shadowElevation: Dp = 0.dp, border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

@Composable

fun Surface(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = RectangleShape, color: Color = MaterialTheme.colorScheme.surface, contentColor: Color = contentColorFor(color), tonalElevation: Dp = 0.dp, shadowElevation: Dp = 0.dp, border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface is modified by tonal variance.

surfaceColorAtElevation

@Stable

fun ColorScheme.surfaceColorAtElevation(elevation: Dp): Color

Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.

SwipeToDismissBox

@Composable

fun SwipeToDismissBox(state: SwipeToDismissBoxState, backgroundContent: @Composable RowScope.() -> Unit, modifier: Modifier = Modifier, enableDismissFromStartToEnd: Boolean = true, enableDismissFromEndToStart: Boolean = true, gesturesEnabled: Boolean = true, content: @Composable RowScope.() -> Unit)

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

Switch

@Composable

fun Switch(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, modifier: Modifier = Modifier, thumbContent: @Composable () -> Unit? = null, enabled: Boolean = true, colors: SwitchColors = SwitchDefaults.colors(), interactionSource: MutableInteractionSource? = null)

Material Design Switch.

Tab

@Composable

fun Tab(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, selectedContentColor: Color = LocalContentColor.current, unselectedContentColor: Color = selectedContentColor, interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)

@Composable

fun Tab(selected: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit? = null, icon: @Composable () -> Unit? = null, selectedContentColor: Color = LocalContentColor.current, unselectedContentColor: Color = selectedContentColor, interactionSource: MutableInteractionSource? = null)

Material Design tab.

TabRow

@Composable

fun TabRow(selectedTabIndex: Int, modifier: Modifier = Modifier, containerColor: Color = TabRowDefaults.primaryContainerColor, contentColor: Color = TabRowDefaults.primaryContentColor, indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions -> if (selectedTabIndex < tabPositions.size) { TabRowDefaults.SecondaryIndicator( Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex]) ) } }, divider: @Composable () -> Unit = @Composable { HorizontalDivider() }, tabs: @Composable () -> Unit)

Material Design tabs

Text

@Composable

fun Text(text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Unspecified, textDecoration: TextDecoration? = null, textAlign: TextAlign? = null, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, onTextLayout: (TextLayoutResult) -> Unit? = null, style: TextStyle = LocalTextStyle.current)

@Composable

fun Text(text: AnnotatedString, modifier: Modifier = Modifier, color: Color = Color.Unspecified, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Unspecified, textDecoration: TextDecoration? = null, textAlign: TextAlign? = null, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, inlineContent: Map<String, InlineTextContent> = mapOf(), onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = LocalTextStyle.current)

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

TextButton

@Composable

fun TextButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.textShape, colors: ButtonColors = ButtonDefaults.textButtonColors(), elevation: ButtonElevation? = null, border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding, interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

Material Design text button.

TextField

@Composable

fun TextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = LocalTextStyle.current, label: @Composable () -> Unit? = null, placeholder: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, prefix: @Composable () -> Unit? = null, suffix: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, singleLine: Boolean = false, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, interactionSource: MutableInteractionSource? = null, shape: Shape = TextFieldDefaults.shape, colors: TextFieldColors = TextFieldDefaults.colors())

@Composable

fun TextField(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = LocalTextStyle.current, label: @Composable () -> Unit? = null, placeholder: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, prefix: @Composable () -> Unit? = null, suffix: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, isError: Boolean = false, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, singleLine: Boolean = false, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, interactionSource: MutableInteractionSource? = null, shape: Shape = TextFieldDefaults.shape, colors: TextFieldColors = TextFieldDefaults.colors())

Material Design filled text field.

TimeInput

@Composable

fun TimeInput(state: TimePickerState, modifier: Modifier = Modifier, colors: TimePickerColors = TimePickerDefaults.colors())

Time pickers help users select and set a specific time.

TimePicker

@Composable

fun TimePicker(state: TimePickerState, modifier: Modifier = Modifier, colors: TimePickerColors = TimePickerDefaults.colors(), layoutType: TimePickerLayoutType = TimePickerDefaults.layoutType())

Material Design time picker.

TimePickerState

fun TimePickerState(initialHour: Int, initialMinute: Int, is24Hour: Boolean): TimePickerState

Factory function for the default implementation of TimePickerState should be used in most cases.

TooltipBox

@Composable

fun TooltipBox(positionProvider: PopupPositionProvider, tooltip: @Composable TooltipScope.() -> Unit, state: TooltipState, modifier: Modifier = Modifier, focusable: Boolean = true, enableUserInput: Boolean = true, content: @Composable () -> Unit)

Material TooltipBox that wraps a composable with a tooltip.

TooltipState

fun TooltipState(initialIsVisible: Boolean = false, isPersistent: Boolean = true, mutatorMutex: MutatorMutex = BasicTooltipDefaults.GlobalMutatorMutex): TooltipState

Constructor extension function for TooltipState

TopAppBar

@Composable

fun TopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, expandedHeight: Dp = TopAppBarDefaults.TopAppBarExpandedHeight, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Material Design small top app bar.

TriStateCheckbox

@Composable

fun TriStateCheckbox(state: ToggleableState, onClick: () -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, colors: CheckboxColors = CheckboxDefaults.colors(), interactionSource: MutableInteractionSource? = null)

Material Design checkbox parent.

VerticalDivider

@Composable

fun VerticalDivider(modifier: Modifier = Modifier, thickness: Dp = DividerDefaults.Thickness, color: Color = DividerDefaults.color)

Material Design divider.