Chips

The Chip component is an interactive compact element that represents an input, attribute, or action.

Anatomy

Chips can contain up to two text labels and an optional icon. At least one text label or an icon must be provided. Chips may truncate text if the text label is too long. The primary label is one line of text if the secondary label is present, but up to two lines of text if the secondary label is not present.

A. Primary label
B. Secondary label (optional)
C. Icon (optional)
D. Container

Design recommendations

Image chip

Image chips contain actions which relate to a chosen image. Image chips work well to communicate a more specific look and feel.

Chip(
    ...
    label = {
        Text(
            text = “Summer Mix”,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
         )
    },
    colors = ChipDefaults.imageBackgroundChipColors(
        backgroundImagePainter = painterResource(id = R.drawable.clouds)
    )
)
Avatar chip

Use avatar chips for actions that are related to a chosen avatar. Avatar chips can also have icons used to make the avatar more easily recognizable, such as a contact ID photo. Avatar icons are 32x32dp.

Chip(
    ...
    label = {
        Text(text = “Mark Castle”)
    },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Mark Castle",
            modifier = Modifier.size(ChipDefaults.LargeIconSize)
                .wrapContentSize(align = Alignment.Center)
        )
    }
)
Compact chip

The related component, CompactChip is a variant of the Chip component that appears smaller and is designed for use cases where there is less space. Compact chips have a slot for an icon and a slot for a single line text label. Compact chips have a tappable area with a height of 48dp.

Hierarchy

High emphasis
High-emphasis chips are distinguished by their fill. They contain actions that are primary to the page. Use primary colors as the fill of a high emphasis chip.

Medium emphasis
Medium emphasis chips are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions.

Low emphasis
Low emphasis chips are distinguished by having no fill, and only a text label. Use low emphasis chips for actions when a compact arrangement is needed.

Sizes

Default chip

Icon: 24dp
Height: 52dp

Compact Chip

Icon: 20dp
Height: 32dp
Tappable area: 48dp

Usage

See examples of chip usage such as standard chips in Settings and image chips in an exercise app.