New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material Compose

Chip

Common

Material Design implementation of an action Chip.

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

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.7.0-beta04")
}

Overloads

@Composable
@ExperimentalMaterialApi
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

namedescription
onClickcalled when the chip is clicked.
modifierModifier to be applied to the chip
enabledWhen disabled, chip will not respond to user input. It will also appear visually disabled and disabled to accessibility services.
interactionSourcean optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s 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.
borderBorder 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].
leadingIconOptional icon at the start of the chip, preceding the content text.
contentthe content of this chip

Code Examples

ChipSample

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

OutlinedChipWithIconSample

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

ChipGroupSingleLineSample

@Composable
@OptIn(ExperimentalMaterialApi::class
@Sampled
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

@Composable
@OptIn(ExperimentalMaterialApi::class, ExperimentalLayoutApi::class
@Sampled
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")
                }
            }
        }
    }
}