Component

Material Design 3 chips tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Font

Enabled
Container
Container tokens
TokenValue
Filter chip container shapemd.comp.filter-chip.container.shape
8dp
Filter chip container heightmd.comp.filter-chip.container.height
32dp
Filter chip container shadow colormd.comp.filter-chip.container.shadow-color
#000000
Filter chip container surface tint layer colormd.comp.filter-chip.container.surface-tint-layer.color
#6750A4
Filter chip container elevationmd.comp.filter-chip.flat.container.elevation
0dp
Filter chip (unselected) outline colormd.comp.filter-chip.flat.unselected.outline.color
#CAC4D0
Filter chip (unselected) outline widthmd.comp.filter-chip.flat.unselected.outline.width
1dp
Filter chip (selected) outline colormd.comp.filter-chip.flat.selected.container.color
#E8DEF8
Filter chip (selected) outline widthmd.comp.filter-chip.flat.selected.outline.width
0dp
Filter chip elevated container elevationmd.comp.filter-chip.elevated.container.elevation
1dp
Filter chip elevated container shadow colormd.comp.filter-chip.elevated.container.shadow-color
#000000
Filter chip elevated (unselected) container colormd.comp.filter-chip.elevated.unselected.container.color
#F7F2FA
Filter chip elevated (selected) container colormd.comp.filter-chip.elevated.selected.container.color
#E8DEF8
Label text
Label text tokens
TokenValue
Filter chip label text fontmd.comp.filter-chip.label-text.font
Roboto
Filter chip label text line heightmd.comp.filter-chip.label-text.line-height
20pt
Filter chip label text sizemd.comp.filter-chip.label-text.size
14pt
Filter chip label text weightmd.comp.filter-chip.label-text.weight
500
Filter chip label text trackingmd.comp.filter-chip.label-text.tracking
0.1pt
Filter chip label text type stylemd.comp.filter-chip.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Filter chip (unselected) label text colormd.comp.filter-chip.unselected.label-text.color
#49454F
Filter chip (selected) label text colormd.comp.filter-chip.selected.label-text.color
#4A4458
Icon
Icon tokens
TokenValue
Filter chip with icon icon sizemd.comp.filter-chip.with-icon.icon.size
18dp
Filter chip with leading icon selected leading icon colormd.comp.filter-chip.with-leading-icon.selected.leading-icon.color
#4A4458
Filter chip with leading icon unselected leading icon colormd.comp.filter-chip.with-leading-icon.unselected.leading-icon.color
#6750A4
Filter chip with trailing icon selected trailing icon colormd.comp.filter-chip.with-trailing-icon.selected.trailing-icon.color
#4A4458
Filter chip with trailing icon unselected trailing icon colormd.comp.filter-chip.with-trailing-icon.unselected.trailing-icon.color
#49454F
Filter chip with icon (unselected) icon colormd.comp.filter-chip.with-icon.unselected.icon.color
#49454F
Filter chip with icon (selected) icon colormd.comp.filter-chip.with-icon.selected.icon.color
#4A4458
Filter chip (unselected) with trailing iconmd.comp.filter-chip.with-trailing-icon.trailing-icon.unselected.color
#49454F
Filter chip (unselected) with leading iconmd.comp.filter-chip.with-leading-icon.leading-icon.unselected.color
#6750A4
Disabled
Container
Container tokens
TokenValue
Filter chip disabled (unselected) outline colormd.comp.filter-chip.flat.disabled.unselected.outline.color
#1D1B20
Filter chip disabled (unselected) outline opacitymd.comp.filter-chip.flat.disabled.unselected.outline.opacity
12%
Filter chip disabled (selected) container colormd.comp.filter-chip.flat.disabled.selected.container.color
#1D1B20
Filter chip disabled (selected) container opacitymd.comp.filter-chip.flat.disabled.selected.container.opacity
12%
Filter chip elevated disabled container elevationmd.comp.filter-chip.elevated.disabled.container.elevation
0dp
Filter chip elevated disabled container colormd.comp.filter-chip.elevated.disabled.container.color
#1D1B20
Filter chip elevated disabled container opacitymd.comp.filter-chip.elevated.disabled.container.opacity
12%
Label text
Label text tokens
TokenValue
Filter chip disabled label text colormd.comp.filter-chip.disabled.label-text.color
#1D1B20
Filter chip disabled label text opacitymd.comp.filter-chip.disabled.label-text.opacity
38%
Icon
Icon tokens
TokenValue
Filter chip with leading icon disabled icon colormd.comp.filter-chip.with-leading-icon.disabled.leading-icon.color
#1D1B20
Filter chip with leading icon disabled leading icon opacitymd.comp.filter-chip.with-leading-icon.disabled.leading-icon.opacity
38%
Filter chip with trailing icon disabled icon colormd.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.color
#1D1B20
Filter chip with trailing icon disabled trailing icon opacitymd.comp.filter-chip.with-trailing-icon.disabled.trailing-icon.opacity
38%
Filter chip with icon disabled icon colormd.comp.filter-chip.with-icon.disabled.icon.color
#1D1B20
Filter chip with icon disabled icon opacitymd.comp.filter-chip.with-icon.disabled.icon.opacity
38%
Focused
Focus indicator
Focus indicator tokens
TokenValue
Filter chip focus indicator colormd.comp.filter-chip.focus.indicator.color
#625B71
Filter chip focus indicator thicknessmd.comp.filter-chip.focus.indicator.thickness
3dp
Filter chip focus indicator offsetmd.comp.filter-chip.focus.indicator.outline.offset
2dp
Container
Container tokens
TokenValue
Filter chip (unselected) focus outline colormd.comp.filter-chip.flat.unselected.focus.outline.color
#49454F
Filter chip elevated focus container elevationmd.comp.filter-chip.elevated.focus.container.elevation
1dp
Filter chip (selected) focus container elevationmd.comp.filter-chip.flat.selected.focus.container.elevation
0dp
Filter chip (unselected) focus container elevationmd.comp.filter-chip.flat.unselected.focus.container.elevation
0dp
Label text
Label text tokens
TokenValue
Filter chip (unselected) focus label text colormd.comp.filter-chip.unselected.focus.label-text.color
#49454F
Filter chip (selected) focus label text colormd.comp.filter-chip.selected.focus.label-text.color
#4A4458
State layer
State layer tokens
TokenValue
Filter chip (unselected) focus state layer colormd.comp.filter-chip.unselected.focus.state-layer.color
#49454F
Filter chip (unselected) focus state layer opacitymd.comp.filter-chip.unselected.focus.state-layer.opacity
10%
Filter chip (selected) focus state layer colormd.comp.filter-chip.selected.focus.state-layer.color
#4A4458
Filter chip (selected) focus state layer opacitymd.comp.filter-chip.selected.focus.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Filter chip with leading icon (selected) focus icon colormd.comp.filter-chip.with-leading-icon.selected.focus.leading-icon.color
#4A4458
Filter chip with leading icon (unselected) focus icon colormd.comp.filter-chip.with-leading-icon.unselected.focus.leading-icon.color
#6750A4
Filter chip with trailing icon (selected) focus icon colormd.comp.filter-chip.with-trailing-icon.selected.focus.trailing-icon.color
#4A4458
Filter chip with trailing icon (unselected) focus icon colormd.comp.filter-chip.with-trailing-icon.unselected.focus.trailing-icon.color
#49454F
Filter chip with icon (unselected) focus icon colormd.comp.filter-chip.with-icon.unselected.focus.icon.color
#49454F
Filter chip with icon (selected) focus icon colormd.comp.filter-chip.with-icon.selected.focus.icon.color
#4A4458
Hovered
Container
Container tokens
TokenValue
Filter chip elevated hover container elevationmd.comp.filter-chip.elevated.hover.container.elevation
3dp
Filter chip (selected) hover container elevationmd.comp.filter-chip.flat.selected.hover.container.elevation
1dp
Filter chip (unselected) hover container elevationmd.comp.filter-chip.flat.unselected.hover.container.elevation
0dp
Label text
Label text tokens
TokenValue
Filter chip (unselected) hover label text colormd.comp.filter-chip.unselected.hover.label-text.color
#49454F
Filter chip (selected) hover label text colormd.comp.filter-chip.selected.hover.label-text.color
#4A4458
State layer
State layer tokens
TokenValue
Filter chip (unselected) hover state layer colormd.comp.filter-chip.unselected.hover.state-layer.color
#49454F
Filter chip (unselected) hover state layer opacitymd.comp.filter-chip.unselected.hover.state-layer.opacity
8%
Filter chip (selected) hover state layer colormd.comp.filter-chip.selected.hover.state-layer.color
#4A4458
Filter chip (selected) hover state layer opacitymd.comp.filter-chip.selected.hover.state-layer.opacity
8%
Icon
Icon tokens
TokenValue
Filter chip with leading icon (selected) hover icon colormd.comp.filter-chip.with-leading-icon.selected.hover.leading-icon.color
#4A4458
Filter chip with leading icon (unselected) hover icon colormd.comp.filter-chip.with-leading-icon.unselected.hover.leading-icon.color
#6750A4
Filter chip with trailing icon (selected) hover icon colormd.comp.filter-chip.with-trailing-icon.selected.hover.trailing-icon.color
#4A4458
Filter chip with trailing icon (unselected) hover icon colormd.comp.filter-chip.with-trailing-icon.unselected.hover.trailing-icon.color
#49454F
Filter chip with icon (unselected) hover icon colormd.comp.filter-chip.with-icon.unselected.hover.icon.color
#49454F
Filter chip with icon (selected) hover icon colormd.comp.filter-chip.with-icon.selected.hover.icon.color
#4A4458
Pressed (ripple)
Container
Container tokens
TokenValue
Filter chip (Elevated style) pressed container elevationmd.comp.filter-chip.elevated.pressed.container.elevation
1dp
Filter chip (selected) pressed container elevationmd.comp.filter-chip.flat.selected.pressed.container.elevation
0dp
Filter chip (unselected) pressed container elevationmd.comp.filter-chip.flat.unselected.pressed.container.elevation
0dp
Label text
Label text tokens
TokenValue
Filter chip (unselected) pressed label text colormd.comp.filter-chip.unselected.pressed.label-text.color
#49454F
Filter chip (selected) pressed label text colormd.comp.filter-chip.selected.pressed.label-text.color
#4A4458
State layer
State layer tokens
TokenValue
Filter chip (unselected) pressed state layer colormd.comp.filter-chip.unselected.pressed.state-layer.color
#4A4458
Filter chip (unselected) pressed state layer opacitymd.comp.filter-chip.unselected.pressed.state-layer.opacity
10%
Filter chip (selected) pressed state layer colormd.comp.filter-chip.selected.pressed.state-layer.color
#49454F
Filter chip (selected) pressed state layer opacitymd.comp.filter-chip.selected.pressed.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Filter chip with leading icon (selected) pressed icon colormd.comp.filter-chip.with-leading-icon.selected.pressed.leading-icon.color
#4A4458
Filter chip with leading icon (unselected) pressed icon colormd.comp.filter-chip.with-leading-icon.unselected.pressed.leading-icon.color
#6750A4
Filter chip with trailing icon (selected) pressed icon colormd.comp.filter-chip.with-trailing-icon.selected.pressed.trailing-icon.color
#4A4458
Filter chip with trailing icon (unselected) pressed icon colormd.comp.filter-chip.with-trailing-icon.unselected.pressed.trailing-icon.color
#49454F
Filter chip with icon (unselected) pressed icon colormd.comp.filter-chip.with-icon.unselected.pressed.icon.color
#49454F
Filter chip with icon (selected) pressed icon colormd.comp.filter-chip.with-icon.selected.pressed.icon.color
#4A4458
Dragged
Container
Container tokens
TokenValue
Filter chip dragged container elevationmd.comp.filter-chip.dragged.container.elevation
8dp
Label text
Label text tokens
TokenValue
Filter chip (unselected) dragged label text colormd.comp.filter-chip.unselected.dragged.label-text.color
#49454F
Filter chip (selected) dragged label text colormd.comp.filter-chip.selected.dragged.label-text.color
#4A4458
State layer
State layer tokens
TokenValue
Filter chip (unselected) dragged state layer colormd.comp.filter-chip.unselected.dragged.state-layer.color
#49454F
Filter chip (unselected) dragged state layer opacitymd.comp.filter-chip.unselected.dragged.state-layer.opacity
16%
Filter chip (selected) dragged state layer colormd.comp.filter-chip.selected.dragged.state-layer.color
#4A4458
Filter chip (selected) dragged state layer opacitymd.comp.filter-chip.selected.dragged.state-layer.opacity
16%
Icon
Icon tokens
TokenValue
Filter chip with leading icon (selected) dragged icon colormd.comp.filter-chip.with-leading-icon.selected.dragged.leading-icon.color
#4A4458
Filter chip with leading icon (unselected) dragged icon colormd.comp.filter-chip.with-leading-icon.unselected.dragged.leading-icon.color
#6750A4
Filter chip with trailing icon (selected) dragged icon colormd.comp.filter-chip.with-trailing-icon.selected.dragged.trailing-icon.color
#4A4458
Filter chip with trailing icon (unselected) dragged icon colormd.comp.filter-chip.with-trailing-icon.unselected.dragged.trailing-icon.color
#49454F
Filter chip with icon (unselected) dragged icon colormd.comp.filter-chip.with-icon.unselected.dragged.icon.color
#49454F
Filter chip with icon (unselected) dragged icon colormd.comp.filter-chip.with-icon.selected.dragged.icon.color
#4A4458