Jetpack Compose Tag Chip

May 6, 2022

Jetpack Compose Material

1.2.0 introduced Chip composable

Chip(
    modifier = Modifier.padding(2.dp),
    onClick = {  },
    leadingIcon = {
        Icon(Icons.Filled.Star, tint = Color.Yellow, contentDescription = "Cover")
    }
) {
    Text("Star")
}

Custom

@Composable
fun Chip(modifier: Modifier = Modifier, text: String, maxLines: Int = 1, maxWidth: Dp = 100.dp) {
    Surface(
        modifier = modifier,
        elevation = 8.dp,
        shape = RoundedCornerShape(8.dp)
    ) {
        Text(
            modifier = Modifier.padding(2.dp).widthIn(0.dp, maxWidth),
            maxLines = maxLines,
            text = text,
            overflow = TextOverflow.Ellipsis
        )
    }
}
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.