Compose Unstyled 2.0 is out! Check the official announcement blog ->
Compose Component

ElevatedFilterChip

Chips help people enter information, make selections, filter content, or trigger actions.

ElevatedFilterChip social preview

ElevatedFilterChipSample

@Preview
@Composable
fun ElevatedFilterChipSample() {
    var selected by remember { mutableStateOf(false) }
    ElevatedFilterChip(
        selected = selected,
        onClick = { selected = !selected },
        label = { Text("Filter chip") },
        leadingIcon =
            if (selected) {
                {
                    Icon(
                        imageVector = Icons.Filled.Done,
                        contentDescription = "Localized Description",
                        modifier = Modifier.size(FilterChipDefaults.IconSize),
                    )
                }
            } else {
                null
            },
    )
}

ElevatedFilterChipWithCornerMorphingSample

@Preview
@Composable
fun ElevatedFilterChipWithCornerMorphingSample() {
    var selected by remember { mutableStateOf(false) }
    ElevatedFilterChip(
        selected = selected,
        onClick = { selected = !selected },
        label = { Text("Filter chip") },
        shapes = FilterChipDefaults.shapes(),
        leadingIcon =
            if (selected) {
                {
                    Icon(
                        imageVector = Icons.Filled.Done,
                        contentDescription = "Localized Description",
                        modifier = Modifier.size(FilterChipDefaults.IconSize),
                    )
                }
            } else {
                {
                    Icon(
                        imageVector = Icons.Filled.Home,
                        contentDescription = "Localized description",
                        modifier = Modifier.size(FilterChipDefaults.IconSize),
                    )
                }
            },
        trailingIcon = {
            Icon(
                imageVector = Icons.Filled.ArrowDropDown,
                contentDescription = "Localized Description",
                modifier = Modifier.size(FilterChipDefaults.IconSize),
            )
        },
    )
}

Last updated: