onClick

the [Modifier] to be applied to this button

modifier

controls the enabled state of this button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

enabled

defines the shape of this button's container, border (when [border] is not null), and shadow (when using [elevation])

shape

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

colors

[ButtonElevation] used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See [ButtonElevation.shadowElevation] and [ButtonElevation.tonalElevation].

elevation

the border to draw around the container of this button

border

the spacing values to apply internally between the container and the content

contentPadding

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

interactionSource

Button

Will be called when the user clicks the button

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

Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme

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

Optional [BorderStroke] that will be used to resolve the border for this button in different states.

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

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

Base level Wear Material3 [ChildButton] that offers a single slot to take any content.

ChildButton

CircleButton

text

Style configuration for the text such as color, font, line height etc.

style

Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If [softWrap] is false, [overflow] and [TextAlign] may have unexpected effects.

softWrap

overflow

An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to [overflow] and [softWrap]. If it is not null, then it must be greater than zero.

maxLines

Callback that is executed when a new text layout is calculated. A [TextLayoutResult] object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.

onTextLayout

Callback that is executed when users click the text. This callback is called with clicked character's offset

A continent version of [BasicText] component to be able to handle click event on the text.

ClickableText

Will be called when the user clicks the button.

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

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

Increases the transparent clickable area around the background, defaults to [ButtonDefaults.CompactButtonBackgroundPadding]

backgroundPadding

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

The content displayed on the [CompactButton] such as text, icon or image

content

CompactButton

[ButtonColors] that will be used to resolve the colors for this button in different states. See [ButtonDefaults.elevatedButtonColors].

[ButtonElevation] used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See [ButtonDefaults.elevatedButtonElevation].

ElevatedButton

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

the color used for the background of this FAB. Use [Color.Transparent] to have no color.

containerColor

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

contentColor

[FloatingActionButtonElevation] used to resolve the elevation for this FAB in different states. This controls the size of the shadow below the FAB. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See also: [Surface].

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

the content of this FAB, typically a [Text] labe

Material Design extended floating action button

ExtendedFloatingActionButton

the [Modifier] to be applied to this icon button

controls the enabled state of this icon button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

defines the shape of this icon button's container

[IconButtonColors] that will be used to resolve the colors used for this icon button in different states. See [IconButtonDefaults.filledIconButtonColors].

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

the content of this icon button, typically an [Icon

FilledIconButton

whether this icon button is toggled on or off

checked

onCheckedChange

[IconToggleButtonColors] that will be used to resolve the colors used for this icon button in different states. See [IconButtonDefaults.filledIconToggleButtonColors].

Material Design filled icon toggle button

FilledIconToggleButton

[ButtonColors] that will be used to resolve the colors for this button in different states. See [ButtonDefaults.filledTonalButtonColors].

[ButtonElevation] used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay.

FilledTonalButton

FilledTonalIconButton

Material Design filled tonal icon toggle button

FilledTonalIconToggleButton

the content of this FAB, typically an [Icon

FloatingActionButton

[IconButtonColors] that will be used to resolve the colors used for this icon button in different states. See [IconButtonDefaults.iconButtonColors].

IconButton

[IconToggleButtonColors] that will be used to resolve the colors used for this icon button in different states. See [IconButtonDefaults.iconToggleButtonColors].

Material Design standard icon toggle button

IconToggleButton

Material Design large floating action button

LargeFloatingActionButton

defines the shape of this button's container, border (when [border] is not null), and shadow (when using [elevation]).

[ButtonColors] that will be used to resolve the colors for this button in different states. See [ButtonDefaults.outlinedButtonColors].

the border to draw around the container of this button. Pass `null` for no border.

OutlinedButton

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

Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme.

[ButtonBorder] that will be used to resolve the button border in different states. See [ButtonDefaults.outlinedButtonBorder].

The content displayed on the [OutlinedCompactButton] such as text, icon or image

OutlinedCompactButton

defines the shape of this icon button's container and border (when [border] is not null)

[IconButtonColors] that will be used to resolve the colors used for this icon button in different states. See [IconButtonDefaults.outlinedIconButtonColors].

the border to draw around the container of this icon button. Pass `null` for no border. See [IconButtonDefaults.outlinedIconButtonBorder].

OutlinedIconButton

[IconToggleButtonColors] that will be used to resolve the colors used for this icon button in different states. See [IconButtonDefaults.outlinedIconToggleButtonColors].

the border to draw around the container of this icon button. Pass `null` for no border. See [IconButtonDefaults.outlinedIconToggleButtonBorder].

Material Design outlined icon toggle button

OutlinedIconToggleButton

whether this radio button is selected or not

selected

called when this radio button is clicked. If `null`, then this radio button will not be interactable, unless something else handles its input events and updates its state.

the [Modifier] to be applied to this radio button

controls the enabled state of this radio button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

[RadioButtonColors] that will be used to resolve the color used for this radio button in different states. See [RadioButtonDefaults.colors].

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

RadioButton

Material Design small floating action button

SmallFloatingActionButton

Boolean flag indicating whether this button is currently checked.

Callback to be invoked when this buttons checked/selected status is changed.

A slot for providing the chip's main label. The contents are expected to be text which is "start" aligned.

label

Click listener called when the user clicks the main body of the chip, the area behind the labels.

A slot for providing the chip's toggle controls(s). The contents are expected to be a horizontally and vertically centre aligned icon of size [ToggleChipDefaults.IconSize]. Three built-in types of toggle control are supported and [ImageVector]s can be obtained from [ToggleChipDefaults.switchIcon], [ToggleChipDefaults.radioIcon] and [ToggleChipDefaults.checkboxIcon]. In order to correctly render when the Chip is not enabled the icon must set its alpha value to [LocalContentAlpha].

toggleControl

A slot for providing the chip's secondary label. The contents are expected to be "start" or "center" aligned. label and secondaryLabel contents should be consistently aligned.

secondaryLabel

[SplitToggleChipColors] that will be used to resolve the background and content color for this chip in different states, see [ToggleChipDefaults.splitToggleChipColors].

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

The [MutableInteractionSource] representing the stream of [Interaction]s for this chip's "toggleable" tap area. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this Chip in different [Interaction]s.

checkedInteractionSource

The [MutableInteractionSource] representing the stream of [Interaction]s for this chip's "clickable" tap area. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this Chip in different [Interaction]s.

clickInteractionSource

Defines the chip's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Them

SplitToggleChip

[ButtonColors] that will be used to resolve the colors for this button in different states. See [ButtonDefaults.textButtonColors].

[ButtonElevation] used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. A TextButton typically has no elevation, and the default value is `null`. See [ElevatedButton] for a button with elevation.

TextButton

Boolean flag indicating whether this toggle button is currently checked.

Callback to be invoked when this toggle button is clicked.

Modifier to be applied to the toggle button.

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

[ToggleButtonColors] that will be used to resolve the background and content color for this toggle button. See [ToggleButtonDefaults.toggleButtonColors].

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

The icon, image or text to be drawn inside the toggle button

ToggleButton

Callback to be invoked when this buttons checked/selected status is

An optional slot for providing an icon to indicate the purpose of the chip. The contents are expected to be a horizontally and vertically centre aligned icon of size [ToggleChipDefaults.IconSize]. In order to correctly render when the Chip is not enabled the icon must set its alpha value to [LocalContentAlpha].

appIcon

A slot for providing the chip's secondary label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned.

[ToggleChipColors] that will be used to resolve the background and content color for this chip in different states, see [ToggleChipDefaults.toggleChipColors].

ToggleChip

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

the background to be applied to the [WideButton]

background

Defines size of the Button relative to its original size.

scale

glow

Color to be used for the text content of the Button

tonal elevation used to apply a color shift to the button to give the it higher emphasis

tonalElevation

WideButton

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

Jetpack Compose Action components