Jetpack Compose ToggleButton in Wear Material

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

The ToggleButton is circular in shape and defaults to size ToggleButtonDefaults.DefaultToggleButtonSize or ToggleButtonDefaults.SmallToggleButtonSize. Icon content should be of size ToggleButtonDefaults.DefaultIconSize or ToggleButtonDefaults.SmallIconSize respectively.

The recommended set of checked and unchecked ToggleButtonColors can be obtained from ToggleButtonDefaults.toggleButtonColors, which defaults to checked colors being a solid background of Colors.primary with content color of Colors.onPrimary and unchecked colors being a solid background of Colors.surface with content color of Colors.onSurface.

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

Example of a ToggleButton with an icon:

Overloads

ToggleButton

@Deprecated("This overload is provided for backwards compatibility with Compose for Wear OS 1.0." +
    "A newer overload is available with an additional shape parameter.",
    level = DeprecationLevel.HIDDEN)
@Composable
public fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable BoxScope.() -> Unit,
)

Parameters

Name	Description
`checked`	Boolean flag indicating whether this toggle button is currently checked.
`onCheckedChange`	Callback to be invoked when this toggle button is clicked.
`modifier`	Modifier to be applied to the toggle button.
`enabled`	Controls the enabled state of the toggle button. When `false`, this toggle button will not be clickable.
`colors`	ToggleButtonColors that will be used to resolve the background and content color for this toggle button. See ToggleButtonDefaults.toggleButtonColors.
`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.
`content`	The icon, image or text to be drawn inside the toggle button

ToggleButton

@Deprecated("This overload is provided for backwards compatibility with Compose for Wear OS 1.1." +
    "A newer overload is available with an additional semantic role parameter.",
    level = DeprecationLevel.HIDDEN)
@Composable
public fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = CircleShape,
    content: @Composable BoxScope.() -> Unit,
)

Parameters

Name	Description
`checked`	Boolean flag indicating whether this toggle button is currently checked.
`onCheckedChange`	Callback to be invoked when this toggle button is clicked.
`modifier`	Modifier to be applied to the toggle button.
`enabled`	Controls the enabled state of the toggle button. When `false`, this toggle button will not be clickable.
`colors`	ToggleButtonColors that will be used to resolve the background and content color for this toggle button. See ToggleButtonDefaults.toggleButtonColors.
`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.
`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.
`content`	The icon, image or text to be drawn inside the toggle button

ToggleButton

@Composable
public fun ToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ToggleButtonColors = ToggleButtonDefaults.toggleButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = CircleShape,
    role: Role = ToggleButtonDefaults.DefaultRole,
    content: @Composable BoxScope.() -> Unit,
)

Parameters

Name	Description
`checked`	Boolean flag indicating whether this toggle button is currently checked.
`onCheckedChange`	Callback to be invoked when this toggle button is clicked.
`modifier`	Modifier to be applied to the toggle button.
`enabled`	Controls the enabled state of the toggle button. When `false`, this toggle button will not be clickable.
`colors`	ToggleButtonColors that will be used to resolve the background and content color for this toggle button. See ToggleButtonDefaults.toggleButtonColors.
`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.
`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.
`role`	Role semantics that accessibility services can use to provide more context to users.
`content`	The icon, image or text to be drawn inside the toggle button