State of Compose 2023 results are in! Click here to learn more

← Back to Material Compose

Chip

Component
in
Material
. Since 1.2.0

Overview

Code Examples

Material Design implementation of an action Chip(https://material.io/components/chips#action-chips).

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

Overloads

Chip

@ExperimentalMaterialApi
@Composable
fun Chip(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    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.
interactionSourceThe MutableInteractionSource represents the stream of Interactions for this chip. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this component in different Interactions.
borderBorder to draw around the chip. Pass null here for no border.
colorsChipColors 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 chi