Button

Functions summary

`Unit`	`@Composable Button( onClick: () -> Unit, modifier: Modifier, enabled: Boolean, shape: Shape, colors: ButtonColors, elevation: ButtonElevation?, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, content: @Composable RowScope.() -> Unit )` Material Design button	Cmn
`Unit`	`@Composable @ExperimentalMaterial3ExpressiveApi Button( onClick: () -> Unit, shapes: ButtonShapes, modifier: Modifier, enabled: Boolean, colors: ButtonColors, elevation: ButtonElevation?, border: BorderStroke?, contentPadding: PaddingValues, interactionSource: MutableInteractionSource?, content: @Composable RowScope.() -> Unit )` Material Design button	Cmn

Functions

Button

Cmn

Artifact: androidx.compose.material3:material3

View Source

Added in 1.0.0

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

Material Design button

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Filled buttons are high-emphasis buttons. Filled buttons have the most visual impact after the FloatingActionButton, and should be used for important, final actions that complete a flow, like "Save", "Join now", or "Confirm".

import androidx.compose.material3.Button
import androidx.compose.material3.Text

Button(onClick = {}) { Text("Button") }

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

Button(
    onClick = { /* Do something! */ },
    contentPadding =
        ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight, hasStartIcon = true),
) {
    Icon(
        Icons.Filled.Favorite,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(ButtonDefaults.MinHeight)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(ButtonDefaults.MinHeight)))
    Text("Like")
}

Button that uses a square shape instead of the default round shape:

import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text

Button(onClick = { /* Do something! */ }, shape = ButtonDefaults.squareShape) { Text("Button") }

Button that utilizes the small design content padding:

import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text

Button(onClick = { /* Do something! */ }, contentPadding = ButtonDefaults.SmallContentPadding) {
    Text("Button")
}

Button uses the small design spec as default. For a Button that uses the design for extra small, medium, large, or extra large buttons:

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

val size = ButtonDefaults.ExtraSmallContainerHeight
Button(
    onClick = { /* Do something! */ },
    modifier = Modifier.heightIn(size),
    contentPadding = ButtonDefaults.contentPaddingFor(size, hasStartIcon = true),
) {
    Icon(
        Icons.Filled.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
    Text("Label")
}

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

val size = ButtonDefaults.MediumContainerHeight
Button(
    onClick = { /* Do something! */ },
    modifier = Modifier.heightIn(size),
    contentPadding = ButtonDefaults.contentPaddingFor(size, hasStartIcon = true),
) {
    Icon(
        Icons.Filled.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
    Text("Label", style = ButtonDefaults.textStyleFor(size))
}

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

val size = ButtonDefaults.LargeContainerHeight
Button(
    onClick = { /* Do something! */ },
    modifier = Modifier.heightIn(size),
    contentPadding = ButtonDefaults.contentPaddingFor(size, hasStartIcon = true),
) {
    Icon(
        Icons.Filled.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
    Text("Label", style = ButtonDefaults.textStyleFor(size))
}

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

val size = ButtonDefaults.ExtraLargeContainerHeight
Button(
    onClick = { /* Do something! */ },
    modifier = Modifier.heightIn(size),
    contentPadding = ButtonDefaults.contentPaddingFor(size, hasStartIcon = true),
) {
    Icon(
        Icons.Filled.Edit,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
    )
    Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
    Text("Label", style = ButtonDefaults.textStyleFor(size))
}

Choose the best button for an action based on the amount of emphasis it needs. The more important an action is, the higher emphasis its button should be.

See OutlinedButton for a medium-emphasis button with a border.
See ElevatedButton for an FilledTonalButton with a shadow.
See TextButton for a low-emphasis button with no border.
See FilledTonalButton for a middle ground between OutlinedButton and Button.

The default text style for internal Text components will be set to Typography.labelLarge.

Parameters
`onClick: () -> Unit`	called when this button is clicked
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this button
`enabled: Boolean = true`	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.
`shape: Shape = ButtonDefaults.shape`	defines the shape of this button's container, border (when `border` is not null), and shadow (when using `elevation`)
`colors: ButtonColors = ButtonDefaults.buttonColors()`	`ButtonColors` that will be used to resolve the colors for this button in different states. See `ButtonDefaults.buttonColors`.
`elevation: ButtonElevation? = ButtonDefaults.buttonElevation()`	`ButtonElevation` used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. See `ButtonElevation.shadowElevation`.
`border: BorderStroke? = null`	the border to draw around the container of this button
`contentPadding: PaddingValues = ButtonDefaults.ContentPadding`	the spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable RowScope.() -> Unit`	The content displayed on the button, expected to be text, icon or image.

Button

Cmn

Artifact: androidx.compose.material3:material3

View Source

@Composable
@ExperimentalMaterial3ExpressiveApi
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
): Unit

Material Design button

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post. It also morphs between the shapes provided in shapes depending on the state of the interaction with the button as long as the shapes provided our CornerBasedShapes. If a shape in shapes isn't a CornerBasedShape, then button will change between the ButtonShapes according to user interaction.

import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text

Button(onClick = {}, shapes = ButtonDefaults.shapes()) { Text("Button") }

Choose the best button for an action based on the amount of emphasis it needs. The more important an action is, the higher emphasis its button should be.

See OutlinedButton for a medium-emphasis button with a border.
See ElevatedButton for an FilledTonalButton with a shadow.
See TextButton for a low-emphasis button with no border.
See FilledTonalButton for a middle ground between OutlinedButton and Button.

The default text style for internal Text components will be set to Typography.labelLarge.

Parameters
`onClick: () -> Unit`	called when this button is clicked
`shapes: ButtonShapes`	the `ButtonShapes` that this button with morph between depending on the user's interaction with the button.
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this button
`enabled: Boolean = true`	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.
`colors: ButtonColors = ButtonDefaults.buttonColors()`	`ButtonColors` that will be used to resolve the colors for this button in different states. See `ButtonDefaults.buttonColors`.
`elevation: ButtonElevation? = ButtonDefaults.buttonElevation()`	`ButtonElevation` used to resolve the elevation for this button in different states. This controls the size of the shadow below the button. See `ButtonElevation.shadowElevation`.
`border: BorderStroke? = null`	the border to draw around the container of this button
`contentPadding: PaddingValues = ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight)`	the spacing values to apply internally between the container and the content
`interactionSource: MutableInteractionSource? = null`	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally.
`content: @Composable RowScope.() -> Unit`	The content displayed on the button, expected to be text, icon or image.