class AppBarWithSearchColors(val searchBarColors: SearchBarColors, val scrolledSearchBarContainerColor: Color, val appBarContainerColor: Color, val scrolledAppBarContainerColor: Color, val appBarNavigationIconColor: Color, val appBarActionIconColor: Color)

Represents the colors used by an AppBarWithSearch.

AssistChipDefaults

object AssistChipDefaults

Contains the baseline values used by AssistChip.

BadgeDefaults

object BadgeDefaults

Default values used for Badge implementations.

BasicAlertDialogOverride

interface BasicAlertDialogOverride

Interface that allows libraries to override the behavior of the BasicAlertDialog component.

BasicAlertDialogOverrideScope

class BasicAlertDialogOverrideScope

Parameters available to BasicAlertDialog.

BottomAppBarDefaults

object BottomAppBarDefaults

Contains default values used for the bottom app bar implementations.

BottomAppBarScrollBehavior

@Stable

interface BottomAppBarScrollBehavior

A BottomAppBarScrollBehavior defines how a bottom app bar should behave when the content under it is scrolled.

BottomAppBarState

interface BottomAppBarState

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.

ButtonGroupDefaults

object ButtonGroupDefaults

Default values used by ButtonGroup

ButtonGroupMenuState

class ButtonGroupMenuState(initialIsShowing: Boolean = false)

State class for the overflow menu in ButtonGroup.

ButtonGroupScope

interface ButtonGroupScope

Button group scope used to indicate a Modifier.weight and Modifier.animateWidth of a child element. Also defines the DSL to build the content of a ButtonGroup

ButtonShapes

@Immutable

class ButtonShapes(val shape: Shape, val pressedShape: Shape)

The shapes that will be used in buttons. Button will morph between these shapes depending on the interaction of the button, assuming all of the shapes are CornerBasedShapes.

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 disabledCheckmarkColor: 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, val primaryFixed: Color, val primaryFixedDim: Color, val onPrimaryFixed: Color, val onPrimaryFixedVariant: Color, val secondaryFixed: Color, val secondaryFixedDim: Color, val onSecondaryFixed: Color, val onSecondaryFixedVariant: Color, val tertiaryFixed: Color, val tertiaryFixedDim: Color, val onTertiaryFixed: Color, val onTertiaryFixedVariant: 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.

DefaultBasicAlertDialogOverride

object DefaultBasicAlertDialogOverride : BasicAlertDialogOverride

This override provides the default behavior of the BasicAlertDialog component.

DefaultHorizontalFloatingToolbarOverride

object DefaultHorizontalFloatingToolbarOverride : HorizontalFloatingToolbarOverride

Provides the default behavior of the HorizontalFloatingToolbar component. This implementation is used when no override is specified.

DefaultHorizontalFloatingToolbarWithFabOverride

object DefaultHorizontalFloatingToolbarWithFabOverride : HorizontalFloatingToolbarWithFabOverride

Provides the default behavior of the HorizontalFloatingToolbar component that includes a Floating Action Button. This implementation is used when no override is specified.

DefaultModalWideNavigationRailOverride

object DefaultModalWideNavigationRailOverride : ModalWideNavigationRailOverride

This override provides the default behavior of the ModalWideNavigationRail component.

DefaultNavigationBarOverride

object DefaultNavigationBarOverride : NavigationBarOverride

This override provides the default behavior of the NavigationBar component.

DefaultNavigationRailOverride

object DefaultNavigationRailOverride : NavigationRailOverride

This override provides the default behavior of the NavigationRail component.

DefaultShortNavigationBarOverride

object DefaultShortNavigationBarOverride : ShortNavigationBarOverride

This override provides the default behavior of the ShortNavigationBar component.

DefaultSingleRowTopAppBarOverride

object DefaultSingleRowTopAppBarOverride : SingleRowTopAppBarOverride

Provides the default behavior of the SingleRowTopAppBar component. This implementation is used when no override is specified.

DefaultTooltipCaretShape

class DefaultTooltipCaretShape(val caretSize: DpSize = TooltipDefaults.caretSize) : Shape

Default Shape of the caret used by tooltips.

DefaultTwoRowsTopAppBarOverride

object DefaultTwoRowsTopAppBarOverride : TwoRowsTopAppBarOverride

Provides the default behavior of the TwoRowsTopAppBar component. This implementation is used when no override is specified.

DefaultVerticalFloatingToolbarOverride

object DefaultVerticalFloatingToolbarOverride : VerticalFloatingToolbarOverride

This override provides the default behavior of the VerticalFloatingToolbar component. This implementation is used when no override is specified.

DefaultVerticalFloatingToolbarWithFabOverride

object DefaultVerticalFloatingToolbarWithFabOverride : VerticalFloatingToolbarWithFabOverride

This override provides the default behavior of the VerticalFloatingToolbar with FAB component. This implementation is used when no override is specified.

DefaultWideNavigationRailOverride

object DefaultWideNavigationRailOverride : WideNavigationRailOverride

This override provides the default behavior of the WideNavigationRail component.

DisplayMode

@Immutable

@JvmInline

value class DisplayMode

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

DividerDefaults

object DividerDefaults

Default values for Divider

DragHandleColors

@Immutable

class DragHandleColors(val color: Color, val pressedColor: Color, val draggedColor: Color)

Specifies the colors that will be used in a drag handle in different states.

DragHandleShapes

@Immutable

class DragHandleShapes(val shape: Shape, val pressedShape: Shape, val draggedShape: Shape)

Specifies the shapes that will be used in a drag handle in different states.

DragHandleSizes

@Immutable

class DragHandleSizes(val size: DpSize, val pressedSize: DpSize, val draggedSize: DpSize)

Specifies the sizes that will be used in a drag handle in different states.

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.

ExitAlwaysFloatingToolbarScrollBehavior

class ExitAlwaysFloatingToolbarScrollBehavior(val exitDirection: FloatingToolbarExitDirection, val state: FloatingToolbarState, val snapAnimationSpec: AnimationSpec<Float>, val flingAnimationSpec: DecayAnimationSpec<Float>) : FloatingToolbarScrollBehavior

A FloatingToolbarScrollBehavior that adjusts its properties to affect the size of a floating toolbar.

ExperimentalMaterial3Api

annotation class ExperimentalMaterial3Api

ExperimentalMaterial3ComponentOverrideApi

annotation class ExperimentalMaterial3ComponentOverrideApi

ExperimentalMaterial3ExpressiveApi

annotation class ExperimentalMaterial3ExpressiveApi

ExposedDropdownMenuAnchorType

@JvmInline

value class ExposedDropdownMenuAnchorType

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

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.

FloatingActionButtonMenuScope

interface FloatingActionButtonMenuScope

Scope for the children of FloatingActionButtonMenu

FloatingToolbarColors

@Immutable

class FloatingToolbarColors(val toolbarContainerColor: Color, val toolbarContentColor: Color, val fabContainerColor: Color, val fabContentColor: Color)

Represents the container and content colors used in a the various floating toolbars.

FloatingToolbarDefaults

object FloatingToolbarDefaults

Contains default values used for the floating toolbar implementations.

FloatingToolbarExitDirection

@JvmInline

value class FloatingToolbarExitDirection

The possible directions for a HorizontalFloatingToolbar or VerticalFloatingToolbar, used to determine the exit direction when a FloatingToolbarScrollBehavior is attached.

FloatingToolbarHorizontalFabPosition

@JvmInline

value class FloatingToolbarHorizontalFabPosition

The possible positions for a FloatingActionButton attached to a HorizontalFloatingToolbar

FloatingToolbarScrollBehavior

@Stable

sealed interface FloatingToolbarScrollBehavior : NestedScrollConnection

A FloatingToolbarScrollBehavior defines how a floating toolbar should behave when the content under it is scrolled.

FloatingToolbarState

interface FloatingToolbarState

A state object that can be hoisted to control and observe the floating toolbar state. The state is read and updated by a FloatingToolbarScrollBehavior implementation.

FloatingToolbarVerticalFabPosition

@JvmInline

value class FloatingToolbarVerticalFabPosition

The possible positions for a FloatingActionButton attached to a VerticalFloatingToolbar

HorizontalFloatingToolbarOverride

interface HorizontalFloatingToolbarOverride

Interface that allows libraries to override the behavior of the HorizontalFloatingToolbar component.

HorizontalFloatingToolbarOverrideScope

class HorizontalFloatingToolbarOverrideScope

Parameters available to HorizontalFloatingToolbar.

HorizontalFloatingToolbarWithFabOverride

interface HorizontalFloatingToolbarWithFabOverride

Interface that allows libraries to override the behavior of the HorizontalFloatingToolbar component that includes a Floating Action Button.

HorizontalFloatingToolbarWithFabOverrideScope

class HorizontalFloatingToolbarWithFabOverrideScope

Parameters available to the HorizontalFloatingToolbar that includes a Floating Action Button.

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 for all four icon and icon toggle button types.

IconButtonShapes

class IconButtonShapes(val shape: Shape, val pressedShape: Shape = shape)

The shapes that will be used in icon buttons. Icon button will morph between these shapes depending on the interaction of the icon button, assuming all of the shapes are CornerBasedShapes.

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.

IconToggleButtonShapes

class IconToggleButtonShapes(val shape: Shape, val pressedShape: Shape = shape, val checkedShape: Shape = shape)

The shapes that will be used in toggle buttons. Toggle button will morph between these three shapes depending on the interaction of the toggle button, assuming all of the shapes are CornerBasedShapes.

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.

LoadingIndicatorDefaults

object LoadingIndicatorDefaults

Contains default values by the LoadingIndicator.

MaterialShapes

sealed class MaterialShapes

Holds predefined Material Design shapes as RoundedPolygons that can be used at various components as they are, or as part of a Morph.

MaterialTheme

object MaterialTheme

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

MenuAnchorType

typealias ~~MenuAnchorType~~ = ExposedDropdownMenuAnchorType

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, shouldDismissOnClickOutside: Boolean = true)

Properties used to customize the behavior of a ModalBottomSheet.

ModalWideNavigationRailDefaults

@Immutable

object ~~ModalWideNavigationRailDefaults~~

Default values for ModalWideNavigationRail.

ModalWideNavigationRailOverride

interface ModalWideNavigationRailOverride

Interface that allows libraries to override the behavior of the ModalWideNavigationRail component.

ModalWideNavigationRailOverrideScope

class ModalWideNavigationRailOverrideScope

Parameters available to ModalWideNavigationRail.

ModalWideNavigationRailProperties

@Immutable

expect class ModalWideNavigationRailProperties(shouldDismissOnBackPress: Boolean = true)

Properties used to customize the behavior of a ModalWideNavigationRail.

MotionScheme

@Immutable

interface MotionScheme

A motion scheme provides all the FiniteAnimationSpecs for a MaterialTheme.

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.

NavigationBarOverride

interface NavigationBarOverride

Interface that allows libraries to override the behavior of the NavigationBar component.

NavigationBarOverrideScope

class NavigationBarOverrideScope

Parameters available to NavigationBar.

NavigationDrawerItemColors

@Stable

interface NavigationDrawerItemColors

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

NavigationDrawerItemDefaults

object NavigationDrawerItemDefaults

Defaults used in NavigationDrawerItem.

NavigationItemColors

@Immutable

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

NavigationItemIconPosition

@JvmInline

value class NavigationItemIconPosition

Class that describes the different supported icon positions of the navigation item.

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.

NavigationRailOverride

interface NavigationRailOverride

Interface that allows libraries to override the behavior of the NavigationRail component.

NavigationRailOverrideScope

class NavigationRailOverrideScope

Parameters available to NavigationRail.

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.

SearchBarDefaults

object SearchBarDefaults

Defaults used in SearchBar and DockedSearchBar.

SearchBarScrollBehavior

@Stable

interface SearchBarScrollBehavior

A SearchBarScrollBehavior defines how a search bar should behave when the content beneath it is scrolled.

SearchBarState

@Stable

class SearchBarState

The state of a search bar.

SearchBarValue

enum SearchBarValue : Enum<SearchBarValue>

Possible values of SearchBarState.

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, largeIncreased: CornerBasedShape = ShapeDefaults.LargeIncreased, extraLargeIncreased: CornerBasedShape = ShapeDefaults.ExtraLargeIncreased, extraExtraLarge: CornerBasedShape = ShapeDefaults.ExtraExtraLarge)

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

SheetState

@Stable

class SheetState(skipPartiallyExpanded: Boolean, positionalThreshold: () -> Float, velocityThreshold: () -> Float, 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.

ShortNavigationBarArrangement

@JvmInline

value class ShortNavigationBarArrangement

Class that describes the different supported item arrangements of the ShortNavigationBar.

ShortNavigationBarDefaults

object ShortNavigationBarDefaults

Defaults used in ShortNavigationBar.

ShortNavigationBarItemDefaults

object ShortNavigationBarItemDefaults

Defaults used in ShortNavigationBarItem.

ShortNavigationBarOverride

interface ShortNavigationBarOverride

Interface that allows libraries to override the behavior of the ShortNavigationBar component.

ShortNavigationBarOverrideScope

class ShortNavigationBarOverrideScope

Parameters available to ShortNavigationBar.

SingleChoiceSegmentedButtonRowScope

interface SingleChoiceSegmentedButtonRowScope : RowScope

Scope for the children of a SingleChoiceSegmentedButtonRow

SingleRowTopAppBarOverride

interface SingleRowTopAppBarOverride

Interface that allows libraries to override the behavior of single-row TopAppBar components.

SingleRowTopAppBarOverrideScope

class SingleRowTopAppBarOverrideScope

Parameters available to SingleRowTopAppBar.

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.

SplitButtonDefaults

object SplitButtonDefaults

Contains default values used by SplitButtonLayout and its style variants.

SplitButtonShapes

class SplitButtonShapes(val shape: Shape, val pressedShape: Shape?, val checkedShape: Shape?)

The shapes that will be used in SplitButtonLayout. Split button will morph between these shapes depending on the interaction of the buttons, assuming all of the shapes are CornerBasedShapes.

SuggestionChipDefaults

object SuggestionChipDefaults

Contains the baseline values used by SuggestionChip.

SwipeToDismissBoxDefaults

object SwipeToDismissBoxDefaults

Contains default values for SwipeToDismissBox and SwipeToDismissBoxState.

SwipeToDismissBoxState

class SwipeToDismissBoxState

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.

TextFieldLabelPosition

abstract class TextFieldLabelPosition

The position of the label with respect to the text field.

TextFieldLabelScope

@Stable

interface TextFieldLabelScope

Scope for the label of a TextField or OutlinedTextField.

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

TimePickerDialogDefaults

object TimePickerDialogDefaults

Default properties for a TimePickerDialog

TimePickerDisplayMode

@Immutable

@JvmInline

value class TimePickerDisplayMode

Represents the display mode for the content of a TimePickerDialog.

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.

ToggleButtonColors

@Immutable

class ToggleButtonColors(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 toggle button in different states.

ToggleButtonDefaults

object ToggleButtonDefaults

Contains the default values for all five toggle button types.

ToggleButtonShapes

@Immutable

class ToggleButtonShapes(val shape: Shape, val pressedShape: Shape, val checkedShape: Shape)

ToggleFloatingActionButtonDefaults

object ToggleFloatingActionButtonDefaults

Contains the default values used by ToggleFloatingActionButton

ToggleFloatingActionButtonScope

interface ToggleFloatingActionButtonScope

Scope for the children of ToggleFloatingActionButton

TooltipAnchorPosition

@JvmInline

value class TooltipAnchorPosition

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, val subtitleContentColor: 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.

TwoRowsTopAppBarOverride

interface TwoRowsTopAppBarOverride

Interface that allows libraries to override the behavior of two-row TopAppBar components.

TwoRowsTopAppBarOverrideScope

class TwoRowsTopAppBarOverrideScope

Parameters available to TwoRowsTopAppBar.

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, displayLargeEmphasized: TextStyle = TypographyTokens.DisplayLargeEmphasized, displayMediumEmphasized: TextStyle = TypographyTokens.DisplayMediumEmphasized, displaySmallEmphasized: TextStyle = TypographyTokens.DisplaySmallEmphasized, headlineLargeEmphasized: TextStyle = TypographyTokens.HeadlineLargeEmphasized, headlineMediumEmphasized: TextStyle = TypographyTokens.HeadlineMediumEmphasized, headlineSmallEmphasized: TextStyle = TypographyTokens.HeadlineSmallEmphasized, titleLargeEmphasized: TextStyle = TypographyTokens.TitleLargeEmphasized, titleMediumEmphasized: TextStyle = TypographyTokens.TitleMediumEmphasized, titleSmallEmphasized: TextStyle = TypographyTokens.TitleSmallEmphasized, bodyLargeEmphasized: TextStyle = TypographyTokens.BodyLargeEmphasized, bodyMediumEmphasized: TextStyle = TypographyTokens.BodyMediumEmphasized, bodySmallEmphasized: TextStyle = TypographyTokens.BodySmallEmphasized, labelLargeEmphasized: TextStyle = TypographyTokens.LabelLargeEmphasized, labelMediumEmphasized: TextStyle = TypographyTokens.LabelMediumEmphasized, labelSmallEmphasized: TextStyle = TypographyTokens.LabelSmallEmphasized)

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

VerticalDragHandleDefaults

object VerticalDragHandleDefaults

Contains the baseline values used by a VerticalDragHandle.

VerticalFloatingToolbarOverride

interface VerticalFloatingToolbarOverride

Interface that allows libraries to override the behavior of the VerticalFloatingToolbar component.

VerticalFloatingToolbarOverrideScope

class VerticalFloatingToolbarOverrideScope

Parameters available to VerticalFloatingToolbar.

VerticalFloatingToolbarWithFabOverride

interface VerticalFloatingToolbarWithFabOverride

Interface that allows libraries to override the behavior of the VerticalFloatingToolbar component. This is the version where a floating action button (FAB) is present.

VerticalFloatingToolbarWithFabOverrideScope

class VerticalFloatingToolbarWithFabOverrideScope

Parameters available to VerticalFloatingToolbar that includes a floating action button (FAB).

WavyProgressIndicatorDefaults

object WavyProgressIndicatorDefaults

Contains the default values used for wavy progress indicators

WideNavigationRailColors

@Immutable

class WideNavigationRailColors(val containerColor: Color, val contentColor: Color, val modalContainerColor: Color, val modalScrimColor: Color, val modalContentColor: Color)

Represents the colors of the various elements of a wide navigation rail.

WideNavigationRailDefaults

object WideNavigationRailDefaults

Defaults used in WideNavigationRail.

WideNavigationRailItemDefaults

object WideNavigationRailItemDefaults

Defaults used in WideNavigationRailItem.

WideNavigationRailOverride

interface WideNavigationRailOverride

Interface that allows libraries to override the behavior of the WideNavigationRail component.

WideNavigationRailOverrideScope

class WideNavigationRailOverrideScope

Parameters available to WideNavigationRail.

WideNavigationRailState

interface WideNavigationRailState

A state object that can be hoisted to observe the wide navigation rail state. It allows for setting to the rail to be collapsed or expanded.

WideNavigationRailValue

enum WideNavigationRailValue : Enum<WideNavigationRailValue>

Possible values of WideNavigationRailState.

Properties

isCheckboxStylingFixEnabled

var isCheckboxStylingFixEnabled: Boolean

Flag indicating checkbox style. When true, the checkbox will use the Material Design 3 styling. This includes updated colors, and checkbox container sizing. When false, it uses the older Material Design 2 styling. This flag is intended for temporary use during the migration.

isHourInputValid

val TimePickerState.isHourInputValid: Boolean

true if the current hourInput represents a valid hour (0-23).

isInputValid

val TimePickerState.isInputValid: Boolean

true if the time input values are valid.

isMinuteInputValid

val TimePickerState.isMinuteInputValid: Boolean

true if the current minuteInput represents a valid minute (0-59).

isPm

val TimePickerState.isPm: Boolean

Indicates whether the selected time falls within the period from 12 PM inclusive to 12 AM non inclusive.

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.

LocalBasicAlertDialogOverride

val LocalBasicAlertDialogOverride: ProvidableCompositionLocal<BasicAlertDialogOverride>

CompositionLocal containing the currently-selected BasicAlertDialogOverride.

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.

LocalHorizontalFloatingToolbarOverride

val LocalHorizontalFloatingToolbarOverride: ProvidableCompositionLocal<HorizontalFloatingToolbarOverride>

CompositionLocal containing the currently-selected HorizontalFloatingToolbarOverride.

LocalHorizontalFloatingToolbarWithFabOverride

val LocalHorizontalFloatingToolbarWithFabOverride: ProvidableCompositionLocal<HorizontalFloatingToolbarWithFabOverride>

CompositionLocal containing the currently-selected HorizontalFloatingToolbarOverride.

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 0.dp, 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.

LocalModalWideNavigationRailOverride

val LocalModalWideNavigationRailOverride: ProvidableCompositionLocal<ModalWideNavigationRailOverride>

CompositionLocal containing the currently-selected ModalWideNavigationRailOverride.

LocalNavigationBarOverride

val LocalNavigationBarOverride: ProvidableCompositionLocal<NavigationBarOverride>

CompositionLocal containing the currently-selected NavigationBarOverride.

LocalNavigationRailOverride

val LocalNavigationRailOverride: ProvidableCompositionLocal<NavigationRailOverride>

CompositionLocal containing the currently-selected NavigationRailOverride.

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.

LocalShortNavigationBarOverride

val LocalShortNavigationBarOverride: ProvidableCompositionLocal<ShortNavigationBarOverride>

CompositionLocal containing the currently-selected ShortNavigationBarOverride.

LocalSingleRowTopAppBarOverride

val LocalSingleRowTopAppBarOverride: ProvidableCompositionLocal<SingleRowTopAppBarOverride>

CompositionLocal containing the currently-selected SingleRowTopAppBarOverride.

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.

LocalTwoRowsTopAppBarOverride

val LocalTwoRowsTopAppBarOverride: ProvidableCompositionLocal<TwoRowsTopAppBarOverride>

CompositionLocal containing the currently-selected TwoRowsTopAppBarOverride.

LocalVerticalToolbarOverride

val LocalVerticalToolbarOverride: ProvidableCompositionLocal<VerticalFloatingToolbarOverride>

CompositionLocal containing the currently-selected VerticalFloatingToolbarOverride.

LocalVerticalToolbarWithFabOverride

val LocalVerticalToolbarWithFabOverride: ProvidableCompositionLocal<VerticalFloatingToolbarWithFabOverride>

CompositionLocal containing the currently-selected VerticalFloatingToolbarWithFabOverride.

LocalWideNavigationRailOverride

val LocalWideNavigationRailOverride: ProvidableCompositionLocal<WideNavigationRailOverride>

CompositionLocal containing the currently-selected WideNavigationRailOverride.

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

animateFloatingActionButton

fun Modifier.animateFloatingActionButton(visible: Boolean, alignment: Alignment, targetScale: Float = FloatingActionButtonDefaults.ShowHideTargetScale, scaleAnimationSpec: AnimationSpec<Float>? = null, alphaAnimationSpec: AnimationSpec<Float>? = null): Modifier

Apply this modifier to a FloatingActionButton to show or hide it with an animation, typically based on the app's main content scrolling.

AppBarColumn

@Composable

fun AppBarColumn(modifier: Modifier = Modifier, overflowIndicator: @Composable (AppBarMenuState) -> Unit = { menuState -> AppBarOverflowIndicator(menuState) }, maxItemCount: Int = Int.MAX_VALUE, content: AppBarColumnScope.() -> Unit)

An AppBarColumn arranges its children in a vertical sequence, and if any children overflow the constraints, an overflow indicator is displayed.

AppBarOverflowIndicator

@Composable

fun AppBarOverflowIndicator(menuState: AppBarMenuState, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.standardShape, colors: IconButtonColors = IconButtonDefaults.iconButtonColors(), interactionSource: MutableInteractionSource? = null)

Default overflow indicator for an AppBarRow and AppBarColumn. It uses a IconButton. When clicked it will open the menu associated with the provided AppBarMenuState.

AppBarRow

@Composable

fun AppBarRow(modifier: Modifier = Modifier, overflowIndicator: @Composable (AppBarMenuState) -> Unit = { menuState -> AppBarOverflowIndicator(menuState) }, maxItemCount: Int = Int.MAX_VALUE, content: AppBarRowScope.() -> Unit)

An AppBarRow arranges its children in a horizontal sequence, and if any children overflow the constraints, an overflow indicator is displayed.

AppBarWithSearch

@Composable

fun AppBarWithSearch(state: SearchBarState, inputField: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit? = null, actions: @Composable RowScope.() -> Unit? = null, shape: Shape = SearchBarDefaults.inputFieldShape, colors: AppBarWithSearchColors = SearchBarDefaults.appBarWithSearchColors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, contentPadding: PaddingValues = SearchBarDefaults.AppBarContentPadding, windowInsets: WindowInsets = SearchBarDefaults.windowInsets, scrollBehavior: SearchBarScrollBehavior? = null)

Material Design search

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, shapes: ButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight), interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

@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

ButtonGroup

@Composable

fun ~~ButtonGroup~~(modifier: Modifier = Modifier, @FloatRange(from = 0.0) expandedRatio: Float = ButtonGroupDefaults.ExpandedRatio, horizontalArrangement: Arrangement.Horizontal = ButtonGroupDefaults.HorizontalArrangement, content: @Composable ButtonGroupScope.() -> Unit)

@Composable

fun ButtonGroup(overflowIndicator: @Composable (ButtonGroupMenuState) -> Unit, modifier: Modifier = Modifier, @FloatRange(from = 0.0) expandedRatio: Float = ButtonGroupDefaults.ExpandedRatio, horizontalArrangement: Arrangement.Horizontal = ButtonGroupDefaults.HorizontalArrangement, content: ButtonGroupScope.() -> Unit)

A layout composable that places its children in a horizontal sequence. When a child uses Modifier.animateWidth with a relevant MutableInteractionSource, this button group can listen to the interactions and expand the width of the pressed child element as well as compress the neighboring child elements. Additionally, items will overflow into a dropdown menu if there are too many items or the items are too wide to all fit onto the screen.

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.topAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null, contentPadding: PaddingValues = TopAppBarDefaults.ContentPadding)

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)

@Composable

fun Checkbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, checkmarkStroke: Stroke, outlineStroke: Stroke, 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, gapSize: Dp = ProgressIndicatorDefaults.CircularIndicatorTrackGapSize)

@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)

Material Design determinate 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)

CircularWavyProgressIndicator

@Composable

fun CircularWavyProgressIndicator(modifier: Modifier = Modifier, color: Color = WavyProgressIndicatorDefaults.indicatorColor, trackColor: Color = WavyProgressIndicatorDefaults.trackColor, stroke: Stroke = WavyProgressIndicatorDefaults.circularIndicatorStroke, trackStroke: Stroke = WavyProgressIndicatorDefaults.circularTrackStroke, gapSize: Dp = WavyProgressIndicatorDefaults.CircularIndicatorTrackGapSize, @FloatRange(from = 0.0, to = 1.0) amplitude: Float = 1.0f, wavelength: Dp = WavyProgressIndicatorDefaults.CircularWavelength, waveSpeed: Dp = wavelength)

Material Design indeterminate circular progress indicator

@Composable

fun CircularWavyProgressIndicator(progress: () -> Float, modifier: Modifier = Modifier, color: Color = WavyProgressIndicatorDefaults.indicatorColor, trackColor: Color = WavyProgressIndicatorDefaults.trackColor, stroke: Stroke = WavyProgressIndicatorDefaults.circularIndicatorStroke, trackStroke: Stroke = WavyProgressIndicatorDefaults.circularTrackStroke, gapSize: Dp = WavyProgressIndicatorDefaults.CircularIndicatorTrackGapSize, amplitude: (progress: Float) -> Float = WavyProgressIndicatorDefaults.indicatorAmplitude, wavelength: Dp = WavyProgressIndicatorDefaults.CircularWavelength, waveSpeed: Dp = wavelength)

Material Design determinate circular progress indicator

ContainedLoadingIndicator

@Composable

fun ContainedLoadingIndicator(modifier: Modifier = Modifier, containerColor: Color = LoadingIndicatorDefaults.containedContainerColor, indicatorColor: Color = LoadingIndicatorDefaults.containedIndicatorColor, containerShape: Shape = LoadingIndicatorDefaults.containerShape, polygons: List<RoundedPolygon> = LoadingIndicatorDefaults.IndeterminateIndicatorPolygons)

@Composable

fun ContainedLoadingIndicator(progress: () -> Float, modifier: Modifier = Modifier, containerColor: Color = LoadingIndicatorDefaults.containedContainerColor, indicatorColor: Color = LoadingIndicatorDefaults.containedIndicatorColor, containerShape: Shape = LoadingIndicatorDefaults.containerShape, polygons: List<RoundedPolygon> = LoadingIndicatorDefaults.DeterminateIndicatorPolygons)

A Material Design contained loading 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, primaryFixed: Color = ColorDarkTokens.PrimaryFixed, primaryFixedDim: Color = ColorDarkTokens.PrimaryFixedDim, onPrimaryFixed: Color = ColorDarkTokens.OnPrimaryFixed, onPrimaryFixedVariant: Color = ColorDarkTokens.OnPrimaryFixedVariant, secondaryFixed: Color = ColorDarkTokens.SecondaryFixed, secondaryFixedDim: Color = ColorDarkTokens.SecondaryFixedDim, onSecondaryFixed: Color = ColorDarkTokens.OnSecondaryFixed, onSecondaryFixedVariant: Color = ColorDarkTokens.OnSecondaryFixedVariant, tertiaryFixed: Color = ColorDarkTokens.TertiaryFixed, tertiaryFixedDim: Color = ColorDarkTokens.TertiaryFixedDim, onTertiaryFixed: Color = ColorDarkTokens.OnTertiaryFixed, onTertiaryFixedVariant: Color = ColorDarkTokens.OnTertiaryFixedVariant): ColorScheme

Returns a dark Material color scheme.

DatePicker

@Composable

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

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() }, colors: DatePickerColors = DatePickerDefaults.colors(), title: @Composable () -> Unit? = { DateRangePickerDefaults.DateRangePickerTitle( displayMode = state.displayMode, modifier = Modifier.padding(DateRangePickerTitlePadding), contentColor = colors.titleContentColor, ) }, headline: @Composable () -> Unit? = { DateRangePickerDefaults.DateRangePickerHeadline( selectedStartDateMillis = state.selectedStartDateMillis, selectedEndDateMillis = state.selectedEndDateMillis, displayMode = state.displayMode, dateFormatter, modifier = Modifier.padding(DateRangePickerHeadlinePadding), contentColor = colors.headlineContentColor, ) }, showModeToggle: Boolean = true, focusRequester: FocusRequester? = remember { FocusRequester() })

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

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, shapes: ButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: ButtonColors = ButtonDefaults.elevatedButtonColors(), elevation: ButtonElevation? = ButtonDefaults.elevatedButtonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight), interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

@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

ElevatedToggleButton

@Composable

fun ElevatedToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(ButtonDefaults.MinHeight), colors: ToggleButtonColors = ToggleButtonDefaults.elevatedToggleButtonColors(), elevation: ButtonElevation? = ButtonDefaults.elevatedButtonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight), interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

TODO link to mio page when available.

ExpandedDockedSearchBar

@Composable

fun ExpandedDockedSearchBar(state: SearchBarState, inputField: @Composable () -> Unit, modifier: Modifier = Modifier, shape: Shape = SearchBarDefaults.dockedShape, colors: SearchBarColors = SearchBarDefaults.colors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, properties: PopupProperties = PopupProperties(focusable = true, clippingEnabled = false), content: @Composable ColumnScope.() -> Unit)

ExpandedDockedSearchBar represents a search bar that is currently expanding or in the expanded state, showing search results. This component is displayed in a popup over the collapsed search bar. It is recommended to use ExpandedDockedSearchBar on medium and large screens such as tablets, and to instead use ExpandedFullScreenSearchBar on compact screen such as phones.

ExpandedFullScreenSearchBar

@Composable

fun ExpandedFullScreenSearchBar(state: SearchBarState, inputField: @Composable () -> Unit, modifier: Modifier = Modifier, collapsedShape: Shape = SearchBarDefaults.inputFieldShape, colors: SearchBarColors = SearchBarDefaults.colors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, windowInsets: @Composable () -> WindowInsets = { SearchBarDefaults.fullScreenWindowInsets }, properties: DialogProperties = DialogProperties(), content: @Composable ColumnScope.() -> Unit)

ExpandedFullScreenSearchBar represents a search bar that is currently expanding or in the expanded state, showing search results. This component is displayed in a new full-screen dialog. If this expansion behavior is undesirable, for example on medium or large screens such as tablets, ExpandedDockedSearchBar can be used instead.

ExposedDropdownMenuBox

@Composable

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

Material Design exposed dropdown menu

expressiveLightColorScheme

fun expressiveLightColorScheme(): ColorScheme

Returns a light Material color scheme.

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, shapes: IconButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconButtonColors = IconButtonDefaults.filledIconButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

@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, shapes: IconToggleButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconToggleButtonColors = IconButtonDefaults.filledIconToggleButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

Material Design filled icon toggle button

@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 button

FilledTonalButton

@Composable

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

@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, shapes: IconButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconButtonColors = IconButtonDefaults.filledTonalIconButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

@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, shapes: IconToggleButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconToggleButtonColors = IconButtonDefaults.filledTonalIconToggleButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

@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

FlexibleBottomAppBar

@Composable

fun FlexibleBottomAppBar(modifier: Modifier = Modifier, containerColor: Color = BottomAppBarDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), contentPadding: PaddingValues = BottomAppBarDefaults.FlexibleContentPadding, horizontalArrangement: Arrangement.Horizontal = BottomAppBarDefaults.FlexibleHorizontalArrangement, expandedHeight: Dp = BottomAppBarDefaults.FlexibleBottomAppBarHeight, windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets, scrollBehavior: BottomAppBarScrollBehavior? = null, content: @Composable RowScope.() -> Unit)

Material Design flexible bottom app bar

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

FloatingActionButtonMenu

@Composable

fun FloatingActionButtonMenu(expanded: Boolean, button: @Composable () -> Unit, modifier: Modifier = Modifier, horizontalAlignment: Alignment.Horizontal = Alignment.End, content: @Composable FloatingActionButtonMenuScope.() -> Unit)

FAB Menus should be used in conjunction with a ToggleFloatingActionButton to provide additional choices to the user after clicking a FAB.

FloatingActionButtonMenuItem

@Composable

fun FloatingActionButtonMenuScope.FloatingActionButtonMenuItem(onClick: () -> Unit, text: @Composable () -> Unit, icon: @Composable () -> Unit, modifier: Modifier = Modifier, containerColor: Color = MaterialTheme.colorScheme.primaryContainer, contentColor: Color = contentColorFor(containerColor))

FAB Menu Items should be used within a FloatingActionButtonMenu to provide additional choices to the user after clicking a FAB.

FloatingToolbarState

fun FloatingToolbarState(initialOffsetLimit: Float, initialOffset: Float, initialContentOffset: Float): FloatingToolbarState

Creates a FloatingToolbarState.

HorizontalDivider

@Composable

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

Material Design divider

HorizontalFloatingToolbar

@Composable

fun HorizontalFloatingToolbar(expanded: Boolean, modifier: Modifier = Modifier, colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(), contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding, scrollBehavior: FloatingToolbarScrollBehavior? = null, shape: Shape = FloatingToolbarDefaults.ContainerShape, leadingContent: @Composable RowScope.() -> Unit? = null, trailingContent: @Composable RowScope.() -> Unit? = null, expandedShadowElevation: Dp = FloatingToolbarDefaults.ContainerExpandedElevation, collapsedShadowElevation: Dp = FloatingToolbarDefaults.ContainerCollapsedElevation, content: @Composable RowScope.() -> Unit)

A horizontal floating toolbar displays navigation and key actions in a Row. It can be positioned anywhere on the screen and floats over the rest of the content.

@Composable

fun HorizontalFloatingToolbar(expanded: Boolean, floatingActionButton: @Composable () -> Unit, modifier: Modifier = Modifier, colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(), contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding, scrollBehavior: FloatingToolbarScrollBehavior? = null, shape: Shape = FloatingToolbarDefaults.ContainerShape, floatingActionButtonPosition: FloatingToolbarHorizontalFabPosition = FloatingToolbarHorizontalFabPosition.End, animationSpec: FiniteAnimationSpec<Float> = FloatingToolbarDefaults.animationSpec(), expandedShadowElevation: Dp = FloatingToolbarDefaults.ContainerExpandedElevationWithFab, collapsedShadowElevation: Dp = FloatingToolbarDefaults.ContainerCollapsedElevationWithFab, content: @Composable RowScope.() -> Unit)

A floating toolbar that displays horizontally. The bar features its content within a Row, and an adjacent floating icon button. It can be positioned anywhere on the screen, floating above other content, and even in a Scaffold's floating action button slot. Its expanded flag controls the visibility of the actions with a slide animations.

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, shapes: IconButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconButtonColors = IconButtonDefaults.iconButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

@Composable

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

Material Design standard icon button

IconToggleButton

@Composable

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

@Composable

fun IconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconToggleButtonColors = IconButtonDefaults.iconToggleButtonColors(), interactionSource: MutableInteractionSource? = null, shape: Shape = IconButtonDefaults.standardShape, 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.rememberAboveTooltipPositionProvider.

LargeExtendedFloatingActionButton

@Composable

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

@Composable

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

Material Design large extended floating action button

LargeFlexibleTopAppBar

@Composable

fun LargeFlexibleTopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, subtitle: @Composable () -> Unit? = null, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, titleHorizontalAlignment: Alignment.Horizontal = Alignment.Start, collapsedHeight: Dp = TopAppBarDefaults.LargeAppBarCollapsedHeight, expandedHeight: Dp = if (subtitle != null) { TopAppBarDefaults.LargeFlexibleAppBarWithSubtitleExpandedHeight } else { TopAppBarDefaults.LargeFlexibleAppBarWithoutSubtitleExpandedHeight }, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Material Design large flexible top app bar

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.topAppBarColors(), 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, primaryFixed: Color = ColorLightTokens.PrimaryFixed, primaryFixedDim: Color = ColorLightTokens.PrimaryFixedDim, onPrimaryFixed: Color = ColorLightTokens.OnPrimaryFixed, onPrimaryFixedVariant: Color = ColorLightTokens.OnPrimaryFixedVariant, secondaryFixed: Color = ColorLightTokens.SecondaryFixed, secondaryFixedDim: Color = ColorLightTokens.SecondaryFixedDim, onSecondaryFixed: Color = ColorLightTokens.OnSecondaryFixed, onSecondaryFixedVariant: Color = ColorLightTokens.OnSecondaryFixedVariant, tertiaryFixed: Color = ColorLightTokens.TertiaryFixed, tertiaryFixedDim: Color = ColorLightTokens.TertiaryFixedDim, onTertiaryFixed: Color = ColorLightTokens.OnTertiaryFixed, onTertiaryFixedVariant: Color = ColorLightTokens.OnTertiaryFixedVariant): 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)

Material Design indeterminate 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, ) })

Material Design determinate linear progress indicator

LinearWavyProgressIndicator

@Composable

fun LinearWavyProgressIndicator(modifier: Modifier = Modifier, color: Color = WavyProgressIndicatorDefaults.indicatorColor, trackColor: Color = WavyProgressIndicatorDefaults.trackColor, stroke: Stroke = WavyProgressIndicatorDefaults.linearIndicatorStroke, trackStroke: Stroke = WavyProgressIndicatorDefaults.linearTrackStroke, gapSize: Dp = WavyProgressIndicatorDefaults.LinearIndicatorTrackGapSize, @FloatRange(from = 0.0, to = 1.0) amplitude: Float = 1.0f, wavelength: Dp = WavyProgressIndicatorDefaults.LinearIndeterminateWavelength, waveSpeed: Dp = wavelength)

Material Design indeterminate linear wavy progress indicator

@Composable

fun LinearWavyProgressIndicator(progress: () -> Float, modifier: Modifier = Modifier, color: Color = WavyProgressIndicatorDefaults.indicatorColor, trackColor: Color = WavyProgressIndicatorDefaults.trackColor, stroke: Stroke = WavyProgressIndicatorDefaults.linearIndicatorStroke, trackStroke: Stroke = WavyProgressIndicatorDefaults.linearTrackStroke, gapSize: Dp = WavyProgressIndicatorDefaults.LinearIndicatorTrackGapSize, stopSize: Dp = WavyProgressIndicatorDefaults.LinearTrackStopIndicatorSize, amplitude: (progress: Float) -> Float = WavyProgressIndicatorDefaults.indicatorAmplitude, wavelength: Dp = WavyProgressIndicatorDefaults.LinearDeterminateWavelength, waveSpeed: Dp = wavelength)

Material Design determinate wavy 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

LoadingIndicator

@Composable

fun LoadingIndicator(modifier: Modifier = Modifier, color: Color = LoadingIndicatorDefaults.indicatorColor, polygons: List<RoundedPolygon> = LoadingIndicatorDefaults.IndeterminateIndicatorPolygons)

@Composable

fun LoadingIndicator(progress: () -> Float, modifier: Modifier = Modifier, color: Color = LoadingIndicatorDefaults.indicatorColor, polygons: List<RoundedPolygon> = LoadingIndicatorDefaults.DeterminateIndicatorPolygons)

A Material Design loading indicator.

MaterialExpressiveTheme

@Composable

fun MaterialExpressiveTheme(colorScheme: ColorScheme? = null, motionScheme: MotionScheme? = null, shapes: Shapes? = null, typography: Typography? = null, content: @Composable () -> Unit)

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

MaterialTheme

@Composable

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

@Composable

fun MaterialTheme(colorScheme: ColorScheme = MaterialTheme.colorScheme, motionScheme: MotionScheme = MaterialTheme.motionScheme, 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.

MediumExtendedFloatingActionButton

@Composable

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

@Composable

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

Material Design medium extended floating action button

MediumFlexibleTopAppBar

@Composable

fun MediumFlexibleTopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, subtitle: @Composable () -> Unit? = null, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, titleHorizontalAlignment: Alignment.Horizontal = Alignment.Start, collapsedHeight: Dp = TopAppBarDefaults.MediumAppBarCollapsedHeight, expandedHeight: Dp = if (subtitle != null) { TopAppBarDefaults.MediumFlexibleAppBarWithSubtitleExpandedHeight } else { TopAppBarDefaults.MediumFlexibleAppBarWithoutSubtitleExpandedHeight }, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Material Design medium flexible top app bar

MediumFloatingActionButton

@Composable

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

Material Design medium floating action button

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.topAppBarColors(), 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, sheetGesturesEnabled: Boolean = true, 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 = ModalBottomSheetProperties(), 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

ModalWideNavigationRail

@Composable

fun ModalWideNavigationRail(modifier: Modifier = Modifier, state: WideNavigationRailState = rememberWideNavigationRailState(), hideOnCollapse: Boolean = false, collapsedShape: Shape = WideNavigationRailDefaults.modalCollapsedShape, expandedShape: Shape = WideNavigationRailDefaults.modalExpandedShape, colors: WideNavigationRailColors = WideNavigationRailDefaults.colors(), header: @Composable () -> Unit? = null, expandedHeaderTopPadding: Dp = 0.dp, windowInsets: WindowInsets = WideNavigationRailDefaults.windowInsets, arrangement: Arrangement.Vertical = WideNavigationRailDefaults.arrangement, expandedProperties: ModalWideNavigationRailProperties = WideNavigationRailDefaults.ModalExpandedProperties, content: @Composable () -> Unit)

Material design modal wide navigation rail.

MultiChoiceSegmentedButtonRow

@Composable

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

Material Design 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, shapes: ButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: ButtonColors = ButtonDefaults.outlinedButtonColors(), elevation: ButtonElevation? = null, border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled), contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight), interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

@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, shapes: IconButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconButtonColors = IconButtonDefaults.outlinedIconButtonColors(), border: BorderStroke? = IconButtonDefaults.outlinedIconButtonBorder(enabled), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

@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, shapes: IconToggleButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconToggleButtonColors = IconButtonDefaults.outlinedIconToggleButtonVibrantColors(), border: BorderStroke? = IconButtonDefaults.outlinedIconToggleButtonVibrantBorder(enabled, checked), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

@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

OutlinedSecureTextField

@Composable

fun OutlinedSecureTextField(state: TextFieldState, modifier: Modifier = Modifier, enabled: Boolean = true, textStyle: TextStyle = LocalTextStyle.current, labelPosition: TextFieldLabelPosition = TextFieldLabelPosition.Attached(), label: @Composable TextFieldLabelScope.() -> 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, inputTransformation: InputTransformation? = null, textObfuscationMode: TextObfuscationMode = TextObfuscationMode.RevealLastTyped, textObfuscationCharacter: Char = DefaultObfuscationCharacter, keyboardOptions: KeyboardOptions = SecureTextFieldKeyboardOptions, onKeyboardAction: KeyboardActionHandler? = null, onTextLayout: Density.(getResult: () -> TextLayoutResult?) -> Unit? = null, shape: Shape = OutlinedTextFieldDefaults.shape, colors: TextFieldColors = OutlinedTextFieldDefaults.colors(), contentPadding: PaddingValues = OutlinedTextFieldDefaults.contentPadding(), interactionSource: MutableInteractionSource? = null)

Material Design outlined text field for secure content

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())

@Composable

fun OutlinedTextField(state: TextFieldState, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = LocalTextStyle.current, labelPosition: TextFieldLabelPosition = TextFieldLabelPosition.Attached(), label: @Composable TextFieldLabelScope.() -> 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, inputTransformation: InputTransformation? = null, outputTransformation: OutputTransformation? = null, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, onKeyboardAction: KeyboardActionHandler? = null, lineLimits: TextFieldLineLimits = TextFieldLineLimits.Default, onTextLayout: Density.(getResult: () -> TextLayoutResult?) -> Unit? = null, scrollState: ScrollState = rememberScrollState(), shape: Shape = OutlinedTextFieldDefaults.shape, colors: TextFieldColors = OutlinedTextFieldDefaults.colors(), contentPadding: PaddingValues = OutlinedTextFieldDefaults.contentPadding(), interactionSource: MutableInteractionSource? = null)

Material Design outlined text field

OutlinedToggleButton

@Composable

fun OutlinedToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(ButtonDefaults.MinHeight), colors: ToggleButtonColors = ToggleButtonDefaults.outlinedToggleButtonColors(), elevation: ButtonElevation? = null, border: BorderStroke? = if (!checked) ButtonDefaults.outlinedButtonBorder(enabled) else null, contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight), interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

TODO link to mio page when available.

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, caretShape: Shape? = null, maxWidth: Dp = TooltipDefaults.plainTooltipMaxWidth, 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() }, minTabWidth: Dp = TabRowDefaults.ScrollableTabRowMinTabWidth, 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.

rememberFloatingToolbarState

@Composable

fun rememberFloatingToolbarState(initialOffsetLimit: Float = -Float.MAX_VALUE, initialOffset: Float = 0.0f, initialContentOffset: Float = 0.0f): FloatingToolbarState

Creates a FloatingToolbarState that is remembered across compositions.

rememberModalBottomSheetState

@Composable

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

Create and remember a SheetState for ModalBottomSheet.

rememberRangeSliderState

@Composable

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

Creates a SliderState that is remembered across compositions.

rememberSearchBarState

@Composable

fun rememberSearchBarState(initialValue: SearchBarValue = SearchBarValue.Collapsed, animationSpecForExpand: AnimationSpec<Float> = MotionSchemeKeyTokens.SlowSpatial.value(), animationSpecForCollapse: AnimationSpec<Float> = MotionSchemeKeyTokens.DefaultSpatial.value()): SearchBarState

Create and remember a SearchBarState.

rememberSliderState

@Composable

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

Creates a SliderState that is remembered across compositions.

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, positionalThreshold: (totalDistance: Float) -> Float = SwipeToDismissBoxDefaults.positionalThreshold): SwipeToDismissBoxState

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

rememberWideNavigationRailState

@Composable

fun rememberWideNavigationRailState(initialValue: WideNavigationRailValue = WideNavigationRailValue.Collapsed): WideNavigationRailState

Create and remember a WideNavigationRailState.

RichTooltip

@Composable

fun TooltipScope.RichTooltip(modifier: Modifier = Modifier, title: @Composable () -> Unit? = null, action: @Composable () -> Unit? = null, caretShape: Shape? = null, maxWidth: Dp = TooltipDefaults.richTooltipMaxWidth, 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(state: SearchBarState, inputField: @Composable () -> Unit, modifier: Modifier = Modifier, shape: Shape = SearchBarDefaults.inputFieldShape, colors: SearchBarColors = SearchBarDefaults.colors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation)

@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() }, minTabWidth: Dp = TabRowDefaults.ScrollableTabRowMinTabWidth, 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

SecureTextField

@Composable

fun SecureTextField(state: TextFieldState, modifier: Modifier = Modifier, enabled: Boolean = true, textStyle: TextStyle = LocalTextStyle.current, labelPosition: TextFieldLabelPosition = TextFieldLabelPosition.Attached(), label: @Composable TextFieldLabelScope.() -> 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, inputTransformation: InputTransformation? = null, textObfuscationMode: TextObfuscationMode = TextObfuscationMode.RevealLastTyped, textObfuscationCharacter: Char = DefaultObfuscationCharacter, keyboardOptions: KeyboardOptions = SecureTextFieldKeyboardOptions, onKeyboardAction: KeyboardActionHandler? = null, onTextLayout: Density.(getResult: () -> TextLayoutResult?) -> Unit? = null, shape: Shape = TextFieldDefaults.shape, colors: TextFieldColors = TextFieldDefaults.colors(), contentPadding: PaddingValues = if (label == null || labelPosition is TextFieldLabelPosition.Above) { TextFieldDefaults.contentPaddingWithoutLabel() } else { TextFieldDefaults.contentPaddingWithLabel() }, interactionSource: MutableInteractionSource? = null)

Material Design filled text field for secure content

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)), contentPadding: PaddingValues = SegmentedButtonDefaults.ContentPadding, interactionSource: MutableInteractionSource? = null, icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(checked) }, label: @Composable () -> Unit)

Material Design segmented Button

@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)), contentPadding: PaddingValues = SegmentedButtonDefaults.ContentPadding, interactionSource: MutableInteractionSource? = null, icon: @Composable () -> Unit = { SegmentedButtonDefaults.Icon(selected) }, label: @Composable () -> Unit)

Material Design segmented button

ShortNavigationBar

@Composable

fun ShortNavigationBar(modifier: Modifier = Modifier, containerColor: Color = ShortNavigationBarDefaults.containerColor, contentColor: Color = ShortNavigationBarDefaults.contentColor, windowInsets: WindowInsets = ShortNavigationBarDefaults.windowInsets, arrangement: ShortNavigationBarArrangement = ShortNavigationBarDefaults.arrangement, content: @Composable () -> Unit)

Material Design short navigation bar.

ShortNavigationBarItem

@Composable

fun ShortNavigationBarItem(selected: Boolean, onClick: () -> Unit, icon: @Composable () -> Unit, label: @Composable () -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, iconPosition: NavigationItemIconPosition = NavigationItemIconPosition.Top, colors: NavigationItemColors = ShortNavigationBarItemDefaults.colors(), interactionSource: MutableInteractionSource? = null)

Material Design short navigation bar item.

SingleChoiceSegmentedButtonRow

@Composable

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

Material Design 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

SmallExtendedFloatingActionButton

@Composable

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

@Composable

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

Material Design small extended floating action button

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.

SplitButtonLayout

@Composable

fun SplitButtonLayout(leadingButton: @Composable () -> Unit, trailingButton: @Composable () -> Unit, modifier: Modifier = Modifier, spacing: Dp = SplitButtonDefaults.Spacing)

A SplitButtonLayout let user define a button group consisting of 2 buttons. The leading button performs a primary action, and the trailing button performs a secondary action that is contextually related to the primary action.

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, onDismiss: (SwipeToDismissBoxValue) -> Unit = {}, 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, autoSize: TextAutoSize? = null, 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: String, color: ColorProducer, modifier: Modifier = Modifier, autoSize: TextAutoSize? = null, 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, autoSize: TextAutoSize? = null, 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)

@Composable

fun Text(text: AnnotatedString, color: ColorProducer, modifier: Modifier = Modifier, autoSize: TextAutoSize? = null, 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, shapes: ButtonShapes, modifier: Modifier = Modifier, enabled: Boolean = true, colors: ButtonColors = ButtonDefaults.textButtonColors(), elevation: ButtonElevation? = null, border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding, interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

@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())

@Composable

fun TextField(state: TextFieldState, modifier: Modifier = Modifier, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = LocalTextStyle.current, labelPosition: TextFieldLabelPosition = TextFieldLabelPosition.Attached(), label: @Composable TextFieldLabelScope.() -> 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, inputTransformation: InputTransformation? = null, outputTransformation: OutputTransformation? = null, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, onKeyboardAction: KeyboardActionHandler? = null, lineLimits: TextFieldLineLimits = TextFieldLineLimits.Default, onTextLayout: Density.(getResult: () -> TextLayoutResult?) -> Unit? = null, scrollState: ScrollState = rememberScrollState(), shape: Shape = TextFieldDefaults.shape, colors: TextFieldColors = TextFieldDefaults.colors(), contentPadding: PaddingValues = if (label == null || labelPosition is TextFieldLabelPosition.Above) { TextFieldDefaults.contentPaddingWithoutLabel() } else { TextFieldDefaults.contentPaddingWithLabel() }, interactionSource: MutableInteractionSource? = null)

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

TimePickerDialog

@Composable

fun TimePickerDialog(onDismissRequest: () -> Unit, confirmButton: @Composable () -> Unit, title: @Composable () -> Unit, modifier: Modifier = Modifier, properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = false), modeToggleButton: @Composable () -> Unit? = null, dismissButton: @Composable () -> Unit? = null, shape: Shape = TimePickerDialogDefaults.shape, containerColor: Color = TimePickerDialogDefaults.containerColor, content: @Composable ColumnScope.() -> Unit)

Material Design time picker dialog

TimePickerState

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

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

ToggleButton

@Composable

fun ToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(ButtonDefaults.MinHeight), colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight), interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

TODO link to mio page when available.

ToggleFloatingActionButton

@Composable

fun ToggleFloatingActionButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, containerColor: (Float) -> Color = ToggleFloatingActionButtonDefaults.containerColor(), contentAlignment: Alignment = Alignment.TopEnd, containerSize: (Float) -> Dp = ToggleFloatingActionButtonDefaults.containerSize(), containerCornerRadius: (Float) -> Dp = ToggleFloatingActionButtonDefaults.containerCornerRadius(), content: @Composable ToggleFloatingActionButtonScope.() -> Unit)

Toggleable FAB supports animating its container size, corner radius, and color when it is toggled, and should be used in conjunction with a FloatingActionButtonMenu to provide additional choices to the user after clicking the FAB.

TonalToggleButton

@Composable

fun TonalToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shapes: ToggleButtonShapes = ToggleButtonDefaults.shapesFor(ButtonDefaults.MinHeight), colors: ToggleButtonColors = ToggleButtonDefaults.tonalToggleButtonColors(), elevation: ButtonElevation? = ButtonDefaults.filledTonalButtonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight), interactionSource: MutableInteractionSource? = null, content: @Composable RowScope.() -> Unit)

TODO link to mio page when available.

TooltipBox

@Composable

fun TooltipBox(positionProvider: PopupPositionProvider, tooltip: @Composable TooltipScope.() -> Unit, state: TooltipState, modifier: Modifier = Modifier, onDismissRequest: () -> Unit? = null, focusable: Boolean = false, enableUserInput: Boolean = true, hasAction: Boolean = false, 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, contentPadding: PaddingValues = TopAppBarDefaults.ContentPadding)

@Composable

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

Material Design small top app bar

toPath

@Composable

fun RoundedPolygon.toPath(startAngle: Int = 0): Path

Returns a Path that is remembered across compositions for this RoundedPolygon.

fun Morph.toPath(progress: Float, path: Path = Path(), startAngle: Int = 0): Path

Returns a Path for this Morph.

TopSearchBar

@Composable

fun ~~TopSearchBar~~(state: SearchBarState, inputField: @Composable () -> Unit, modifier: Modifier = Modifier, shape: Shape = SearchBarDefaults.inputFieldShape, colors: SearchBarColors = SearchBarDefaults.colors(), tonalElevation: Dp = SearchBarDefaults.TonalElevation, shadowElevation: Dp = SearchBarDefaults.ShadowElevation, windowInsets: WindowInsets = SearchBarDefaults.windowInsets, scrollBehavior: SearchBarScrollBehavior? = null)

Material Design search

toShape

@Composable

fun RoundedPolygon.toShape(startAngle: Int = 0): Shape

Returns a Shape that is remembered across compositions for this RoundedPolygon.

TriStateCheckbox

@Composable

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

@Composable

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

Material Design checkbox

TwoRowsTopAppBar

@Composable

fun TwoRowsTopAppBar(title: @Composable (expanded: Boolean) -> Unit, modifier: Modifier = Modifier, subtitle: @Composable (expanded: Boolean) -> Unit? = null, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, titleHorizontalAlignment: Alignment.Horizontal = Alignment.Start, collapsedHeight: Dp = Dp.Unspecified, expandedHeight: Dp = Dp.Unspecified, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

A basic two-rows Material Design top app bar.

VerticalDivider

@Composable

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

Material Design divider

VerticalDragHandle

@Composable

fun VerticalDragHandle(modifier: Modifier = Modifier, sizes: DragHandleSizes = VerticalDragHandleDefaults.sizes(), colors: DragHandleColors = VerticalDragHandleDefaults.colors(), shapes: DragHandleShapes = VerticalDragHandleDefaults.shapes(), interactionSource: MutableInteractionSource? = null)

Material Design drag handle

VerticalFloatingToolbar

@Composable

fun VerticalFloatingToolbar(expanded: Boolean, modifier: Modifier = Modifier, colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(), contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding, scrollBehavior: FloatingToolbarScrollBehavior? = null, shape: Shape = FloatingToolbarDefaults.ContainerShape, leadingContent: @Composable ColumnScope.() -> Unit? = null, trailingContent: @Composable ColumnScope.() -> Unit? = null, expandedShadowElevation: Dp = FloatingToolbarDefaults.ContainerExpandedElevation, collapsedShadowElevation: Dp = FloatingToolbarDefaults.ContainerCollapsedElevation, content: @Composable ColumnScope.() -> Unit)

A vertical floating toolbar displays navigation and key actions in a Column. It can be positioned anywhere on the screen and floats over the rest of the content.

@Composable

fun VerticalFloatingToolbar(expanded: Boolean, floatingActionButton: @Composable () -> Unit, modifier: Modifier = Modifier, colors: FloatingToolbarColors = FloatingToolbarDefaults.standardFloatingToolbarColors(), contentPadding: PaddingValues = FloatingToolbarDefaults.ContentPadding, scrollBehavior: FloatingToolbarScrollBehavior? = null, shape: Shape = FloatingToolbarDefaults.ContainerShape, floatingActionButtonPosition: FloatingToolbarVerticalFabPosition = FloatingToolbarVerticalFabPosition.Bottom, animationSpec: FiniteAnimationSpec<Float> = FloatingToolbarDefaults.animationSpec(), expandedShadowElevation: Dp = FloatingToolbarDefaults.ContainerExpandedElevationWithFab, collapsedShadowElevation: Dp = FloatingToolbarDefaults.ContainerCollapsedElevationWithFab, content: @Composable ColumnScope.() -> Unit)

A floating toolbar that displays vertically. The bar features its content within a Column, and an adjacent floating icon button. It can be positioned anywhere on the screen, floating above other content, and its expanded flag controls the visibility of the actions with a slide animations.

VerticalSlider

@Composable

fun VerticalSlider(state: SliderState, modifier: Modifier = Modifier, enabled: Boolean = true, reverseDirection: Boolean = false, colors: SliderColors = SliderDefaults.colors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, thumb: @Composable (SliderState) -> Unit = { sliderState -> SliderDefaults.Thumb( interactionSource = interactionSource, sliderState = sliderState, colors = colors, enabled = enabled, thumbSize = VerticalThumbSize, ) }, track: @Composable (SliderState) -> Unit = { sliderState -> SliderDefaults.Track( colors = colors, enabled = enabled, sliderState = sliderState, trackCornerSize = Dp.Unspecified, ) })

Material Design slider

WideNavigationRail

@Composable

fun WideNavigationRail(modifier: Modifier = Modifier, state: WideNavigationRailState = rememberWideNavigationRailState(), shape: Shape = WideNavigationRailDefaults.shape, colors: WideNavigationRailColors = WideNavigationRailDefaults.colors(), header: @Composable () -> Unit? = null, windowInsets: WindowInsets = WideNavigationRailDefaults.windowInsets, arrangement: Arrangement.Vertical = WideNavigationRailDefaults.arrangement, content: @Composable () -> Unit)

Material design wide navigation rail.

WideNavigationRailItem

@Composable

fun WideNavigationRailItem(selected: Boolean, onClick: () -> Unit, icon: @Composable () -> Unit, label: @Composable () -> Unit?, railExpanded: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, iconPosition: NavigationItemIconPosition = WideNavigationRailItemDefaults.iconPositionFor(railExpanded), colors: NavigationItemColors = WideNavigationRailItemDefaults.colors(), interactionSource: MutableInteractionSource? = null)

Material Design wide navigation rail item.