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