Object

ButtonDefaults

Contains the default values used by all 5 button types.

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free
Common
object ButtonDefaults

Contains the default values used by all 5 button types.

Default values that apply to all buttons types are MinWidth, MinHeight, IconSize, and IconSpacing.

A default value that applies only to Button, ElevatedButton, FilledTonalButton, and OutlinedButton is ContentPadding.

Default values that apply only to Button are buttonColors and buttonElevation. Default values that apply only to ElevatedButton are elevatedButtonColors and elevatedButtonElevation. Default values that apply only to FilledTonalButton are filledTonalButtonColors and filledTonalButtonElevation. A default value that applies only to OutlinedButton is outlinedButtonColors. Default values that apply only to TextButton is textButtonColors.

Properties

Common
val ContentPadding =
    PaddingValues(
        start = ButtonLeadingSpace,
        top = ButtonVerticalPadding,
        end = ButtonTrailingSpace,
        bottom = ButtonVerticalPadding,
    )

The default content padding used by Button, ElevatedButton, FilledTonalButton, OutlinedButton, and TextButton buttons.

  • See ButtonWithIconContentPadding for content padding used by Button that contains Icon.
Common
val ButtonWithIconContentPadding =
    PaddingValues(
        start = ButtonWithIconStartpadding,
        top = ButtonVerticalPadding,
        end = ButtonTrailingSpace,
        bottom = ButtonVerticalPadding,
    )

The default content padding used by Button that contains an Icon.

Common
Deprecated For binary compatibility
@ExperimentalMaterial3ExpressiveApi
val SmallButtonContentPadding

The default content padding used for small Button

Common
@ExperimentalMaterial3ExpressiveApi
val SmallContentPadding

The default content padding used for small Button

Common
@ExperimentalMaterial3ExpressiveApi
val ExtraSmallContentPadding

Default content padding for an extra small button.

Common
@ExperimentalMaterial3ExpressiveApi
val MediumContentPadding

Default content padding for a medium button.

Common
@ExperimentalMaterial3ExpressiveApi
val LargeContentPadding

Default content padding for a large button.

Common
@ExperimentalMaterial3ExpressiveApi
val ExtraLargeContentPadding

Default content padding for an extra large button.

Common
val TextButtonContentPadding =
    PaddingValues(
        start = TextButtonHorizontalPadding,
        top = ContentPadding.calculateTopPadding(),
        end = TextButtonHorizontalPadding,
        bottom = ContentPadding.calculateBottomPadding(),
    )

The default content padding used by TextButton.

  • See TextButtonWithIconContentPadding for content padding used by TextButton that contains Icon.

Note: it's recommended to use ContentPadding instead for a more consistent look between all buttons variants.

Common
val TextButtonWithIconContentPadding =
    PaddingValues(
        start = TextButtonHorizontalPadding,
        top = ContentPadding.calculateTopPadding(),
        end = TextButtonWithIconHorizontalEndPadding,
        bottom = ContentPadding.calculateBottomPadding(),
    )

The default content padding used by TextButton that contains an Icon.

Note: it's recommended to use ButtonWithIconContentPadding instead for a more consistent look between all buttons variants.

Common
val MinWidth = 58.dp

The default min width applied for small buttons. Note that you can override it by applying Modifier.widthIn directly on the button composable.

Common
val MinHeight =
    if (shouldUsePrecisionPointerComponentSizing.value) {
        36.dp
    } else {
        ButtonSmallTokens.ContainerHeight
    }

The default min height applied for small buttons. Note that you can override it by applying Modifier.heightIn directly on the button composable.

Common
@ExperimentalMaterial3ExpressiveApi
val ExtraSmallContainerHeight = ButtonXSmallTokens.ContainerHeight

The default height for a extra small button container.

Common
@ExperimentalMaterial3ExpressiveApi
val MediumContainerHeight =
    if (shouldUsePrecisionPointerComponentSizing.value) {
        46.dp
    } else {
        ButtonMediumTokens.ContainerHeight
    }

The default height for a medium button container.

Common
@ExperimentalMaterial3ExpressiveApi
val LargeContainerHeight =
    if (shouldUsePrecisionPointerComponentSizing.value) {
        54.dp
    } else {
        ButtonLargeTokens.ContainerHeight
    }

The default height for a large button container.

Common
@ExperimentalMaterial3ExpressiveApi
val ExtraLargeContainerHeight = ButtonXLargeTokens.ContainerHeight

The default height for a extra large button container.

Common
val IconSize = 18.dp

The default size of the icon when used inside a small button.

Common
@ExperimentalMaterial3ExpressiveApi val ExtraSmallIconSize = ButtonXSmallTokens.IconSize

The default size of the icon used inside an extra small button.

Common
@ExperimentalMaterial3ExpressiveApi val SmallIconSize = ButtonSmallTokens.IconSize

The expressive size of the icon used inside a small button.

Common
@ExperimentalMaterial3ExpressiveApi val MediumIconSize = ButtonMediumTokens.IconSize

The default size of the icon used inside a medium button.

Common
@ExperimentalMaterial3ExpressiveApi
val LargeIconSize =
    if (shouldUsePrecisionPointerComponentSizing.value) {
        24.dp
    } else {
        ButtonLargeTokens.IconSize
    }

The default size of the icon used inside a large button.

Common
@ExperimentalMaterial3ExpressiveApi val ExtraLargeIconSize = ButtonXLargeTokens.IconSize

The default size of the icon used inside an extra large button.

Common
val IconSpacing = ButtonSmallTokens.IconLabelSpace

The default size of the spacing between an icon and a text when they used inside a small button.

Common
@ExperimentalMaterial3ExpressiveApi val ExtraSmallIconSpacing = 4.dp

The default spacing between an icon and a text when they used inside any extra small button.

Common
@ExperimentalMaterial3ExpressiveApi val MediumIconSpacing = ButtonMediumTokens.IconLabelSpace

The default spacing between an icon and a text when they're inside any medium button.

Common
@ExperimentalMaterial3ExpressiveApi
val LargeIconSpacing =
    if (shouldUsePrecisionPointerComponentSizing.value) {
        8.dp
    } else {
        ButtonLargeTokens.IconLabelSpace
    }

The default spacing between an icon and a text when they're inside any large button.

Common
@ExperimentalMaterial3ExpressiveApi
val ExtraLargeIconSpacing = ButtonXLargeTokens.IconLabelSpace

The default spacing between an icon and a text when they used inside any extra large button.

Common
@ExperimentalMaterial3ExpressiveApi
val squareShape: Shape

Square shape for default buttons.

Common
@ExperimentalMaterial3ExpressiveApi
val pressedShape: Shape

Pressed shape for default buttons.

Common
@ExperimentalMaterial3ExpressiveApi
val extraSmallPressedShape: Shape

Pressed shape for extra small buttons.

Common
@ExperimentalMaterial3ExpressiveApi
val mediumPressedShape: Shape

Pressed shape for medium buttons.

Common
@ExperimentalMaterial3ExpressiveApi
val largePressedShape: Shape

Pressed shape for large buttons.

Common
@ExperimentalMaterial3ExpressiveApi
val extraLargePressedShape: Shape

Pressed shape for extra large buttons.

Common
val shape: Shape

Default shape for a button.

Common
val elevatedShape: Shape

Default shape for an elevated button.

Common
val filledTonalShape: Shape

Default shape for a filled tonal button.

Common
val outlinedShape: Shape

Default shape for an outlined button.

Common
val textShape: Shape

Default shape for a text button.

Common
val outlinedButtonBorder: BorderStroke

The default BorderStroke used by OutlinedButton.

Functions

shapes

@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun shapes() = MaterialTheme.shapes.defaultButtonShapes

Creates a ButtonShapes that represents the default shape and pressed shape used in a button.

shapes

@Composable
    @ExperimentalMaterial3ExpressiveApi
    fun shapes(shape: Shape? = null, pressedShape: Shape? = null): ButtonShapes

Creates a ButtonShapes that represents the default shape and pressedShape used in a Button and its variants.

Parameters
shape the unchecked shape for ButtonShapes
pressedShape the unchecked shape for ButtonShapes 
@Composable fun buttonColors() = MaterialTheme.colorScheme.defaultButtonColors

Creates a ButtonColors that represents the default container and content colors used in a Button.

buttonColors

@Composable
    fun buttonColors(
        containerColor: Color = Color.Unspecified,
        contentColor: Color = Color.Unspecified,
        disabledContainerColor: Color = Color.Unspecified,
        disabledContentColor: Color = Color.Unspecified,
    ): ButtonColors

Creates a ButtonColors that represents the default container and content colors used in a Button.

Parameters
containerColor the container color of this Button when enabled.
contentColor the content color of this Button when enabled.
disabledContainerColor the container color of this Button when not enabled.
disabledContentColor the content color of this Button when not enabled. 
@Composable fun elevatedButtonColors() = MaterialTheme.colorScheme.defaultElevatedButtonColors

Creates a ButtonColors that represents the default container and content colors used in an ElevatedButton.

elevatedButtonColors

@Composable
    fun elevatedButtonColors(
        containerColor: Color = Color.Unspecified,
        contentColor: Color = Color.Unspecified,
        disabledContainerColor: Color = Color.Unspecified,
        disabledContentColor: Color = Color.Unspecified,
    ): ButtonColors

Creates a ButtonColors that represents the default container and content colors used in an ElevatedButton.

Parameters
containerColor the container color of this ElevatedButton when enabled
contentColor the content color of this ElevatedButton when enabled
disabledContainerColor the container color of this ElevatedButton when not enabled
disabledContentColor the content color of this ElevatedButton when not enabled

filledTonalButtonColors

@Composable
    fun filledTonalButtonColors() = MaterialTheme.colorScheme.defaultFilledTonalButtonColors

Creates a ButtonColors that represents the default container and content colors used in an FilledTonalButton.

filledTonalButtonColors

@Composable
    fun filledTonalButtonColors(
        containerColor: Color = Color.Unspecified,
        contentColor: Color = Color.Unspecified,
        disabledContainerColor: Color = Color.Unspecified,
        disabledContentColor: Color = Color.Unspecified,
    ): ButtonColors

Creates a ButtonColors that represents the default container and content colors used in an FilledTonalButton.

Parameters
containerColor the container color of this FilledTonalButton when enabled
contentColor the content color of this FilledTonalButton when enabled
disabledContainerColor the container color of this FilledTonalButton when not enabled
disabledContentColor the content color of this FilledTonalButton when not enabled 
@Composable fun outlinedButtonColors() = MaterialTheme.colorScheme.defaultOutlinedButtonColors

Creates a ButtonColors that represents the default container and content colors used in an OutlinedButton.

outlinedButtonColors

@Composable
    fun outlinedButtonColors(
        containerColor: Color = Color.Unspecified,
        contentColor: Color = Color.Unspecified,
        disabledContainerColor: Color = Color.Unspecified,
        disabledContentColor: Color = Color.Unspecified,
    ): ButtonColors

Creates a ButtonColors that represents the default container and content colors used in an OutlinedButton.

Parameters
containerColor the container color of this OutlinedButton when enabled
contentColor the content color of this OutlinedButton when enabled
disabledContainerColor the container color of this OutlinedButton when not enabled
disabledContentColor the content color of this OutlinedButton when not enabled 
@Composable fun textButtonColors() = MaterialTheme.colorScheme.defaultTextButtonColors

Creates a ButtonColors that represents the default container and content colors used in a TextButton.

textButtonColors

@Composable
    fun textButtonColors(
        containerColor: Color = Color.Unspecified,
        contentColor: Color = Color.Unspecified,
        disabledContainerColor: Color = Color.Unspecified,
        disabledContentColor: Color = Color.Unspecified,
    ): ButtonColors

Creates a ButtonColors that represents the default container and content colors used in a TextButton.

Parameters
containerColor the container color of this TextButton when enabled
contentColor the content color of this TextButton when enabled
disabledContainerColor the container color of this TextButton when not enabled
disabledContentColor the content color of this TextButton when not enabled

buttonElevation

@Composable
    fun buttonElevation(
        defaultElevation: Dp = FilledButtonTokens.ContainerElevation,
        pressedElevation: Dp = FilledButtonTokens.PressedContainerElevation,
        focusedElevation: Dp = FilledButtonTokens.FocusedContainerElevation,
        hoveredElevation: Dp = FilledButtonTokens.HoveredContainerElevation,
        disabledElevation: Dp = FilledButtonTokens.DisabledContainerElevation,
    ): ButtonElevation

Creates a ButtonElevation that will animate between the provided values according to the Material specification for a Button.

Parameters
defaultElevation the elevation used when the Button is enabled, and has no other Interactions.
pressedElevation the elevation used when this Button is enabled and pressed.
focusedElevation the elevation used when the Button is enabled and focused.
hoveredElevation the elevation used when the Button is enabled and hovered.
disabledElevation the elevation used when the Button is not enabled.

elevatedButtonElevation

@Composable
    fun elevatedButtonElevation(
        defaultElevation: Dp = ElevatedButtonTokens.ContainerElevation,
        pressedElevation: Dp = ElevatedButtonTokens.PressedContainerElevation,
        focusedElevation: Dp = ElevatedButtonTokens.FocusedContainerElevation,
        hoveredElevation: Dp = ElevatedButtonTokens.HoveredContainerElevation,
        disabledElevation: Dp = ElevatedButtonTokens.DisabledContainerElevation,
    ): ButtonElevation

Creates a ButtonElevation that will animate between the provided values according to the Material specification for a ElevatedButton.

Parameters
defaultElevation the elevation used when the ElevatedButton is enabled, and has no other Interactions.
pressedElevation the elevation used when this ElevatedButton is enabled and pressed.
focusedElevation the elevation used when the ElevatedButton is enabled and focused.
hoveredElevation the elevation used when the ElevatedButton is enabled and hovered.
disabledElevation the elevation used when the ElevatedButton is not enabled.

filledTonalButtonElevation

@Composable
    fun filledTonalButtonElevation(
        defaultElevation: Dp = FilledTonalButtonTokens.ContainerElevation,
        pressedElevation: Dp = FilledTonalButtonTokens.PressedContainerElevation,
        focusedElevation: Dp = FilledTonalButtonTokens.FocusContainerElevation,
        hoveredElevation: Dp = FilledTonalButtonTokens.HoverContainerElevation,
        disabledElevation: Dp = 0.dp,
    ): ButtonElevation

Creates a ButtonElevation that will animate between the provided values according to the Material specification for a FilledTonalButton.

Parameters
defaultElevation the elevation used when the FilledTonalButton is enabled, and has no other Interactions.
pressedElevation the elevation used when this FilledTonalButton is enabled and pressed.
focusedElevation the elevation used when the FilledTonalButton is enabled and focused.
hoveredElevation the elevation used when the FilledTonalButton is enabled and hovered.
disabledElevation the elevation used when the FilledTonalButton is not enabled.

outlinedButtonBorder

@Composable
    fun outlinedButtonBorder(enabled: Boolean = true): BorderStroke

The default BorderStroke used by OutlinedButton.

Parameters
enabled whether the button is enabled

shapesFor

@Composable
    @ExperimentalMaterial3ExpressiveApi
    fun shapesFor(buttonHeight: Dp): ButtonShapes

Recommended ButtonShapes for a provided button height.

Parameters
buttonHeight The height of the button

contentPaddingFor

fun contentPaddingFor(
        buttonHeight: Dp,
        hasStartIcon: Boolean = false,
        hasEndIcon: Boolean = false,
    ): PaddingValues

Recommended PaddingValues for a provided button height.

Parameters
buttonHeight The height of the button
hasStartIcon Whether the button has a leading icon
hasEndIcon Whether the button has a trailing icon

contentPaddingFor

@ExperimentalMaterial3ExpressiveApi
    fun contentPaddingFor(buttonHeight: Dp): PaddingValues

Recommended PaddingValues for a provided button height.

Parameters
buttonHeight The height of the button

iconSizeFor

@ExperimentalMaterial3ExpressiveApi
    fun iconSizeFor(buttonHeight: Dp): Dp

Recommended Icon size for a provided button height.

Parameters
buttonHeight The height of the button

iconSpacingFor

@ExperimentalMaterial3ExpressiveApi
    fun iconSpacingFor(buttonHeight: Dp): Dp

Recommended spacing after an Icon for a provided button height.

Parameters
buttonHeight The height of the button

textStyleFor

@Composable
    @ExperimentalMaterial3ExpressiveApi
    fun textStyleFor(buttonHeight: Dp): TextStyle

Recommended TextStyle for a Text provided a button height.

Parameters
buttonHeight The height of the button