Composable Component

Chip

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

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),
            )
        },
    )
}