<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
object SplitButtonDefaults
```

Contains default values used by [SplitButtonLayout](/jetpack-compose/androidx.compose.material3/material3/components/SplitButtonLayout) and its style variants.

## Properties

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val LeadingIconSize = ButtonSmallTokens.IconSize
```

Default icon size for the leading button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val TrailingIconSize = SplitButtonSmallTokens.TrailingIconSize
```

Default icon size for the trailing button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val Spacing = SplitButtonSmallTokens.BetweenSpace
```

Default spacing between the `leading` and `trailing` button

<div class='sourceset sourceset-common'>Common</div>

> **Deprecated** Use `SmallInnerCornerSize` instead

```kotlin
val InnerCornerSize = SplitButtonSmallTokens.InnerCornerCornerSize
```

Default size for the leading button end corners and trailing button start corners

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val ExtraSmallInnerCornerSize = SplitButtonXSmallTokens.InnerCornerCornerSize
```

Default extra small size for the leading button end corners and trailing button start corners

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val SmallInnerCornerSize = SplitButtonSmallTokens.InnerCornerCornerSize
```

Default small size for the leading button end corners and trailing button start corners

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val MediumInnerCornerSize = SplitButtonMediumTokens.InnerCornerCornerSize
```

Default medium size for the leading button end corners and trailing button start corners

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val LargeInnerCornerSize = SplitButtonLargeTokens.InnerCornerCornerSize
```

Default large size for the leading button end corners and trailing button start corners

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val ExtraLargeInnerCornerSize = SplitButtonXLargeTokens.InnerCornerCornerSize
```

Default extra large size for the leading button end corners and trailing button start corners

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val ExtraSmallInnerCornerSizePressed = SplitButtonXSmallTokens.InnerPressedCornerCornerSize
```

Default extra small size for the leading button end corners and trailing button start corners
when pressed

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val SmallInnerCornerSizePressed = SplitButtonSmallTokens.InnerPressedCornerCornerSize
```

Default small size for the leading button end corners and trailing button start corners when
pressed

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val MediumInnerCornerSizePressed = SplitButtonMediumTokens.InnerPressedCornerCornerSize
```

Default medium size for the leading button end corners and trailing button start corners when
pressed

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val LargeInnerCornerSizePressed = SplitButtonLargeTokens.InnerPressedCornerCornerSize
```

Default large size for the leading button end corners and trailing button start corners when
pressed

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val ExtraLargeInnerCornerSizePressed = SplitButtonXLargeTokens.InnerPressedCornerCornerSize
```

Default extra large size for the leading button end corners and trailing button start corners
when pressed

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val OuterCornerSize = ShapeDefaults.CornerFull
```

Default percentage size for the leading button start corners and trailing button end corners

<div class='sourceset sourceset-common'>Common</div>

> **Deprecated** Use `leadingButtonContentPaddingFor(buttonHeight)` instead

```kotlin
val LeadingButtonContentPadding =
    PaddingValues(
        start = SplitButtonSmallTokens.LeadingButtonLeadingSpace,
        end = SplitButtonSmallTokens.LeadingButtonTrailingSpace,
    )
```

Default content padding of the leading button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val ExtraSmallLeadingButtonContentPadding =
    PaddingValues(
        start = SplitButtonXSmallTokens.LeadingButtonLeadingSpace,
        end = SplitButtonXSmallTokens.LeadingButtonTrailingSpace,
    )
```

Default content padding of the extra small leading button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val SmallLeadingButtonContentPadding =
    PaddingValues(
        start = SplitButtonSmallTokens.LeadingButtonLeadingSpace,
        end = SplitButtonSmallTokens.LeadingButtonTrailingSpace,
    )
```

Default content padding of the small leading button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val MediumLeadingButtonContentPadding =
    PaddingValues(
        start = SplitButtonMediumTokens.LeadingButtonLeadingSpace,
        end = SplitButtonMediumTokens.LeadingButtonTrailingSpace,
    )
```

Default content padding of the medium leading button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val LargeLeadingButtonContentPadding =
    PaddingValues(
        start = SplitButtonLargeTokens.LeadingButtonLeadingSpace,
        end = SplitButtonLargeTokens.LeadingButtonTrailingSpace,
    )
```

Default content padding of the large leading button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val ExtraLargeLeadingButtonContentPadding =
    PaddingValues(
        start = SplitButtonXLargeTokens.LeadingButtonLeadingSpace,
        end = SplitButtonXLargeTokens.LeadingButtonTrailingSpace,
    )
```

Default content padding of the extra large leading button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val ExtraSmallTrailingButtonContentPadding =
    PaddingValues(
        start = SplitButtonXSmallTokens.TrailingButtonLeadingSpace,
        end = SplitButtonXSmallTokens.TrailingButtonTrailingSpace,
    )
```

Default content padding of the extra small trailing button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val SmallTrailingButtonContentPadding =
    PaddingValues(
        start = SplitButtonSmallTokens.TrailingButtonLeadingSpace,
        end = SplitButtonSmallTokens.TrailingButtonTrailingSpace,
    )
```

Default content padding of the small trailing button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val MediumTrailingButtonContentPadding =
    PaddingValues(
        start = SplitButtonMediumTokens.TrailingButtonLeadingSpace,
        end = SplitButtonMediumTokens.TrailingButtonTrailingSpace,
    )
```

Default content padding of the medium trailing button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val LargeTrailingButtonContentPadding =
    PaddingValues(
        start = SplitButtonLargeTokens.TrailingButtonLeadingSpace,
        end = SplitButtonLargeTokens.TrailingButtonTrailingSpace,
    )
```

Default content padding of the large trailing button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val ExtraLargeTrailingButtonContentPadding =
    PaddingValues(
        start = SplitButtonXLargeTokens.TrailingButtonLeadingSpace,
        end = SplitButtonXLargeTokens.TrailingButtonTrailingSpace,
    )
```

Default content padding of the extra large trailing button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val ExtraSmallTrailingButtonIconSize = SplitButtonXSmallTokens.TrailingIconSize
```

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

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val SmallTrailingButtonIconSize = SplitButtonSmallTokens.TrailingIconSize
```

The default size of the icon used inside of an small trailing button of a split button.

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val MediumTrailingButtonIconSize = SplitButtonMediumTokens.TrailingIconSize
```

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

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val LargeTrailingButtonIconSize = SplitButtonLargeTokens.TrailingIconSize
```

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

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val ExtraLargeTrailingButtonIconSize = SplitButtonXLargeTokens.TrailingIconSize
```

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

<div class='sourceset sourceset-common'>Common</div>

> **Deprecated** Use `SmallTrailingButtonContentPadding` instead

```kotlin
val TrailingButtonContentPadding =
    PaddingValues(
        start = SplitButtonSmallTokens.TrailingButtonLeadingSpace,
        end = SplitButtonSmallTokens.TrailingButtonTrailingSpace,
    )
```

Default content padding of the small trailing button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
val SmallContainerHeight = SplitButtonSmallTokens.ContainerHeight
```

Default minimum height of the split button. This applies to both `LeadingButton` and
`TrailingButton`. Applies to all 4 variants of the split button

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val ExtraSmallContainerHeight = SplitButtonXSmallTokens.ContainerHeight
```

The default height for an extra small button container.

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val MediumContainerHeight = SplitButtonMediumTokens.ContainerHeight
```

The default height for a medium button container.

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val LargeContainerHeight = SplitButtonLargeTokens.ContainerHeight
```

The default height for a large button container.

<div class='sourceset sourceset-common'>Common</div>

```kotlin
@ExperimentalMaterial3ExpressiveApi
val ExtraLargeContainerHeight = SplitButtonXLargeTokens.ContainerHeight
```

The default height for an extra large button container.

## Functions

<h2 id="leadingbuttonshapes-endcornersize">leadingButtonShapes</h2>

```kotlin
fun leadingButtonShapes(endCornerSize: CornerSize = SmallInnerCornerSize) =
        SplitButtonShapes(
            shape = leadingButtonShape(endCornerSize),
            pressedShape =
                RoundedCornerShape(
                    topStart = OuterCornerSize,
                    bottomStart = OuterCornerSize,
                    topEnd = SmallInnerCornerSizePressed,
                    bottomEnd = SmallInnerCornerSizePressed,
                ),
            checkedShape = null,
        )
```

Default shapes for the leading button. This defines the shapes the leading button should
morph to when enabled, pressed etc.

#### Parameters

| | |
| --- | --- |
| endCornerSize | the size for top end corner and bottom end corner |

<hr class="docs-overload-divider">

<h2 id="trailingbuttonshapes-startcornersize">trailingButtonShapes</h2>

```kotlin
fun trailingButtonShapes(startCornerSize: CornerSize = SmallInnerCornerSize) =
        SplitButtonShapes(
            shape = trailingButtonShape(startCornerSize),
            pressedShape =
                RoundedCornerShape(
                    topStart = SmallInnerCornerSizePressed,
                    bottomStart = SmallInnerCornerSizePressed,
                    topEnd = OuterCornerSize,
                    bottomEnd = OuterCornerSize,
                ),
            checkedShape = TrailingCheckedShape,
        )
```

Default shapes for the trailing button

#### Parameters

| | |
| --- | --- |
| startCornerSize | the size for top start corner and bottom start corner |

<hr class="docs-overload-divider">

<h2 id="leadingbuttonshapesfor-buttonheight">leadingButtonShapesFor</h2>

```kotlin
@Composable
    @ExperimentalMaterial3ExpressiveApi
    fun leadingButtonShapesFor(buttonHeight: Dp): SplitButtonShapes
```

Recommended leading button [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) for a provided leading button height.

#### Parameters

| | |
| --- | --- |
| buttonHeight | The height of the button |

<hr class="docs-overload-divider">

<h2 id="trailingbuttonshapesfor-buttonheight">trailingButtonShapesFor</h2>

```kotlin
@Composable
    @ExperimentalMaterial3ExpressiveApi
    fun trailingButtonShapesFor(buttonHeight: Dp): SplitButtonShapes
```

Recommended trailing button [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) for a provided trailing button height.

#### Parameters

| | |
| --- | --- |
| buttonHeight | The height of the button |

<hr class="docs-overload-divider">

<h2 id="leadingbuttoncontentpaddingfor-buttonheight">leadingButtonContentPaddingFor</h2>

```kotlin
fun leadingButtonContentPaddingFor(buttonHeight: Dp): PaddingValues
```

Recommended [PaddingValues](/jetpack-compose/androidx.compose.foundation/foundation-layout/interfaces/PaddingValues) for a provided leading button height.

#### Parameters

| | |
| --- | --- |
| buttonHeight | The height of the button |

<hr class="docs-overload-divider">

<h2 id="trailingbuttoncontentpaddingfor-buttonheight">trailingButtonContentPaddingFor</h2>

```kotlin
fun trailingButtonContentPaddingFor(buttonHeight: Dp): PaddingValues
```

Recommended [PaddingValues](/jetpack-compose/androidx.compose.foundation/foundation-layout/interfaces/PaddingValues) for a provided trailing button height.

#### Parameters

| | |
| --- | --- |
| buttonHeight | The height of the button |

<hr class="docs-overload-divider">

<h2 id="leadingbuttoniconsizefor-buttonheight">leadingButtonIconSizeFor</h2>

```kotlin
fun leadingButtonIconSizeFor(buttonHeight: Dp): Dp
```

Recommended leading button Icon size for a provided button height.

#### Parameters

| | |
| --- | --- |
| buttonHeight | The height of the button |

<hr class="docs-overload-divider">

<h2 id="trailingbuttoniconsizefor-buttonheight">trailingButtonIconSizeFor</h2>

```kotlin
fun trailingButtonIconSizeFor(buttonHeight: Dp): Dp
```

Recommended trailing button Icon size for a provided button height.

#### Parameters

| | |
| --- | --- |
| buttonHeight | The height of the button |

<hr class="docs-overload-divider">

<h2 id="leadingbutton-onclick-modifier-enabled-shapes-colors-elevation-border-contentpadding-interactionsource-content">LeadingButton</h2>

```kotlin
@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun LeadingButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        shapes: SplitButtonShapes = leadingButtonShapesFor(SmallContainerHeight),
        colors: ButtonColors = ButtonDefaults.buttonColors(),
        elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
        border: BorderStroke? = null,
        contentPadding: PaddingValues = leadingButtonContentPaddingFor(SmallContainerHeight),
        interactionSource: MutableInteractionSource? = null,
        content: @Composable RowScope.() -> Unit,
    )
```

Create a default `leading` button that has the same visual as a Filled[Button](/jetpack-compose/androidx.compose.material3/material3/components/Button). To create a
`tonal`, `outlined`, or `elevated` version, the default value of [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button) params can be
passed in. For example, [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton).

The default text style for internal [Text](/jetpack-compose/androidx.compose.material3/material3/components/Text) components will be set to [Typography.labelLarge](/jetpack-compose/androidx.compose.material3/material3/classes/Typography).

#### Parameters

| | |
| --- | --- |
| onClick | called when the button is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of the split button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| shapes | the [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) that the trailing button will morph between depending on the user's interaction with the button. |
| colors | [ButtonColors](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonColors) that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors](/jetpack-compose/androidx.compose.material3/material3/objects/ButtonDefaults). |
| elevation | [ButtonElevation](/jetpack-compose/androidx.compose.material3/material3/classes/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](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonElevation). |
| border | the border to draw around the container of this button contentPadding the spacing values to apply internally between the container and the content |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the content for the button. |

<hr class="docs-overload-divider">

<h2 id="trailingbutton-onclick-modifier-enabled-shapes-colors-elevation-border-contentpadding-interactionsource-content">TrailingButton</h2>

```kotlin
@Composable
    @ExperimentalMaterial3ExpressiveApi
    fun TrailingButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        shapes: SplitButtonShapes = trailingButtonShapesFor(SmallContainerHeight),
        colors: ButtonColors = ButtonDefaults.buttonColors(),
        elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
        border: BorderStroke? = null,
        contentPadding: PaddingValues = trailingButtonContentPaddingFor(SmallContainerHeight),
        interactionSource: MutableInteractionSource? = null,
        content: @Composable RowScope.() -> Unit,
    )
```

Creates a `trailing` button that has the same visual as a [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button).

To create a `tonal`, `outlined`, or `elevated` version, the default value of [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button) params
can be passed in. For example, [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton).

The default text style for internal [Text](/jetpack-compose/androidx.compose.material3/material3/components/Text) components will be set to [Typography.labelLarge](/jetpack-compose/androidx.compose.material3/material3/classes/Typography).

#### Parameters

| | |
| --- | --- |
| onClick | called when the button is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of the split button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| shapes | the [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) that the trailing button will morph between depending on the user's interaction with the button. |
| colors | [ButtonColors](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonColors) that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors](/jetpack-compose/androidx.compose.material3/material3/objects/ButtonDefaults). |
| elevation | [ButtonElevation](/jetpack-compose/androidx.compose.material3/material3/classes/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](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonElevation). |
| border | the border to draw around the container of this button contentPadding the spacing values to apply internally between the container and the content |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the content to be placed in the button |

<hr class="docs-overload-divider">

<h2 id="trailingbutton-checked-oncheckedchange-modifier-enabled-shapes-colors-elevation-border-contentpadding-interactionsource-content">TrailingButton</h2>

```kotlin
@Composable
    @ExperimentalMaterial3ExpressiveApi
    fun TrailingButton(
        checked: Boolean,
        onCheckedChange: (Boolean) -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        shapes: SplitButtonShapes = trailingButtonShapesFor(SmallContainerHeight),
        colors: ButtonColors = ButtonDefaults.buttonColors(),
        elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
        border: BorderStroke? = null,
        contentPadding: PaddingValues = trailingButtonContentPaddingFor(SmallContainerHeight),
        interactionSource: MutableInteractionSource? = null,
        content: @Composable RowScope.() -> Unit,
    )
```

Creates a `trailing` button that has the same visual as a [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button). When [checked](/jetpack-compose/androidx.compose.foundation/foundation/functions/checked) is updated
from `false` to `true`, the buttons corners will morph to `full` by default. Pressed shape
and checked shape can be customized via [shapes](/jetpack-compose/androidx.compose.material3/material3/classes/Shapes) param.

To create a `tonal`, `outlined`, or `elevated` version, the default value of [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button) params
can be passed in. For example, [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton).

The default text style for internal [Text](/jetpack-compose/androidx.compose.material3/material3/components/Text) components will be set to [Typography.labelLarge](/jetpack-compose/androidx.compose.material3/material3/classes/Typography).

#### Parameters

| | |
| --- | --- |
| checked | indicates whether the button is checked. This will trigger the corner morphing animation to reflect the updated state. |
| onCheckedChange | called when the button is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of the split button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| shapes | the [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) that the trailing button will morph between depending on the user's interaction with the button. |
| colors | [ButtonColors](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonColors) that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors](/jetpack-compose/androidx.compose.material3/material3/objects/ButtonDefaults). |
| elevation | [ButtonElevation](/jetpack-compose/androidx.compose.material3/material3/classes/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](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonElevation). |
| border | the border to draw around the container of this button contentPadding the spacing values to apply internally between the container and the content |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the content to be placed in the button |

<hr class="docs-overload-divider">

<h2 id="tonalleadingbutton-onclick-modifier-enabled-shapes-colors-elevation-border-contentpadding-interactionsource-content">TonalLeadingButton</h2>

```kotlin
@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun TonalLeadingButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        shapes: SplitButtonShapes = leadingButtonShapesFor(SmallContainerHeight),
        colors: ButtonColors = ButtonDefaults.filledTonalButtonColors(),
        elevation: ButtonElevation? = ButtonDefaults.filledTonalButtonElevation(),
        border: BorderStroke? = null,
        contentPadding: PaddingValues = leadingButtonContentPaddingFor(SmallContainerHeight),
        interactionSource: MutableInteractionSource? = null,
        content: @Composable RowScope.() -> Unit,
    )
```

Create a tonal `leading` button that has the same visual as a Tonal[Button](/jetpack-compose/androidx.compose.material3/material3/components/Button). To create a
`filled`, `outlined`, or `elevated` version, the default value of [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button) params can be
passed in. For example, [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton).

The default text style for internal [Text](/jetpack-compose/androidx.compose.material3/material3/components/Text) components will be set to [Typography.labelLarge](/jetpack-compose/androidx.compose.material3/material3/classes/Typography).

#### Parameters

| | |
| --- | --- |
| onClick | called when the button is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of the split button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| shapes | the [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) that the trailing button will morph between depending on the user's interaction with the button. |
| colors | [ButtonColors](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonColors) that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors](/jetpack-compose/androidx.compose.material3/material3/objects/ButtonDefaults). |
| elevation | [ButtonElevation](/jetpack-compose/androidx.compose.material3/material3/classes/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](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonElevation). |
| border | the border to draw around the container of this button contentPadding the spacing values to apply internally between the container and the content |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the content for the button. |

<hr class="docs-overload-divider">

<h2 id="tonaltrailingbutton-checked-oncheckedchange-modifier-enabled-shapes-colors-elevation-border-contentpadding-interactionsource-content">TonalTrailingButton</h2>

```kotlin
@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun TonalTrailingButton(
        checked: Boolean,
        onCheckedChange: (Boolean) -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        shapes: SplitButtonShapes = trailingButtonShapesFor(SmallContainerHeight),
        colors: ButtonColors = ButtonDefaults.filledTonalButtonColors(),
        elevation: ButtonElevation? = ButtonDefaults.filledTonalButtonElevation(),
        border: BorderStroke? = null,
        contentPadding: PaddingValues = trailingButtonContentPaddingFor(SmallContainerHeight),
        interactionSource: MutableInteractionSource? = null,
        content: @Composable RowScope.() -> Unit,
    )
```

Creates a tonal `trailing` button that has the same visual as a [FilledTonalButton](/jetpack-compose/androidx.compose.material3/material3/components/FilledTonalButton). When
[checked](/jetpack-compose/androidx.compose.foundation/foundation/functions/checked) is updated from `false` to `true`, the buttons corners will morph to `full` by
default. Pressed shape and checked shape can be customized via [shapes](/jetpack-compose/androidx.compose.material3/material3/classes/Shapes) param.

To create a `tonal`, `outlined`, or `elevated` version, the default value of [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button) params
can be passed in. For example, [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton).

The default text style for internal [Text](/jetpack-compose/androidx.compose.material3/material3/components/Text) components will be set to [Typography.labelLarge](/jetpack-compose/androidx.compose.material3/material3/classes/Typography).

#### Parameters

| | |
| --- | --- |
| checked | indicates whether the button is checked. This will trigger the corner morphing animation to reflect the updated state. |
| onCheckedChange | called when the button is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of the split button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| shapes | the [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) that the trailing button will morph between depending on the user's interaction with the button. |
| colors | [ButtonColors](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonColors) that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors](/jetpack-compose/androidx.compose.material3/material3/objects/ButtonDefaults). |
| elevation | [ButtonElevation](/jetpack-compose/androidx.compose.material3/material3/classes/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](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonElevation). |
| border | the border to draw around the container of this button contentPadding the spacing values to apply internally between the container and the content |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the content to be placed in the button |

<hr class="docs-overload-divider">

<h2 id="outlinedleadingbutton-onclick-modifier-enabled-shapes-colors-elevation-border-contentpadding-interactionsource-content">OutlinedLeadingButton</h2>

```kotlin
@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun OutlinedLeadingButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        shapes: SplitButtonShapes = leadingButtonShapesFor(SmallContainerHeight),
        colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
        elevation: ButtonElevation? = null,
        border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled),
        contentPadding: PaddingValues = leadingButtonContentPaddingFor(SmallContainerHeight),
        interactionSource: MutableInteractionSource? = null,
        content: @Composable RowScope.() -> Unit,
    )
```

Create a elevated `leading` button that has the same visual as a [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton). To create
a `filled`, `outlined`, or `elevated` version, the default value of [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button) params can be
passed in. For example, [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton).

The default text style for internal [Text](/jetpack-compose/androidx.compose.material3/material3/components/Text) components will be set to [Typography.labelLarge](/jetpack-compose/androidx.compose.material3/material3/classes/Typography).

#### Parameters

| | |
| --- | --- |
| onClick | called when the button is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of the split button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| shapes | the [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) that the trailing button will morph between depending on the user's interaction with the button. |
| colors | [ButtonColors](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonColors) that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors](/jetpack-compose/androidx.compose.material3/material3/objects/ButtonDefaults). |
| elevation | [ButtonElevation](/jetpack-compose/androidx.compose.material3/material3/classes/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](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonElevation). |
| border | the border to draw around the container of this button contentPadding the spacing values to apply internally between the container and the content |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the content for the button. |

<hr class="docs-overload-divider">

<h2 id="outlinedtrailingbutton-checked-oncheckedchange-modifier-enabled-shapes-colors-elevation-border-contentpadding-interactionsource-content">OutlinedTrailingButton</h2>

```kotlin
@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun OutlinedTrailingButton(
        checked: Boolean,
        onCheckedChange: (Boolean) -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        shapes: SplitButtonShapes = trailingButtonShapesFor(SmallContainerHeight),
        colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
        elevation: ButtonElevation? = null,
        border: BorderStroke? = ButtonDefaults.outlinedButtonBorder(enabled),
        contentPadding: PaddingValues = trailingButtonContentPaddingFor(SmallContainerHeight),
        interactionSource: MutableInteractionSource? = null,
        content: @Composable RowScope.() -> Unit,
    )
```

Creates a outlined `trailing` button that has the same visual as a [OutlinedButton](/jetpack-compose/androidx.compose.material3/material3/components/OutlinedButton). When
[checked](/jetpack-compose/androidx.compose.foundation/foundation/functions/checked) is updated from `false` to `true`, the buttons corners will morph to `full` by
default. Pressed shape and checked shape can be customized via [shapes](/jetpack-compose/androidx.compose.material3/material3/classes/Shapes) param.

To create a `tonal`, `outlined`, or `elevated` version, the default value of [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button) params
can be passed in. For example, [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton).

The default text style for internal [Text](/jetpack-compose/androidx.compose.material3/material3/components/Text) components will be set to [Typography.labelLarge](/jetpack-compose/androidx.compose.material3/material3/classes/Typography).

#### Parameters

| | |
| --- | --- |
| checked | indicates whether the button is checked. This will trigger the corner morphing animation to reflect the updated state. |
| onCheckedChange | called when the button is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of the split button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| shapes | the [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) that the trailing button will morph between depending on the user's interaction with the button. |
| colors | [ButtonColors](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonColors) that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors](/jetpack-compose/androidx.compose.material3/material3/objects/ButtonDefaults). |
| elevation | [ButtonElevation](/jetpack-compose/androidx.compose.material3/material3/classes/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](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonElevation). |
| border | the border to draw around the container of this button contentPadding the spacing values to apply internally between the container and the content |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the content to be placed in the button |

<hr class="docs-overload-divider">

<h2 id="elevatedleadingbutton-onclick-modifier-enabled-shapes-colors-elevation-border-contentpadding-interactionsource-content">ElevatedLeadingButton</h2>

```kotlin
@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun ElevatedLeadingButton(
        onClick: () -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        shapes: SplitButtonShapes = leadingButtonShapesFor(SmallContainerHeight),
        colors: ButtonColors = ButtonDefaults.elevatedButtonColors(),
        elevation: ButtonElevation? = ButtonDefaults.elevatedButtonElevation(),
        border: BorderStroke? = null,
        contentPadding: PaddingValues = leadingButtonContentPaddingFor(SmallContainerHeight),
        interactionSource: MutableInteractionSource? = null,
        content: @Composable RowScope.() -> Unit,
    )
```

Create a elevated `leading` button that has the same visual as a [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton). To create
a `filled`, `outlined`, or `elevated` version, the default value of [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button) params can be
passed in. For example, [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton).

The default text style for internal [Text](/jetpack-compose/androidx.compose.material3/material3/components/Text) components will be set to [Typography.labelLarge](/jetpack-compose/androidx.compose.material3/material3/classes/Typography).

#### Parameters

| | |
| --- | --- |
| onClick | called when the button is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of the split button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| shapes | the [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) that the trailing button will morph between depending on the user's interaction with the button. |
| colors | [ButtonColors](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonColors) that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors](/jetpack-compose/androidx.compose.material3/material3/objects/ButtonDefaults). |
| elevation | [ButtonElevation](/jetpack-compose/androidx.compose.material3/material3/classes/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](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonElevation). |
| border | the border to draw around the container of this button contentPadding the spacing values to apply internally between the container and the content |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the content for the button. |

<hr class="docs-overload-divider">

<h2 id="elevatedtrailingbutton-checked-oncheckedchange-modifier-enabled-shapes-colors-elevation-border-contentpadding-interactionsource-content">ElevatedTrailingButton</h2>

```kotlin
@ExperimentalMaterial3ExpressiveApi
    @Composable
    fun ElevatedTrailingButton(
        checked: Boolean,
        onCheckedChange: (Boolean) -> Unit,
        modifier: Modifier = Modifier,
        enabled: Boolean = true,
        shapes: SplitButtonShapes = trailingButtonShapesFor(SmallContainerHeight),
        colors: ButtonColors = ButtonDefaults.elevatedButtonColors(),
        elevation: ButtonElevation? = ButtonDefaults.elevatedButtonElevation(),
        border: BorderStroke? = null,
        contentPadding: PaddingValues = trailingButtonContentPaddingFor(SmallContainerHeight),
        interactionSource: MutableInteractionSource? = null,
        content: @Composable RowScope.() -> Unit,
    )
```

Creates a elevated `trailing` button that has the same visual as a [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton). When
[checked](/jetpack-compose/androidx.compose.foundation/foundation/functions/checked) is updated from `false` to `true`, the buttons corners will morph to `full` by
default. Pressed shape and checked shape can be customized via [shapes](/jetpack-compose/androidx.compose.material3/material3/classes/Shapes) param.

To create a `tonal`, `outlined`, or `elevated` version, the default value of [Button](/jetpack-compose/androidx.compose.material3/material3/components/Button) params
can be passed in. For example, [ElevatedButton](/jetpack-compose/androidx.compose.material3/material3/components/ElevatedButton).

The default text style for internal [Text](/jetpack-compose/androidx.compose.material3/material3/components/Text) components will be set to [Typography.labelLarge](/jetpack-compose/androidx.compose.material3/material3/classes/Typography).

#### Parameters

| | |
| --- | --- |
| checked | indicates whether the button is checked. This will trigger the corner morphing animation to reflect the updated state. |
| onCheckedChange | called when the button is clicked |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this button. |
| enabled | controls the enabled state of the split button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| shapes | the [SplitButtonShapes](/jetpack-compose/androidx.compose.material3/material3/classes/SplitButtonShapes) that the trailing button will morph between depending on the user's interaction with the button. |
| colors | [ButtonColors](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonColors) that will be used to resolve the colors for this button in different states. See [ButtonDefaults.buttonColors](/jetpack-compose/androidx.compose.material3/material3/objects/ButtonDefaults). |
| elevation | [ButtonElevation](/jetpack-compose/androidx.compose.material3/material3/classes/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](/jetpack-compose/androidx.compose.material3/material3/classes/ButtonElevation). |
| border | the border to draw around the container of this button contentPadding the spacing values to apply internally between the container and the content |
| contentPadding | the spacing values to apply internally between the container and the content |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting [Interaction](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/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 | the content to be placed in the button |