Chip

Functions summary

Unit

@ExperimentalMaterialApi
@Composable
Chip(
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    interactionSource: MutableInteractionSource?,
    shape: Shape,
    border: BorderStroke?,
    colors: ChipColors,
    leadingIcon: (@Composable () -> Unit)?,
    content: @Composable RowScope.() -> Unit
)

Material Design action chip.

Cmn

Functions

Chip

Cmn

Artifact: androidx.compose.material:material

View Source

Added in 1.2.0

@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
): Unit

Material Design action chip.

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

import androidx.compose.material.Chip
import androidx.compose.material.Text

Chip(onClick = { /* Do something! */ }) { Text("Action Chip") }

You can create an outlined action chip using ChipDefaults.outlinedChipColors and ChipDefaults.outlinedBorder

import androidx.compose.material.Chip
import androidx.compose.material.ChipDefaults
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings

Chip(
    onClick = { /* Do something! */ },
    border = ChipDefaults.outlinedBorder,
    colors = ChipDefaults.outlinedChipColors(),
    leadingIcon = { Icon(Icons.Filled.Settings, contentDescription = "Localized description") },
) {
    Text("Change settings")
}

Action chips should appear in a set and can be horizontally scrollable

import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.Chip
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

Alternatively, use androidx.compose.foundation.layout.FlowRow to wrap chips to a new line.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.Chip
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

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

Parameters
`onClick: () -> Unit`	called when the chip is clicked.
`modifier: Modifier = Modifier`	Modifier to be applied to the chip
`enabled: Boolean = true`	When disabled, chip will not respond to user input. It will also appear visually disabled and disabled to accessibility services.
`interactionSource: MutableInteractionSource? = null`	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: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50))`	defines the chip's shape as well as its shadow
`border: BorderStroke? = null`	Border to draw around the chip. Pass `null` here for no border.
`colors: ChipColors = ChipDefaults.chipColors()`	`ChipColors` that will be used to resolve the background and content color for this chip in different states. See `ChipDefaults.chipColors`.
`leadingIcon: (@Composable () -> Unit)? = null`	Optional icon at the start of the chip, preceding the content text.
`content: @Composable RowScope.() -> Unit`	the content of this chip