---
title: "Chip"
description: "Action chips offer actions related to primary content. They should appear dynamically and
contextually in a UI."
type: "component"
---

<div class='type'>Composable Component</div>



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

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@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 `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. |
| 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
```kotlin
@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
```kotlin
@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
```kotlin
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ChipSample() {
    Chip(onClick = { /* Do something! */ }) { Text("Action Chip") }
}
```
### OutlinedChipWithIconSample
```kotlin
@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")
    }
}
```