Chip

Base level Wear Material Chip that offers a single slot to take any content.

Android
Deprecated This overload is provided for backwards compatibility with Compose for Wear OS 1.0.A newer overload is available with an additional border parameter.
@Composable
public fun Chip(
    onClick: () -> Unit,
    colors: ChipColors,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    contentPadding: PaddingValues = ChipDefaults.ContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    role: Role? = Role.Button,
    content: @Composable RowScope.() -> Unit,
): Unit

Parameters
onClick Will be called when the user clicks the chip
colors ChipColors that will be used to resolve the background and content color for this chip in different states. See ChipDefaults.chipColors.
modifier Modifier to be applied to the chip
enabled Controls the enabled state of the chip. When false, this chip will not be clickable
contentPadding The spacing values to apply internally between the container and the content
shape Defines the chip's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
interactionSource The MutableInteractionSource representing the stream of Interactions for this Chip. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Chip in different Interactions.
role The type of user interface element. Accessibility services might use this to describe the element or do customizations
Android
@Composable
public fun Chip(
    onClick: () -> Unit,
    colors: ChipColors,
    border: ChipBorder,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    contentPadding: PaddingValues = ChipDefaults.ContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    interactionSource: MutableInteractionSource? = null,
    role: Role? = Role.Button,
    content: @Composable RowScope.() -> Unit,
)

Parameters
onClick Will be called when the user clicks the chip
colors ChipColors that will be used to resolve the background and content color for this chip in different states. See ChipDefaults.chipColors.
border ChipBorder that will be used to resolve the border for this chip in different states. See ChipDefaults.chipBorder.
modifier Modifier to be applied to the chip
enabled Controls the enabled state of the chip. When false, this chip will not be clickable
contentPadding The spacing values to apply internally between the container and the content
shape Defines the chip's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
interactionSource an optional hoisted MutableInteractionSource for observing and emitting Interactions for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if null is provided, interactions will still happen internally.
role The type of user interface element. Accessibility services might use this to describe the element or do customizations
content Slot for composable body content displayed on the Chip
Android
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.
@Composable
public fun Chip(
    label: @Composable RowScope.() -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    colors: ChipColors = ChipDefaults.primaryChipColors(),
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    contentPadding: PaddingValues = ChipDefaults.ContentPadding,
): Unit

Parameters
label A slot for providing the chip's main 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.
onClick Will be called when the user clicks the chip
modifier Modifier to be applied to the chip
secondaryLabel A slot for providing the chip'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.
icon A slot for providing the chip's icon. The contents are expected to be a horizontally and vertically aligned icon of size ChipDefaults.IconSize or ChipDefaults.LargeIconSize. In order to correctly render when the Chip is not enabled the icon must set its alpha value to LocalContentAlpha.
colors ChipColors that will be used to resolve the background and content color for this chip in different states. See ChipDefaults.chipColors. Defaults to ChipDefaults.primaryChipColors
enabled Controls the enabled state of the chip. When false, this chip will not be clickable
interactionSource The MutableInteractionSource representing the stream of Interactions for this Chip. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Chip in different Interactions.
contentPadding The spacing values to apply internally between the container and the content
Android
@Composable
public fun Chip(
    label: @Composable RowScope.() -> Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    colors: ChipColors = ChipDefaults.primaryChipColors(),
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    contentPadding: PaddingValues = ChipDefaults.ContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    border: ChipBorder = ChipDefaults.chipBorder(),
)

Parameters
label A slot for providing the chip's main 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.
onClick Will be called when the user clicks the chip
modifier Modifier to be applied to the chip
secondaryLabel A slot for providing the chip'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.
icon A slot for providing the chip's icon. The contents are expected to be a horizontally and vertically aligned icon of size ChipDefaults.IconSize or ChipDefaults.LargeIconSize. In order to correctly render when the Chip is not enabled the icon must set its alpha value to LocalContentAlpha.
colors ChipColors that will be used to resolve the background and content color for this chip in different states. See ChipDefaults.chipColors. Defaults to ChipDefaults.primaryChipColors
enabled Controls the enabled state of the chip. When false, this chip will not be clickable
interactionSource an optional hoisted MutableInteractionSource for observing and emitting Interactions for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if null is provided, interactions will still happen internally.
contentPadding The spacing values to apply internally between the container and the content
shape Defines the chip's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
border ChipBorder that will be used to resolve the chip border in different states. See ChipDefaults.chipBorder.

Code Examples

ChipWithIconAndLabel

@Composable
fun ChipWithIconAndLabel() {
    Chip(
        onClick = { /* Do something */ },
        enabled = true,
        // Primary label can have up to 3 lines of text
        label = {
            Text(
                text = "Main label can span up to 3 lines",
                maxLines = 3,
                overflow = TextOverflow.Ellipsis,
            )
        },
        icon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier =
                    Modifier.size(ChipDefaults.IconSize).wrapContentSize(align = Alignment.Center),
            )
        },
    )
}

ChipWithIconAndLabels

@Composable
fun ChipWithIconAndLabels() {
    Chip(
        onClick = { /* Do something */ },
        enabled = true,
        // Primary label has maximum 3 lines, Secondary label has maximum 2 lines.
        label = { Text(text = "Main label", maxLines = 3, overflow = TextOverflow.Ellipsis) },
        secondaryLabel = {
            Text(text = "secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
        },
        icon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier =
                    Modifier.size(ChipDefaults.IconSize).wrapContentSize(align = Alignment.Center),
            )
        },
    )
}
View all →
View all →