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