Chip

Composable Component

Action chips offer actions related to primary content. They should appear dynamically and contextually in a UI.

Common
@ExperimentalMaterialApi
@Composable
fun Chip(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    border: BorderStroke? = null,
    colors: ChipColors = ChipDefaults.chipColors(),
    leadingIcon: @Composable (() -> Unit)? = null,
    content: @Composable RowScope.() -> Unit,
)

Parameters
onClick called when the chip is clicked.
modifier Modifier to be applied to the chip
enabled When disabled, chip will not respond to user input. It will also appear visually disabled and disabled to accessibility services.
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.
shape defines the chip's shape as well as its shadow
border Border to draw around the chip. Pass null here for no border.
colors ChipColors that will be used to resolve the background and content color for this chip in different states. See ChipDefaults.chipColors.
leadingIcon Optional icon at the start of the chip, preceding the content text.
content the content of this chip

Code Examples

ChipGroupReflowSample

@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")
                }
            }
        }
    }
}

ChipGroupSingleLineSample

@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")
                }
            }
        }
    }
}

ChipSample

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

OutlinedChipWithIconSample

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