---
title: "CompactChip"
description: "A compact Wear Material Chip that offers two slots and a specific layout for an icon and label.
Both the icon and label are optional however it is expected that at least one will be provided."
type: "component"
---

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



A compact Wear Material Chip that offers two slots and a specific layout for an icon and label.
Both the icon and label are optional however it is expected that at least one will be provided.

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

<div class='sourceset sourceset-android'>Android</div>


> **Deprecated** This overload is provided for backwards compatibility with Compose for Wear OS 1.0.A newer overload is available with an additional shape parameter.

```kotlin
@Composable
public fun CompactChip(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    label: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    colors: ChipColors = ChipDefaults.primaryChipColors(),
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    contentPadding: PaddingValues = ChipDefaults.CompactChipContentPadding,
): Unit
```


#### Parameters

| | |
| --- | --- |
| onClick | Will be called when the user clicks the chip |
| modifier | Modifier to be applied to the chip |
| label | A slot for providing the chip's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "center" aligned if not. |
| icon | A slot for providing the chip's icon. The contents are expected to be a horizontally and vertically aligned icon of size `ChipDefaults.SmallIconSize` when used with a label or `ChipDefaults.IconSize` when used as the only content in the CompactChip. In order to correctly render when the Chip is not enabled the icon must set its alpha value to `LocalContentAlpha`. |
| colors | `ChipColors` that will be used to resolve the background and content color for this chip in different states. See `ChipDefaults.chipColors`. Defaults to `ChipDefaults.primaryChipColors` |
| enabled | Controls the enabled state of the chip. When `false`, this chip will not be clickable |
| interactionSource | The `MutableInteractionSource` representing the stream of `Interaction`s for this Chip. You can create and pass in your own remembered `MutableInteractionSource` if you want to observe `Interaction`s and customize the appearance / behavior of this Chip in different `Interaction`s. |
| contentPadding | The spacing values to apply internally between the container and the content |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun CompactChip(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    label: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    colors: ChipColors = ChipDefaults.primaryChipColors(),
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    contentPadding: PaddingValues = ChipDefaults.CompactChipContentPadding,
    shape: Shape = MaterialTheme.shapes.large,
    border: ChipBorder = ChipDefaults.chipBorder(),
)
```


#### Parameters

| | |
| --- | --- |
| onClick | Will be called when the user clicks the chip |
| modifier | Modifier to be applied to the chip |
| label | A slot for providing the chip's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "center" aligned if not. |
| icon | A slot for providing the chip's icon. The contents are expected to be a horizontally and vertically aligned icon of size `ChipDefaults.SmallIconSize` when used with a label or `ChipDefaults.IconSize` when used as the only content in the CompactChip. In order to correctly render when the Chip is not enabled the icon must set its alpha value to `LocalContentAlpha`. |
| colors | `ChipColors` that will be used to resolve the background and content color for this chip in different states. See `ChipDefaults.chipColors`. Defaults to `ChipDefaults.primaryChipColors` |
| enabled | Controls the enabled state of the chip. When `false`, this chip will not be clickable |
| 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. |
| contentPadding | The spacing values to apply internally between the container and the content |
| shape | Defines the chip's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme |
| border | `ChipBorder` that will be used to resolve the border for this chip in different states. See `ChipDefaults.chipBorder`. |






## Code Examples
### CompactChipWithIcon
```kotlin
@Composable
fun CompactChipWithIcon() {
    CompactChip(
        onClick = { /* Do something */ },
        enabled = true,
        icon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier = Modifier.size(ChipDefaults.IconSize),
            )
        },
    )
}
```
### CompactChipWithIconAndLabel
```kotlin
@Composable
fun CompactChipWithIconAndLabel() {
    CompactChip(
        onClick = { /* Do something */ },
        enabled = true,
        // CompactChip label should be no more than 1 line of text
        label = { Text("Single line label", maxLines = 1, overflow = TextOverflow.Ellipsis) },
        icon = {
            Icon(
                painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
                contentDescription = "airplane",
                modifier = Modifier.size(ChipDefaults.SmallIconSize),
            )
        },
    )
}
```
### CompactChipWithLabel
```kotlin
@Composable
fun CompactChipWithLabel() {
    CompactChip(
        onClick = { /* Do something */ },
        enabled = true,
        // CompactChip label should be no more than 1 line of text
        label = {
            Text(
                text = "Single line label",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth(),
            )
        },
    )
}
```