Composable Function

RemoteCompactButton

A Wear Material3 RemoteCompactButton that offers two slots and a specific layout for an icon and label.

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free

RemoteCompactButton

Android
@Composable
@RemoteComposable
public fun RemoteCompactButton(
    onClick: Action,
    modifier: RemoteModifier = RemoteModifier,
    icon: (@Composable () -> Unit)? = null,
    enabled: RemoteBoolean = true.rb,
    shape: RemoteShape = RemoteButtonDefaults.compactButtonShape,
    colors: RemoteButtonColors = RemoteButtonDefaults.buttonColors(),
    border: RemoteDp? = null,
    borderColor: RemoteColor? = null,
    contentPadding: RemotePaddingValues = RemoteButtonDefaults.CompactButtonContentPadding,
    label: @Composable @RemoteComposable (RemoteRowScope.() -> Unit)?,
)

A Wear Material3 RemoteCompactButton that offers two slots and a specific layout for an icon and label. Both the icon and label are optional however it is expected that at least one will be provided.

The RemoteCompactButton is Stadium shaped and has a max height designed to take no more than one line of text and/or one icon. The default max height is ButtonDefaults.CompactButtonHeight. This includes a visible button height of 32.dp and 8.dp of padding above and below the button in order to meet accessibility guidelines that request a minimum of 48.dp height and width of tappable area.

If an icon is provided then the labels should be "start" aligned, e.g. left aligned in left-to-right mode so that the text starts next to the icon.

The items are laid out as follows.

  1. If a label is provided then the button will be laid out with the optional icon at the start of a row followed by the label with a default max height of RemoteButtonDefaults.CompactButtonHeight.
  2. If only an icon is provided it will be laid out vertically and horizontally centered with a default height of RemoteButtonDefaults.CompactButtonHeight and the default width of RemoteButtonDefaults.IconOnlyCompactButtonWidth

If neither icon nor label is provided then the button will displayed like an icon only button but with no contents or background color.

RemoteCompactButton takes the RemoteButtonDefaults.buttonColors color scheme by default, with colored background, contrasting content color and no border. This is a high-emphasis button for the primary, most important or most common action on a screen.

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

Parameters

onClick Will be called when the user clicks the button
modifier Modifier to be applied to the button
enabled Controls the enabled state of the button. When false, this button will not be clickable. It must be a constant value.
icon A slot for providing the button's icon. The contents are expected to be a horizontally and vertically aligned icon of size RemoteButtonDefaults.ExtraSmallIconSize when used with a label or RemoteButtonDefaults.SmallIconSize when used as the only content in the button.
shape Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme
colors RemoteButtonColors that will be used to resolve the background and content color for this button in different states. See RemoteButtonDefaults.buttonColors.
border Optional RemoteDp that will be used to resolve the border for this button in different states.
borderColor Optional RemoteColor that will be used to resolve the border color for this button in different states.
contentPadding The spacing values to apply internally between the container and the content
label Slot for composable body content displayed on the Button