State of Compose 2023 results are in! Click here to learn more

← Back to Wear Material Core

ToggleButton

Component
in
Wear Material Core
. Since 1.3.0-alpha02

Overview

Code Examples

Video

Wear Material ToggleButton that offers a single slot to take any content (text, icon or image).

ToggleButtons can be enabled or disabled. A disabled toggle button will not respond to click events.

For more information, see the Buttons(https://developer.android.com/training/wearables/components/buttons#toggle-button) guide.

@param checked Boolean flag indicating whether this toggle button is currently checked. @param onCheckedChange Callback to be invoked when this toggle button is clicked. @param modifier Modifier to be applied to the toggle button. @param enabled Controls the enabled state of the toggle button. When false, this toggle button will not be clickable. @param backgroundColor Resolves the background for this toggle button in different states. @param border Resolves the border for this toggle button in different states. @param toggleButtonSize The default size of the toggle button unless overridden by Modifier.size. @param interactionSource The MutableInteractionSource representing the stream of Interactions for this toggle button. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this ToggleButton in different Interactions. @param shape Defines the shape for this toggle button. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme. @param content The icon, image or text to be drawn inside the toggle button.

Overloads

ToggleButton

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
@Composable
fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    backgroundColor: @Composable (enabled: Boolean, checked: Boolean) -> State<Color>,
    border: @Composable (enabled: Boolean, checked: Boolean) -> State<BorderStroke?>?,
    toggleButtonSize: Dp,
    interactionSource: MutableInteractionSource,
    shape: Shape,
    content: @Composable BoxScope.() -> Unit,
)

Parameters

NameDescription
checkedBoolean flag indicating whether this toggle button is currently checked.
onCheckedChangeCallback to be invoked when this toggle button is clicked.
modifierModifier to be applied to the toggle button.
enabledControls the enabled state of the toggle button. When false, this toggle button will not be clickable.
backgroundColorResolves the background for this toggle button in different states.
borderResolves the border for this toggle button in different states.
toggleButtonSizeThe default size of the toggle button unless overridden by Modifier.size.
interactionSourceThe MutableInteractionSource representing the stream of Interactions for this toggle button. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this ToggleButton in different Interactions.
shapeDefines the shape for this toggle button. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme.
contentThe icon, image or text to be drawn inside the toggle button

ToggleButton

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
@Composable
fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    label: @Composable RowScope.() -> Unit,
    selectionControl: @Composable () -> Unit,
    modifier: Modifier,
    icon: @Composable (BoxScope.() -> Unit)?,
    secondaryLabel: @Composable (RowScope.() -> Unit)?,
    background: @Composable (enabled: Boolean, checked: Boolean) -> Modifier,
    enabled: Boolean,
    interactionSource: MutableInteractionSource,
    contentPadding: PaddingValues,
    shape: Shape,
    selectionControlWidth: Dp,
    selectionControlHeight: Dp
)

Parameters

NameDescription
checkedBoolean flag indicating whether this button is currently checked.
onCheckedChangeCallback to be invoked when this buttons checked/selected status is
labelA slot for providing the ToggleButton's main label. The contents are expected to be text which is "start" aligned.
selectionControlA slot for providing the ToggleButton's selection controls(s). Three built-in types of selection control are supported.
modifierModifier to be applied to the ToggleButton. Pass Modifier.height(height) or Modifier.defaultMinSize(minHeight = minHeight) to set a fixed height or a minimum height for the button respectively.
iconAn optional slot for providing an icon to indicate the purpose of the ToggleButton.
secondaryLabelA slot for providing the ToggleButton's secondary label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned.
backgroundComposable lambda to set the background of the toggle button. This expects to return Modifier.paint or Modifier.background for the background treatment.
enabledControls the enabled state of the ToggleButton. When false, this ToggleButton will not be clickable
interactionSourceThe MutableInteractionSource representing the stream of Interactions for this ToggleButton's "toggleable" tap area. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this ToggleButton in different Interactions.
contentPaddingThe spacing values to apply internally between the container and the content
shapeDefines the ToggleButton's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
selectionControlWidthWidth for the selection control.
selectionControlHeightHeight for the selection control