Chip
Chips allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.
Chips and buttons are similar in that they both provide visual cues to prompt users to take actions and make selections. However, there are important distinctions to be aware of.
Multiple chips should appear together in a group, whereas there should be no more than 3 buttons in a single arrangement.
Types of chips
There are 4 types of chips:
- Assist: represent smart or automated actions that can span multiple apps, such as opening a calendar event from the home screen. Assist chips function as though the user asked an assistant to complete the action. They should appear dynamically and contextually in a UI.
- Filter: Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes. They can also be used for selecting options.
- Input: Input chips represent discrete pieces of information entered by a user, such as Gmail contacts or filter options within a search field.
- Suggestion: Suggestion chips help narrow a user’s intent by presenting dynamically generated suggestions, such as possible responses or search filters.
tip
See official guidelines for more info.
Parts
- 1: Container
- 2: Label
- 3: Leading icon (optional)
- 4: Trailing icon (optional)
States
- 1: Enabled (unselected and selected)
- 2: Disabled
- 3: Pressed (unselected and selected)
Specs
Enabled Unselected
- Squared Theme (default)
- Rounded Theme
Details
Container
| Token | Value |
|---|---|
| ds.comp.chip.containerColor | transparent |
| ds.comp.chip.containerElevation | ds.sys.elevation.level0 |
| ds.comp.chip.containerOutlineColor | ds.sys.color.outlineVariant |
| ds.comp.chip.containerOutlineWidth | 1dp |
| ds.comp.chip.containerShape | ds.sys.shape.corner.small |
| ds.comp.chip.containerPaddingVertical | 6dp |
| ds.comp.chip.containerPaddingHorizontal | 16dp |
| ds.comp.chip.containerGap | 8dp |
Details
Label
| Token | Value |
|---|---|
| ds.comp.chip.labelTypeScale | ds.sys.typeScale.labelLarge |
| ds.comp.chip.labelColor | ds.sys.color.onSurfaceVariant |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.chip.iconSize | 18dp |
| ds.comp.chip.iconColor | ds.sys.color.onSurfaceVariant |
Details
Container
| Token | Value |
|---|---|
| ds.comp.chip.containerColor | ds.sys.color.surfaceContainer |
| ds.comp.chip.containerElevation | ds.sys.elevation.level0 |
| ds.comp.chip.containerOutlineColor | ds.sys.color.outlineVariant |
| ds.comp.chip.containerOutlineWidth | 1dp |
| ds.comp.chip.containerShape | ds.sys.shape.corner.full |
| ds.comp.chip.containerPaddingVertical | 6dp |
| ds.comp.chip.containerPaddingHorizontal | 8dp |
| ds.comp.chip.containerGap | 8dp |
Details
Label
| Token | Value |
|---|---|
| ds.comp.chip.labelTypeScale | ds.sys.typeScale.labelLarge |
| ds.comp.chip.labelColor | ds.sys.color.onSurfaceVariant |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.chip.iconSize | 18dp |
| ds.comp.chip.iconColor | ds.sys.color.onSurfaceVariant |
Enabled selected
Details
Container
| Token | Value |
|---|---|
| ds.comp.chip.selectedContainerColor | ds.sys.color.primaryContainer |
| ds.comp.chip.selectedContainerOutlineColor | ds.sys.color.primary |
| ds.comp.chip.selectedContainerOutlineWidth | 1dp |
Details
Label
| Token | Value |
|---|---|
| ds.comp.chip.selectedLabelColor | ds.sys.color.onPrimaryContainer |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.chip.selectedIconColor | ds.sys.color.onPrimaryContainer |
Disabled
Details
Container
| Token | Value |
|---|---|
| ds.comp.chip.disabledContainerColor | ds.sys.color.onSurface |
| ds.comp.chip.disabledContainerOpacity | ds.sys.state.disabledContainerOpacity |
| ds.comp.chip.disabledContainerOutlineColor | ds.sys.color.onSurface |
| ds.comp.chip.disabledContainerOutlineOpacity | ds.sys.state.disabledContainerOpacity |
Details
Label
| Token | Value |
|---|---|
| ds.comp.chip.disabledLabelColor | ds.sys.color.onSurface |
| ds.comp.chip.disabledLabelOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.chip.disabledIconColor | ds.sys.color.onSurface |
| ds.comp.chip.disabledIconOpacity | ds.sys.state.disabledOnContainerOpacity |
Pressed unselected
Details
State Layer
| Token | Value |
|---|---|
| ds.comp.chip.pressedStateLayerColor | ds.sys.color.onSurfaceVariant |
| ds.comp.chip.pressedStateLayerOpacity | ds.sys.state.pressedStateLayerOpacity |
Details
Label
| Token | Value |
|---|---|
| ds.comp.chip.pressedLabelColor | ds.sys.color.onSurfaceVariant |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.chip.pressedIconColor | ds.sys.color.onSurfaceVariant |
Pressed selected
Details
State Layer
| Token | Value |
|---|---|
| ds.comp.chip.pressedSelectedStateLayerColor | ds.sys.color.onPrimaryContainer |
| ds.comp.chip.pressedSelectedStateLayerOpacity | ds.sys.state.pressedStateLayerOpacity |
Details
Label
| Token | Value |
|---|---|
| ds.comp.chip.pressedSelectedLabelColor | ds.sys.color.onPrimaryContainer |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.chip.pressedSelectedIconColor | ds.sys.color.onPrimaryContainer |
React Native
<Chip title="My Chip" />
Props
| Prop | Type |
|---|---|
| title | string |
| leadingIcon (optional) | IconNames |
| trailingIcon (optional) | IconNames |
| onPress (optional) | (event: GestureResponderEvent) => void |
| selected (optional) | boolean |
| disabled (optional) | boolean |