---
title: "ElevatedAssistChip"
description: "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."
type: "component"
social_image: "/static/images/material3/elevated-assist-chip.png"
---

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



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.

<img loading='lazy' class='hero-img' alt='Assist chip image' src='/static/images/material3/elevated-assist-chip.png'>

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

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


```kotlin
@Composable
fun ElevatedAssistChip(
    onClick: () -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = AssistChipDefaults.shape,
    colors: ChipColors = AssistChipDefaults.elevatedAssistChipColors(),
    elevation: ChipElevation? = AssistChipDefaults.elevatedAssistChipElevation(),
    border: BorderStroke? = null,
    horizontalArrangement: Arrangement.Horizontal = AssistChipDefaults.horizontalArrangement(),
    contentPadding: PaddingValues = AssistChipDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
) =
    Chip(
        modifier = modifier,
        onClick = onClick,
        enabled = enabled,
        label = label,
        labelTextStyle = AssistChipTokens.LabelTextFont.value,
        labelColor = colors.labelColor(enabled),
        leadingIcon = leadingIcon,
        trailingIcon = trailingIcon,
        elevation = elevation,
        colors = colors,
        minHeight = AssistChipDefaults.Height,
        horizontalArrangement = horizontalArrangement,
        paddingValues = contentPadding,
        shape = shape,
        border = border,
        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. |
| leadingIcon | optional icon at the start of the chip, preceding the `label` text |
| trailingIcon | optional icon at the end of the chip |
| 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 `AssistChipDefaults.elevatedAssistChipColors`. |
| 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 `AssistChipDefaults.elevatedAssistChipElevation`. |
| border | the border to draw around the container of this chip |
| horizontalArrangement | the horizontal arrangement of the chip's children. If there aren't icons, then the horizontal padding between the `label` and the `border` will be the sum of `contentPadding` and the spacing in this `horizontalArrangement`. |
| contentPadding | the padding around the content of this chip, including the `leadingIcon`, `label`, and `trailingIcon`. See `AssistChipDefaults.ContentPadding`. |
| 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. |




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


> **Deprecated** Maintained for binary compatibility

```kotlin
@Composable
fun ElevatedAssistChip(
    onClick: () -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = AssistChipDefaults.shape,
    colors: ChipColors = AssistChipDefaults.elevatedAssistChipColors(),
    elevation: ChipElevation? = AssistChipDefaults.elevatedAssistChipElevation(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
) =
    ElevatedAssistChip(
        onClick = onClick,
        label = label,
        modifier = modifier,
        enabled = enabled,
        leadingIcon = leadingIcon,
        trailingIcon = trailingIcon,
        shape = shape,
        colors = colors,
        elevation = elevation,
        border = border,
        horizontalArrangement = AssistChipDefaults.horizontalArrangement(),
        contentPadding = AssistChipDefaults.ContentPadding,
        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. |
| leadingIcon | optional icon at the start of the chip, preceding the `label` text |
| trailingIcon | optional icon at the end of the chip |
| 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 `AssistChipDefaults.elevatedAssistChipColors`. |
| 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 `AssistChipDefaults.elevatedAssistChipElevation`. |
| border | the border to draw around the container of this chip |
| 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. |




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


> **Deprecated** Maintained for binary compatibility. Use version with ElevatedAssistChip that take a BorderStroke instead

```kotlin
@Composable
fun ElevatedAssistChip(
    onClick: () -> Unit,
    label: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = AssistChipDefaults.shape,
    colors: ChipColors = AssistChipDefaults.elevatedAssistChipColors(),
    elevation: ChipElevation? = AssistChipDefaults.elevatedAssistChipElevation(),
    border: ChipBorder? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
) =
    Chip(
        modifier = modifier,
        onClick = onClick,
        enabled = enabled,
        label = label,
        labelTextStyle = AssistChipTokens.LabelTextFont.value,
        labelColor = colors.labelColor(enabled),
        leadingIcon = leadingIcon,
        trailingIcon = trailingIcon,
        elevation = elevation,
        colors = colors,
        minHeight = AssistChipDefaults.Height,
        paddingValues = AssistChipDefaults.ContentPadding,
        shape = shape,
        border = border?.borderStroke(enabled)?.value,
        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. |
| leadingIcon | optional icon at the start of the chip, preceding the `label` text |
| trailingIcon | optional icon at the end of the chip |
| 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 `AssistChipDefaults.elevatedAssistChipColors`. |
| 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 `AssistChipDefaults.elevatedAssistChipElevation`. |
| border | the border to draw around the container of this chip |
| 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
### ElevatedAssistChipSample
```kotlin
@Preview
@Composable
fun ElevatedAssistChipSample() {
    ElevatedAssistChip(
        onClick = { /* Do something! */ },
        label = { Text("Assist Chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize),
            )
        },
    )
}
```