{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

ButtonKt

public final class ButtonKt


Summary

Public methods

static final void
@Composable
Button(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design button.

static final void
@Composable
ElevatedButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design elevated button.

static final void
@Composable
FilledTonalButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design filled tonal button.

static final void
@Composable
OutlinedButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design outlined button.

static final void
@Composable
TextButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design text button.

Public methods

Button

@Composable
public static final void Button(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design button.

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

Filled button image

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 = { /* Do something! */ }) { 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.ButtonWithIconContentPadding
) {
    Icon(
        Icons.Filled.Favorite,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.IconSize)
    )
    Spacer(Modifier.size(ButtonDefaults.IconSpacing))
    Text("Like")
}

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.

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

Parameters
@NonNull Function0<Unit> onClick

called when this button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this button

boolean enabled

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.

@NonNull Shape shape

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

@NonNull ButtonColors colors

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

ButtonElevation elevation

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.

BorderStroke border

the border to draw around the container of this button

@NonNull PaddingValues contentPadding

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

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.

ElevatedButton

@Composable
public static final void ElevatedButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design elevated button.

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

Elevated button image

Elevated buttons are high-emphasis buttons that are essentially FilledTonalButtons with a shadow. To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from patterned container.

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

ElevatedButton(onClick = { /* Do something! */ }) { Text("Elevated 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.

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

Parameters
@NonNull Function0<Unit> onClick

called when this button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this button

boolean enabled

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.

@NonNull Shape shape

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

@NonNull ButtonColors colors

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

ButtonElevation elevation

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.

BorderStroke border

the border to draw around the container of this button

@NonNull PaddingValues contentPadding

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

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.

FilledTonalButton

@Composable
public static final void FilledTonalButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design filled tonal button.

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

Filled tonal button image

Filled tonal buttons are medium-emphasis buttons that is an alternative middle ground between default Buttons (filled) and OutlinedButtons. They can be used in contexts where lower-priority button requires slightly more emphasis than an outline would give, such as "Next" in an onboarding flow. Tonal buttons use the secondary color mapping.

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

FilledTonalButton(onClick = { /* Do something! */ }) { Text("Filled Tonal 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.

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

Parameters
@NonNull Function0<Unit> onClick

called when this button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this button

boolean enabled

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.

@NonNull Shape shape

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

@NonNull ButtonColors colors

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

ButtonElevation elevation

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.

BorderStroke border

the border to draw around the container of this button

@NonNull PaddingValues contentPadding

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

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.

OutlinedButton

@Composable
public static final void OutlinedButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design outlined button.

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

Outlined button image

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but are not the primary action in an app. Outlined buttons pair well with Buttons to indicate an alternative, secondary action.

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

OutlinedButton(onClick = { /* Do something! */ }) { Text("Outlined 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.

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

Parameters
@NonNull Function0<Unit> onClick

called when this button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this button

boolean enabled

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.

@NonNull Shape shape

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

@NonNull ButtonColors colors

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

ButtonElevation elevation

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.

BorderStroke border

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

@NonNull PaddingValues contentPadding

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

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.

TextButton

@Composable
public static final void TextButton(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull Shape shape,
    @NonNull ButtonColors colors,
    ButtonElevation elevation,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull RowScopeUnit> content
)

Material Design text button.

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

Text button image

Text buttons are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content. Text buttons are used for the lowest priority actions, especially when presenting multiple options.

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

TextButton(onClick = { /* Do something! */ }) { Text("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.

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

Parameters
@NonNull Function0<Unit> onClick

called when this button is clicked

@NonNull Modifier modifier

the Modifier to be applied to this button

boolean enabled

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.

@NonNull Shape shape

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

@NonNull ButtonColors colors

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

ButtonElevation elevation

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.

BorderStroke border

the border to draw around the container of this button

@NonNull PaddingValues contentPadding

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

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.