---
url: /components/chips/specs.md
description: >-
  Chips help people enter information, make selections, filter content, or
  trigger actions. Use chips to show options for a specific context.
---

# Chips

Chips help people enter information, make selections, filter content, or trigger actions. Use chips to show options for a specific context.

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Tokens & specs

Select a component variant below to see its elements, attributes, tokens, and values.

::: token-table token-table-484a63be03b01a17-95227b44
**Chips tokens** · 4 token sets · 316 tokens · [live token table](https://m3.material.io/components/chips/specs) · DSDB `TOKEN_TABLE.484a63be03b01a17`

* Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Language height: Small
* Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**Chip - Assist** · `md.comp.assist-chip` · 51 tokens

For assist chips.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.assist-chip.container.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — |
| Enabled › Container | `md.comp.assist-chip.container.height` | Length | — | `32dp` | — |
| Enabled › Container | `md.comp.assist-chip.flat.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Enabled › Container | `md.comp.assist-chip.flat.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Enabled › Container | `md.comp.assist-chip.flat.outline.width` | Length | — | `1dp` | — |
| Enabled › Container | `md.comp.assist-chip.elevated.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Enabled › Container | `md.comp.assist-chip.elevated.container.color` | Color | `md.sys.color.surface-container-low` → `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` |
| Enabled › Container | `md.comp.assist-chip.elevated.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled › Container | `md.comp.assist-chip.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Label text | `md.comp.assist-chip.label-text.font` | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Enabled › Label text | `md.comp.assist-chip.label-text.line-height` | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — |
| Enabled › Label text | `md.comp.assist-chip.label-text.size` | Font size | `md.sys.typescale.label-large.size` | `14pt` | — |
| Enabled › Label text | `md.comp.assist-chip.label-text.weight` | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Enabled › Label text | `md.comp.assist-chip.label-text.tracking` | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — |
| Enabled › Label text | `md.comp.assist-chip.label-text.type` | Typography | composite<br>font names: `md.comp.assist-chip.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.assist-chip.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.assist-chip.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.assist-chip.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>font tracking: `md.comp.assist-chip.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — |
| Enabled › Label text | `md.comp.assist-chip.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Enabled › Icon | `md.comp.assist-chip.with-icon.icon.size` | Length | — | `18dp` | — |
| Enabled › Icon | `md.comp.assist-chip.with-icon.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Disabled › Container | `md.comp.assist-chip.flat.disabled.outline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.assist-chip.flat.disabled.outline.opacity` | Opacity | — | `0.12` | — |
| Disabled › Container | `md.comp.assist-chip.elevated.disabled.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Disabled › Container | `md.comp.assist-chip.elevated.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.assist-chip.elevated.disabled.container.opacity` | Opacity | — | `0.12` | — |
| Disabled › Label text | `md.comp.assist-chip.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Label text | `md.comp.assist-chip.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Disabled › Icon | `md.comp.assist-chip.with-icon.disabled.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Icon | `md.comp.assist-chip.with-icon.disabled.icon.opacity` | Opacity | — | `0.38` | — |
| Hovered › Container | `md.comp.assist-chip.elevated.hover.container.elevation` | Elevation | `md.sys.elevation.level2` | `3dp` | — |
| Hovered › Label text | `md.comp.assist-chip.hover.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Hovered › State layer | `md.comp.assist-chip.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Hovered › State layer | `md.comp.assist-chip.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › Icon | `md.comp.assist-chip.with-icon.hover.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused › Container | `md.comp.assist-chip.flat.focus.outline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Focused › Container | `md.comp.assist-chip.elevated.focus.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Focused › Label text | `md.comp.assist-chip.focus.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Focused › State layer | `md.comp.assist-chip.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Focused › State layer | `md.comp.assist-chip.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › Icon | `md.comp.assist-chip.with-icon.focus.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused › Focus indicator | `md.comp.assist-chip.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Focused › Focus indicator | `md.comp.assist-chip.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Focused › Focus indicator | `md.comp.assist-chip.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
| Pressed (ripple) › Container | `md.comp.assist-chip.elevated.pressed.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Pressed (ripple) › Label text | `md.comp.assist-chip.pressed.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Pressed (ripple) › State layer | `md.comp.assist-chip.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Pressed (ripple) › State layer | `md.comp.assist-chip.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › Icon | `md.comp.assist-chip.with-icon.pressed.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Dragged › Container | `md.comp.assist-chip.dragged.container.elevation` | Elevation | `md.sys.elevation.level4` | `8dp` | — |
| Dragged › Label text | `md.comp.assist-chip.dragged.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Dragged › State layer | `md.comp.assist-chip.dragged.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Dragged › State layer | `md.comp.assist-chip.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Dragged › Icon | `md.comp.assist-chip.with-icon.dragged.icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |

**Chip - Filter** · `md.comp.filter-chip` · 107 tokens

For filter chips.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.filter-chip.container.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — |
| Enabled › Container | `md.comp.filter-chip.container.height` | Length | — | `32dp` | — |
| Enabled › Container | `md.comp.filter-chip.container.shadow-color` (deprecated) | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled › Container | `md.comp.filter-chip.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Container | `md.comp.filter-chip.flat.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Enabled › Container | `md.comp.filter-chip.flat.unselected.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Enabled › Container | `md.comp.filter-chip.flat.unselected.outline.width` | Length | — | `1dp` | — |
| Enabled › Container | `md.comp.filter-chip.flat.selected.container.color` | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>High contrast: `#4A4458` via `md.ref.palette.secondary30` |
| Enabled › Container | `md.comp.filter-chip.flat.selected.outline.width` | Length | — | `0dp` | — |
| Enabled › Container | `md.comp.filter-chip.elevated.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Enabled › Container | `md.comp.filter-chip.elevated.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled › Container | `md.comp.filter-chip.elevated.unselected.container.color` | Color | `md.sys.color.surface-container-low` → `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` |
| Enabled › Container | `md.comp.filter-chip.elevated.selected.container.color` | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>High contrast: `#4A4458` via `md.ref.palette.secondary30` |
| Enabled › Label text | `md.comp.filter-chip.label-text.font` | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Enabled › Label text | `md.comp.filter-chip.label-text.line-height` | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — |
| Enabled › Label text | `md.comp.filter-chip.label-text.size` | Font size | `md.sys.typescale.label-large.size` | `14pt` | — |
| Enabled › Label text | `md.comp.filter-chip.label-text.weight` | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Enabled › Label text | `md.comp.filter-chip.label-text.tracking` | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — |
| Enabled › Label text | `md.comp.filter-chip.label-text.type` | Typography | composite<br>font names: `md.comp.filter-chip.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.filter-chip.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.filter-chip.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.filter-chip.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>font tracking: `md.comp.filter-chip.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — |
| Enabled › Label text | `md.comp.filter-chip.unselected.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Label text | `md.comp.filter-chip.selected.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled › Icon | `md.comp.filter-chip.with-icon.icon.size` | Length | — | `18dp` | — |
| Enabled › Icon | `md.comp.filter-chip.with-leading-icon.selected.leading-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled › Icon | `md.comp.filter-chip.with-leading-icon.unselected.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Icon | `md.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled › Icon | `md.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Icon | `md.comp.filter-chip.with-icon.unselected.icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Icon | `md.comp.filter-chip.with-icon.selected.icon.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled › Icon | `md.comp.filter-chip.with-trailing-icon.trailing-icon.unselected.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Icon | `md.comp.filter-chip.with-leading-icon.leading-icon.unselected.color` (deprecated) | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Disabled › Container | `md.comp.filter-chip.flat.disabled.unselected.outline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.filter-chip.flat.disabled.unselected.outline.opacity` | Opacity | — | `0.12` | — |
| Disabled › Container | `md.comp.filter-chip.flat.disabled.selected.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.filter-chip.flat.disabled.selected.container.opacity` | Opacity | — | `0.12` | — |
| Disabled › Container | `md.comp.filter-chip.elevated.disabled.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Disabled › Container | `md.comp.filter-chip.elevated.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.filter-chip.elevated.disabled.container.opacity` | Opacity | — | `0.12` | — |
| Disabled › Label text | `md.comp.filter-chip.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Label text | `md.comp.filter-chip.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Disabled › Icon | `md.comp.filter-chip.with-leading-icon.disabled.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Icon | `md.comp.filter-chip.with-leading-icon.disabled.leading-icon.opacity` | Opacity | — | `0.38` | — |
| Disabled › Icon | `md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Icon | `md.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.opacity` | Opacity | — | `0.38` | — |
| Disabled › Icon | `md.comp.filter-chip.with-icon.disabled.icon.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Icon | `md.comp.filter-chip.with-icon.disabled.icon.opacity` (deprecated) | Opacity | — | `0.38` | — |
| Focused › Container | `md.comp.filter-chip.flat.unselected.focus.outline.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Container | `md.comp.filter-chip.elevated.focus.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Focused › Container | `md.comp.filter-chip.flat.selected.focus.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Focused › Container | `md.comp.filter-chip.flat.unselected.focus.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Focused › Label text | `md.comp.filter-chip.unselected.focus.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Label text | `md.comp.filter-chip.selected.focus.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused › State layer | `md.comp.filter-chip.unselected.focus.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › State layer | `md.comp.filter-chip.unselected.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › State layer | `md.comp.filter-chip.selected.focus.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused › State layer | `md.comp.filter-chip.selected.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › Icon | `md.comp.filter-chip.with-icon.unselected.focus.icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Icon | `md.comp.filter-chip.with-icon.selected.focus.icon.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused › Icon | `md.comp.filter-chip.with-leading-icon.selected.focus.leading-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused › Icon | `md.comp.filter-chip.with-leading-icon.unselected.focus.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused › Icon | `md.comp.filter-chip.with-trailing-icon.selected.focus.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused › Icon | `md.comp.filter-chip.with-trailing-icon.unselected.focus.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Focus indicator | `md.comp.filter-chip.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Focused › Focus indicator | `md.comp.filter-chip.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Focused › Focus indicator | `md.comp.filter-chip.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
| Hovered › Container | `md.comp.filter-chip.elevated.hover.container.elevation` | Elevation | `md.sys.elevation.level2` | `3dp` | — |
| Hovered › Container | `md.comp.filter-chip.flat.selected.hover.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Hovered › Container | `md.comp.filter-chip.flat.unselected.hover.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Hovered › Label text | `md.comp.filter-chip.unselected.hover.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › Label text | `md.comp.filter-chip.selected.hover.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered › State layer | `md.comp.filter-chip.unselected.hover.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › State layer | `md.comp.filter-chip.unselected.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › State layer | `md.comp.filter-chip.selected.hover.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered › State layer | `md.comp.filter-chip.selected.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › Icon | `md.comp.filter-chip.with-icon.unselected.hover.icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › Icon | `md.comp.filter-chip.with-icon.selected.hover.icon.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered › Icon | `md.comp.filter-chip.with-leading-icon.selected.hover.leading-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered › Icon | `md.comp.filter-chip.with-leading-icon.unselected.hover.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered › Icon | `md.comp.filter-chip.with-trailing-icon.selected.hover.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered › Icon | `md.comp.filter-chip.with-trailing-icon.unselected.hover.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › Container | `md.comp.filter-chip.elevated.pressed.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Pressed (ripple) › Container | `md.comp.filter-chip.flat.selected.pressed.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Pressed (ripple) › Container | `md.comp.filter-chip.flat.unselected.pressed.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Pressed (ripple) › Label text | `md.comp.filter-chip.unselected.pressed.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › Label text | `md.comp.filter-chip.selected.pressed.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed (ripple) › State layer | `md.comp.filter-chip.unselected.pressed.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed (ripple) › State layer | `md.comp.filter-chip.unselected.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › State layer | `md.comp.filter-chip.selected.pressed.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › State layer | `md.comp.filter-chip.selected.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › Icon | `md.comp.filter-chip.with-icon.unselected.pressed.icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › Icon | `md.comp.filter-chip.with-icon.selected.pressed.icon.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed (ripple) › Icon | `md.comp.filter-chip.with-leading-icon.selected.pressed.leading-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed (ripple) › Icon | `md.comp.filter-chip.with-leading-icon.unselected.pressed.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed (ripple) › Icon | `md.comp.filter-chip.with-trailing-icon.selected.pressed.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed (ripple) › Icon | `md.comp.filter-chip.with-trailing-icon.unselected.pressed.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › Container | `md.comp.filter-chip.dragged.container.elevation` | Elevation | `md.sys.elevation.level4` | `8dp` | — |
| Dragged › Label text | `md.comp.filter-chip.unselected.dragged.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › Label text | `md.comp.filter-chip.selected.dragged.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Dragged › State layer | `md.comp.filter-chip.unselected.dragged.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › State layer | `md.comp.filter-chip.unselected.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Dragged › State layer | `md.comp.filter-chip.selected.dragged.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Dragged › State layer | `md.comp.filter-chip.selected.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Dragged › Icon | `md.comp.filter-chip.with-icon.unselected.dragged.icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › Icon | `md.comp.filter-chip.with-icon.selected.dragged.icon.color` (deprecated) | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Dragged › Icon | `md.comp.filter-chip.with-leading-icon.selected.dragged.leading-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Dragged › Icon | `md.comp.filter-chip.with-leading-icon.unselected.dragged.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Dragged › Icon | `md.comp.filter-chip.with-trailing-icon.selected.dragged.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Dragged › Icon | `md.comp.filter-chip.with-trailing-icon.unselected.dragged.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |

**Chip - Input** · `md.comp.input-chip` · 107 tokens

For input chips.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Avatar | `md.comp.input-chip.with-avatar.avatar.size` | Length | — | `24dp` | — |
| Enabled › Avatar | `md.comp.input-chip.with-avatar.avatar.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| Enabled › Container | `md.comp.input-chip.container.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — |
| Enabled › Container | `md.comp.input-chip.container.height` | Length | — | `32dp` | — |
| Enabled › Container | `md.comp.input-chip.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Enabled › Container | `md.comp.input-chip.unselected.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Enabled › Container | `md.comp.input-chip.unselected.outline.width` | Length | — | `1dp` | — |
| Enabled › Container | `md.comp.input-chip.selected.container.color` | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>High contrast: `#4A4458` via `md.ref.palette.secondary30` |
| Enabled › Container | `md.comp.input-chip.selected.outline.width` | Length | — | `0dp` | — |
| Enabled › Container | `md.comp.input-chip.outline.color` (deprecated) | Color | `md.sys.color.outline` → `md.ref.palette.neutral-variant50` | `#79747E` | Dark: `#938F99` via `md.ref.palette.neutral-variant60`<br>Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`<br>High contrast: `#322F37` via `md.ref.palette.neutral-variant20` |
| Enabled › Container | `md.comp.input-chip.outline.width` (deprecated) | Length | — | `1dp` | — |
| Enabled › Label text | `md.comp.input-chip.label-text.font` | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Enabled › Label text | `md.comp.input-chip.label-text.line-height` | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — |
| Enabled › Label text | `md.comp.input-chip.label-text.size` | Font size | `md.sys.typescale.label-large.size` | `14pt` | — |
| Enabled › Label text | `md.comp.input-chip.label-text.weight` | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Enabled › Label text | `md.comp.input-chip.label-text.tracking` | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — |
| Enabled › Label text | `md.comp.input-chip.label-text.type` | Typography | composite<br>font names: `md.comp.input-chip.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.input-chip.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.input-chip.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.input-chip.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>font tracking: `md.comp.input-chip.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — |
| Enabled › Label text | `md.comp.input-chip.selected.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled › Label text | `md.comp.input-chip.unselected.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Label text | `md.comp.input-chip.label-text.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Leading icon | `md.comp.input-chip.with-leading-icon.leading-icon.size` | Length | — | `18dp` | — |
| Enabled › Leading icon | `md.comp.input-chip.with-leading-icon.selected.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Leading icon | `md.comp.input-chip.with-leading-icon.unselected.leading-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Leading icon | `md.comp.input-chip.with-leading-icon.leading-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Trailing icon | `md.comp.input-chip.with-trailing-icon.trailing-icon.size` | Length | — | `18dp` | — |
| Enabled › Trailing icon | `md.comp.input-chip.with-trailing-icon.selected.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Enabled › Trailing icon | `md.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Enabled › Trailing icon | `md.comp.input-chip.with-trailing-icon.trailing-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Disabled › Container | `md.comp.input-chip.disabled.unselected.outline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.input-chip.disabled.unselected.outline.opacity` | Opacity | — | `0.12` | — |
| Disabled › Container | `md.comp.input-chip.disabled.selected.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.input-chip.disabled.selected.container.opacity` | Opacity | — | `0.12` | — |
| Disabled › Container | `md.comp.input-chip.disabled.outline.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.input-chip.disabled.outline.opacity` (deprecated) | Opacity | — | `0.12` | — |
| Disabled › Label text | `md.comp.input-chip.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Label text | `md.comp.input-chip.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Disabled › Leading icon | `md.comp.input-chip.with-leading-icon.disabled.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Leading icon | `md.comp.input-chip.with-leading-icon.disabled.leading-icon.opacity` | Opacity | — | `0.38` | — |
| Disabled › Trailing icon | `md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Trailing icon | `md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.opacity` | Opacity | — | `0.38` | — |
| Disabled › Avatar | `md.comp.input-chip.with-avatar.disabled.avatar.opacity` | Opacity | — | `0.38` | — |
| Hovered › Label text | `md.comp.input-chip.unselected.hover.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › Label text | `md.comp.input-chip.selected.hover.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered › Label text | `md.comp.input-chip.hover.label-text.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › State layer | `md.comp.input-chip.unselected.hover.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › State layer | `md.comp.input-chip.unselected.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › State layer | `md.comp.input-chip.selected.hover.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered › State layer | `md.comp.input-chip.selected.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › State layer | `md.comp.input-chip.hover.state-layer.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › State layer | `md.comp.input-chip.hover.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › Leading icon | `md.comp.input-chip.with-leading-icon.unselected.hover.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered › Leading icon | `md.comp.input-chip.with-leading-icon.selected.hover.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered › Leading icon | `md.comp.input-chip.with-leading-icon.hover.leading-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › Trailing icon | `md.comp.input-chip.with-trailing-icon.unselected.hover.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › Trailing icon | `md.comp.input-chip.with-trailing-icon.selected.hover.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Hovered › Trailing icon | `md.comp.input-chip.with-trailing-icon.hover.trailing-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Container | `md.comp.input-chip.unselected.focus.outline.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Container | `md.comp.input-chip.focus.outline.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Label text | `md.comp.input-chip.unselected.focus.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Label text | `md.comp.input-chip.selected.focus.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused › Label text | `md.comp.input-chip.focus.label-text.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › State layer | `md.comp.input-chip.unselected.focus.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › State layer | `md.comp.input-chip.unselected.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › State layer | `md.comp.input-chip.selected.focus.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused › State layer | `md.comp.input-chip.selected.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › State layer | `md.comp.input-chip.focus.state-layer.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › State layer | `md.comp.input-chip.focus.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › Leading icon | `md.comp.input-chip.with-leading-icon.unselected.focus.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused › Leading icon | `md.comp.input-chip.with-leading-icon.selected.focus.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused › Leading icon | `md.comp.input-chip.with-leading-icon.focus.leading-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Trailing icon | `md.comp.input-chip.with-trailing-icon.unselected.focus.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Trailing icon | `md.comp.input-chip.with-trailing-icon.selected.focus.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Focused › Trailing icon | `md.comp.input-chip.with-trailing-icon.focus.trailing-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Focus indicator | `md.comp.input-chip.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Focused › Focus indicator | `md.comp.input-chip.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Focused › Focus indicator | `md.comp.input-chip.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
| Pressed (ripple) › Label text | `md.comp.input-chip.unselected.pressed.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › Label text | `md.comp.input-chip.selected.pressed.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed (ripple) › Label text | `md.comp.input-chip.pressed.label-text.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › State layer | `md.comp.input-chip.unselected.pressed.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › State layer | `md.comp.input-chip.unselected.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › State layer | `md.comp.input-chip.selected.pressed.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed (ripple) › State layer | `md.comp.input-chip.selected.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › State layer | `md.comp.input-chip.pressed.state-layer.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › State layer | `md.comp.input-chip.pressed.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › Leading icon | `md.comp.input-chip.with-leading-icon.unselected.pressed.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed (ripple) › Leading icon | `md.comp.input-chip.with-leading-icon.selected.pressed.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed (ripple) › Leading icon | `md.comp.input-chip.with-leading-icon.pressed.leading-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › Trailing icon | `md.comp.input-chip.with-trailing-icon.unselected.pressed.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › Trailing icon | `md.comp.input-chip.with-trailing-icon.selected.pressed.trailing-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Pressed (ripple) › Trailing icon | `md.comp.input-chip.with-trailing-icon.pressed.trailing-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › Container | `md.comp.input-chip.dragged.container.elevation` | Elevation | `md.sys.elevation.level4` | `8dp` | — |
| Dragged › Label text | `md.comp.input-chip.unselected.dragged.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › Label text | `md.comp.input-chip.selected.dragged.label-text.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Dragged › Label text | `md.comp.input-chip.dragged.label-text.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › State layer | `md.comp.input-chip.unselected.dragged.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › State layer | `md.comp.input-chip.unselected.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Dragged › State layer | `md.comp.input-chip.selected.dragged.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Dragged › State layer | `md.comp.input-chip.selected.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Dragged › State layer | `md.comp.input-chip.dragged.state-layer.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › State layer | `md.comp.input-chip.dragged.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
| Dragged › Trailing icon | `md.comp.input-chip.with-trailing-icon.unselected.dragged.trailing-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Dragged › Trailing icon | `md.comp.input-chip.with-trailing-icon.selected.dragged.trailing-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Dragged › Trailing icon | `md.comp.input-chip.with-trailing-icon.dragged.trailing-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › Leading icon | `md.comp.input-chip.with-leading-icon.unselected.dragged.leading-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › Leading icon | `md.comp.input-chip.with-leading-icon.selected.dragged.leading-icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#4A4458` | Dark: `#E8DEF8` via `md.ref.palette.secondary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.secondary100` |
| Dragged › Leading icon | `md.comp.input-chip.with-leading-icon.dragged.leading-icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |

**Chip - Suggestion** · `md.comp.suggestion-chip` · 51 tokens

For suggestion chips.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.suggestion-chip.container.shape` | Shape | `md.sys.shape.corner.small` | `Rounded corners 8dp` | — |
| Enabled › Container | `md.comp.suggestion-chip.container.height` | Length | — | `32dp` | — |
| Enabled › Container | `md.comp.suggestion-chip.flat.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Enabled › Container | `md.comp.suggestion-chip.flat.outline.color` | Color | `md.sys.color.outline-variant` → `md.ref.palette.neutral-variant80` | `#CAC4D0` | Dark: `#49454F` via `md.ref.palette.neutral-variant30`<br>Medium contrast: `#79747E` via `md.ref.palette.neutral-variant50`<br>High contrast: `#49454F` via `md.ref.palette.neutral-variant30` |
| Enabled › Container | `md.comp.suggestion-chip.flat.outline.width` | Length | — | `1dp` | — |
| Enabled › Container | `md.comp.suggestion-chip.elevated.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Enabled › Container | `md.comp.suggestion-chip.elevated.container.color` | Color | `md.sys.color.surface-container-low` → `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` |
| Enabled › Container | `md.comp.suggestion-chip.elevated.container.shadow-color` | Color | `md.sys.color.shadow` → `md.ref.palette.neutral0` | `#000000` | — |
| Enabled › Container | `md.comp.suggestion-chip.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Icon | `md.comp.suggestion-chip.with-leading-icon.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Icon | `md.comp.suggestion-chip.with-leading-icon.leading-icon.size` | Length | — | `18dp` | — |
| Enabled › Label text | `md.comp.suggestion-chip.label-text.font` | Font names | `md.sys.typescale.label-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Enabled › Label text | `md.comp.suggestion-chip.label-text.line-height` | Line height | `md.sys.typescale.label-large.line-height` | `20pt` | — |
| Enabled › Label text | `md.comp.suggestion-chip.label-text.size` | Font size | `md.sys.typescale.label-large.size` | `14pt` | — |
| Enabled › Label text | `md.comp.suggestion-chip.label-text.weight` | Font weight | `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium` | `500` | — |
| Enabled › Label text | `md.comp.suggestion-chip.label-text.tracking` | Font tracking | `md.sys.typescale.label-large.tracking` | `0.1pt` | — |
| Enabled › Label text | `md.comp.suggestion-chip.label-text.type` | Typography | composite<br>font names: `md.comp.suggestion-chip.label-text.font` → `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.suggestion-chip.label-text.weight` → `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.suggestion-chip.label-text.size` → `md.sys.typescale.label-large.size`<br>line height: `md.comp.suggestion-chip.label-text.line-height` → `md.sys.typescale.label-large.line-height`<br>font tracking: `md.comp.suggestion-chip.label-text.tracking` → `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — |
| Enabled › Label text | `md.comp.suggestion-chip.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Disabled › Container | `md.comp.suggestion-chip.flat.disabled.outline.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.suggestion-chip.flat.disabled.outline.opacity` | Opacity | — | `0.12` | — |
| Disabled › Container | `md.comp.suggestion-chip.elevated.disabled.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| Disabled › Container | `md.comp.suggestion-chip.elevated.disabled.container.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Container | `md.comp.suggestion-chip.elevated.disabled.container.opacity` | Opacity | — | `0.12` | — |
| Disabled › Icon | `md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Icon | `md.comp.suggestion-chip.with-leading-icon.disabled.leading-icon.opacity` | Opacity | — | `0.38` | — |
| Disabled › Label text | `md.comp.suggestion-chip.disabled.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Disabled › Label text | `md.comp.suggestion-chip.disabled.label-text.opacity` | Opacity | — | `0.38` | — |
| Hovered › Container | `md.comp.suggestion-chip.elevated.hover.container.elevation` | Elevation | `md.sys.elevation.level2` | `3dp` | — |
| Hovered › Icon | `md.comp.suggestion-chip.with-leading-icon.hover.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Hovered › Label text | `md.comp.suggestion-chip.hover.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › State layer | `md.comp.suggestion-chip.hover.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Hovered › State layer | `md.comp.suggestion-chip.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Focused › Focus indicator | `md.comp.suggestion-chip.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |
| Focused › Focus indicator | `md.comp.suggestion-chip.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Focused › Focus indicator | `md.comp.suggestion-chip.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
| Focused › Container | `md.comp.suggestion-chip.flat.focus.outline.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › Container | `md.comp.suggestion-chip.elevated.focus.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Focused › Icon | `md.comp.suggestion-chip.with-leading-icon.focus.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Focused › Label text | `md.comp.suggestion-chip.focus.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › State layer | `md.comp.suggestion-chip.focus.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Focused › State layer | `md.comp.suggestion-chip.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › Container | `md.comp.suggestion-chip.elevated.pressed.container.elevation` | Elevation | `md.sys.elevation.level1` | `1dp` | — |
| Pressed (ripple) › Icon | `md.comp.suggestion-chip.with-leading-icon.pressed.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Pressed (ripple) › Label text | `md.comp.suggestion-chip.pressed.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › State layer | `md.comp.suggestion-chip.pressed.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Pressed (ripple) › State layer | `md.comp.suggestion-chip.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Dragged › Container | `md.comp.suggestion-chip.dragged.container.elevation` | Elevation | `md.sys.elevation.level4` | `8dp` | — |
| Dragged › Icon | `md.comp.suggestion-chip.with-leading-icon.dragged.leading-icon.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Dragged › Label text | `md.comp.suggestion-chip.dragged.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › State layer | `md.comp.suggestion-chip.dragged.state-layer.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Dragged › State layer | `md.comp.suggestion-chip.dragged.state-layer.opacity` | Opacity | `md.sys.state.dragged.state-layer-opacity` | `0.16` | — |
:::

## Assist chip

![Assist chip diagram numbering 3 elements.](/assets/ef2f43d6-m01dv1nz-1.BMcahxsC.webp)

1. Container 
2. Label text 
3. Leading icon

### Assist chip color

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![Assist chip diagram numbering 4 color elements.](/assets/5e4f782a-m01dv6ou-2.BRHre1ND.webp)

Assist chip color roles used for light and dark themes:

1. Surface container low (optional)
2. On surface
3. Outline
4. Primary

### Assist chip states

[States](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") are visual representations used to communicate the status of a component or interactive element. [Learn more about interaction states](../../foundations/interaction/states/overview.md)

![36 assist chips illustrating combinations of styles, selection and non-selection, and 6 interaction states.](/assets/378b748c-m8sg1d2r-03-3p.BRKr7wk9.webp)

Selected and unselected assist chip states:

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed 
6. Dragged

### Assist chip measurements

![3 assist chips with measurements shown for variants with and without a leading icon.](/assets/7039b0e0-m01dvj22-4.DKe5e182.webp)

Assist chip padding and size measurements

|            Attribute            |       Value       |
| :-----------------------------: | :---------------: |
|              Height             |        32dp       |
|              Shape              | 8dp corner radius |
|            Icon size            |        18dp       |
|  Vertical label text alignment  |   Center-aligned  |
| Horizontal label text alignment |   Start-aligned   |
|        Left/right padding       |        16dp       |
|   Left/right padding with icon  |        8dp        |
|     Padding between elements    |        8dp        |

## Filter chip

![Filter chip diagram numbering 4 elements.](/assets/2c4e9f34-m01dvpzm-5.vZ8iBEzS.webp)

1. Container 
2. Label text 
3. Leading icon
4. Trailing icon

### Filter chip color

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![Filter chip diagram numbering 4 color elements.](/assets/fb623827-mmp8q5ab-06-3p.BV6E88Qf.webp)

Filter chip color roles used for light and dark themes:

1. On surface variant
2. On secondary container
3. Secondary container
4. Outline variant
5. Surface container low (optional)

### Filter chip states

[States](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") are visual representations used to communicate the status of a component or interactive element. [Learn more about interaction states](../../foundations/interaction/states/overview.md)

![24 filter chips showing combinations of elevated, non-elevated, selected, and non-selected styles, and 6 interaction states.](/assets/558e8445-m8sg2d2t-07-3p.BbLZEctR.webp)

Selected and unselected filter chip states:

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed 
6. Dragged

### Filter chip measurements

![3 filter chips with measurements shown for types with and without a leading icon and trailing icon.](/assets/acf63d71-m01dwqif-8.DJVqq0O0.webp)

Filter chip padding and size measurements

|            Attribute            |       Value       |
| :-----------------------------: | :---------------: |
|         Container height        |        32dp       |
|         Container shape         | 8dp corner radius |
|            Icon size            |        18dp       |
|  Vertical label text alignment  |   Center-aligned  |
| Horizontal label text alignment |   Start-aligned   |
|        Left/right padding       |        16dp       |
|   Left/right padding with icon  |        8dp        |
|     Padding between elements    |        8dp        |

## Input chip

![Input chip diagram numbering 4 elements.](/assets/741d2b6a-m01dwxct-9.raXVKCoo.webp)

1. Container 
2. Label text 
3. Trailing icon 
4. Leading icon

### Input chip color

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![Input chip diagram numbering 5 color elements.](/assets/751defc2-m02q3wit-10-3p.COxKXzbz.webp)

Input chip color roles used for light and dark themes:

1. On surface variant
2. Surface container low (optional)
3. On surface variant
4. On surface variant
5. Outline variant
6. Primary
7. Secondary container
8. On secondary container
9. On secondary container

### Input chip states

[States](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") are visual representations used to communicate the status of a component or interactive element. [Learn more about interaction states](../../foundations/interaction/states/overview.md)

![33 input chips illustrating combinations of styles, selection and non-selection, and 6 interaction states.](/assets/dae536f3-m8sg4m8e-11-3p.NASMxWNT.webp)

Selected and unselected input chip states:

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed 
6. Dragged

### Input chip measurements

![2 input chips with measurements: 1 with a trailing icon only; 1 with an avatar as a leading icon and a trailing icon.](/assets/ced57139-m34ufke8-12-3p.BpX_0v1F.webp)

Input chip padding and size measurements

|            Attribute            |        Value       |
| :-----------------------------: | :----------------: |
|         Container height        |        32dp        |
|         Container shape         |  8dp corner radius |
|            Icon size            |        18dp        |
|           Avatar shape          | 12dp corner radius |
|           Avatar size           |        24dp        |
|  Vertical label text alignment  |   Center-aligned   |
| Horizontal label text alignment |    Start-aligned   |
|     Left padding for avatar     |         4dp        |
|     Right padding for avatar    |         8dp        |
|   Left/right padding for icon   |         8dp        |
|     Padding between elements    |         8dp        |
|    Target size for close icon   |      Min 48dp      |

## Suggestion chip

![Suggestion chip diagram numbering 2 elements.](/assets/bf1e3205-m01dxq8p-13.DmTjoCBa.webp)

1. Container 
2. Label text

### Suggestion chip color

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![Suggestion chip diagram numbering 3 color elements.](/assets/1202ab45-m01dxxwr-14.DhP5ArcS.webp)

Suggestion chip color roles used for light and dark themes:

1. Outline
2. Surface container low (optional)
3. On surface variant

### Suggestion chip states

[States](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") are visual representations used to communicate the status of a component or interactive element. [Learn more about interaction states](../../foundations/interaction/states/overview.md)

![24 suggestion chips illustrating combinations of styles across 6 interaction states.](/assets/8e728e8b-m8sg5r6a-15-3p.sOp1LbGk.webp)

Selected and unselected suggestion chip states:

1. Enabled
2. Disabled
3. Hovered
4. Focused
5. Pressed
6. Dragged

### Suggestion chip measurements

![2 suggestion chips with measurements shown for variants with and without a leading icon.](/assets/34131434-m01dybi0-16.5OGuOThf.webp)

Suggestion chip padding and size measurements

|            Attribute            |       Value       |
| :-----------------------------: | :---------------: |
|         Container height        |        32dp       |
|         Container shape         | 8dp corner radius |
|            Icon size            |        18dp       |
|  Vertical label text alignment  |   Center-aligned  |
| Horizontal label text alignment |   Start-aligned   |
| Left/right padding without icon |        16dp       |
|   Left/right padding with icon  |        8dp        |
|     Padding between elements    |        8dp        |