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

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

[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

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 Button components listed on our website, you can use in your Jetpack Compose projects.

Jetpack Compose Button components