Chip

ChipSample

@OptIn(ExperimentalMaterialApi::class)
@Sampled
@Composable
fun ChipSample() {
    Chip(onClick = { /* Do something! */ }) { Text("Action Chip") }
}

OutlinedChipWithIconSample

@OptIn(ExperimentalMaterialApi::class)
@Sampled
@Composable
fun OutlinedChipWithIconSample() {
    Chip(
        onClick = { /* Do something! */ },
        border = ChipDefaults.outlinedBorder,
        colors = ChipDefaults.outlinedChipColors(),
        leadingIcon = { Icon(Icons.Filled.Settings, contentDescription = "Localized description") },
    ) {
        Text("Change settings")
    }
}

ChipGroupSingleLineSample

@Sampled
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ChipGroupSingleLineSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
            repeat(9) { index ->
                Chip(
                    modifier = Modifier.padding(horizontal = 4.dp),
                    onClick = { /* do something*/ },
                ) {
                    Text("Chip $index")
                }
            }
        }
    }
}

ChipGroupReflowSample

@Sampled
@OptIn(ExperimentalMaterialApi::class, ExperimentalLayoutApi::class)
@Composable
fun ChipGroupReflowSample() {
    Column {
        FlowRow(
            Modifier.fillMaxWidth(1f).wrapContentHeight(align = Alignment.Top),
            horizontalArrangement = Arrangement.Start,
        ) {
            repeat(10) { index ->
                Chip(
                    modifier =
                        Modifier.padding(horizontal = 4.dp)
                            .align(alignment = Alignment.CenterVertically),
                    onClick = { /* do something*/ },
                ) {
                    Text("Chip $index")
                }
            }
        }
    }
}