SuggestionChip
Composable Component
Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.

Common
@Composable
fun SuggestionChip(
onClick: () -> Unit,
label: @Composable () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
icon: @Composable (() -> Unit)? = null,
shape: Shape = SuggestionChipDefaults.shape,
colors: ChipColors = SuggestionChipDefaults.suggestionChipColors(),
elevation: ChipElevation? = SuggestionChipDefaults.suggestionChipElevation(),
border: BorderStroke? = SuggestionChipDefaults.suggestionChipBorder(enabled),
interactionSource: MutableInteractionSource? = null,
) =
Chip(
modifier = modifier,
onClick = onClick,
enabled = enabled,
label = label,
labelTextStyle = SuggestionChipTokens.LabelTextFont.value,
labelColor = colors.labelColor(enabled),
leadingIcon = icon,
trailingIcon = null,
shape = shape,
colors = colors,
elevation = elevation,
border = border,
minHeight = SuggestionChipDefaults.Height,
paddingValues = SuggestionChipPadding,
interactionSource = interactionSource,
)
Parameters
onClick | called when this chip is clicked |
label | text label for this chip |
modifier | the Modifier to be applied to this chip |
enabled | controls the enabled state of this chip. When false , this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
icon | optional icon at the start of the chip, preceding the label text |
shape | defines the shape of this chip's container, border (when border is not null), and shadow (when using elevation ) |
colors | ChipColors that will be used to resolve the colors used for this chip in different states. See SuggestionChipDefaults.suggestionChipColors . |
elevation | ChipElevation used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip. Additionally, when the container color is ColorScheme.surface , this controls the amount of primary color applied as an overlay. See SuggestionChipDefaults.suggestionChipElevation . |
border | the border to draw around the container of this chip. Pass null for no border. See SuggestionChipDefaults.suggestionChipBorder . |
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. |
Common
Deprecated Maintained for binary compatibility. Use version with SuggestionChip that take a BorderStroke instead
@Composable
fun SuggestionChip(
onClick: () -> Unit,
label: @Composable () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
icon: @Composable (() -> Unit)? = null,
shape: Shape = SuggestionChipDefaults.shape,
colors: ChipColors = SuggestionChipDefaults.suggestionChipColors(),
elevation: ChipElevation? = SuggestionChipDefaults.suggestionChipElevation(),
border: ChipBorder? = SuggestionChipDefaults.suggestionChipBorder(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
) =
Chip(
modifier = modifier,
onClick = onClick,
enabled = enabled,
label = label,
labelTextStyle = SuggestionChipTokens.LabelTextFont.value,
labelColor = colors.labelColor(enabled),
leadingIcon = icon,
trailingIcon = null,
shape = shape,
colors = colors,
elevation = elevation,
border = border?.borderStroke(enabled)?.value,
minHeight = SuggestionChipDefaults.Height,
paddingValues = SuggestionChipPadding,
interactionSource = interactionSource,
)
Parameters
onClick | called when this chip is clicked |
label | text label for this chip |
modifier | the Modifier to be applied to this chip |
enabled | controls the enabled state of this chip. When false , this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
icon | optional icon at the start of the chip, preceding the label text |
shape | defines the shape of this chip's container, border (when border is not null), and shadow (when using elevation ) |
colors | ChipColors that will be used to resolve the colors used for this chip in different states. See SuggestionChipDefaults.suggestionChipColors . |
elevation | ChipElevation used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip. Additionally, when the container color is ColorScheme.surface , this controls the amount of primary color applied as an overlay. See SuggestionChipDefaults.suggestionChipElevation . |
border | the border to draw around the container of this chip. Pass null for no border. See SuggestionChipDefaults.suggestionChipBorder . |
interactionSource | the MutableInteractionSource representing the stream of Interaction s for this chip. You can create and pass in your own remember ed instance to observe Interaction s and customize the appearance / behavior of this chip in different states. |
Code Examples
SuggestionChipSample
@Preview
@Composable
fun SuggestionChipSample() {
SuggestionChip(onClick = { /* Do something! */ }, label = { Text("Suggestion Chip") })
}