Compose Component

CompactChip

A compact Wear Material Chip that offers two slots and a specific layout for an icon and label.

CompactChipWithIconAndLabel

@Sampled
@Composable
fun CompactChipWithIconAndLabel() {
    CompactChip(
        onClick = { /* Do something */ },
        enabled = true,
        // CompactChip label should be no more than 1 line of text
        label = { Text("Single line label", maxLines = 1, overflow = TextOverflow.Ellipsis) },
        icon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier = Modifier.size(ChipDefaults.SmallIconSize),
            )
        },
    )
}

CompactChipWithLabel

@Sampled
@Composable
fun CompactChipWithLabel() {
    CompactChip(
        onClick = { /* Do something */ },
        enabled = true,
        // CompactChip label should be no more than 1 line of text
        label = {
            Text(
                text = "Single line label",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth(),
            )
        },
    )
}

CompactChipWithIcon

@Sampled
@Composable
fun CompactChipWithIcon() {
    CompactChip(
        onClick = { /* Do something */ },
        enabled = true,
        icon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier = Modifier.size(ChipDefaults.IconSize),
            )
        },
    )
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: