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
Avatar
Avatar tokens
TokenValue
Input chip with avatar avatar sizemd.comp.input-chip.with-avatar.avatar.size
24dp
Input chip with avatar avatar shapemd.comp.input-chip.with-avatar.avatar.shape
Full
Container
Container tokens
TokenValue
Input chip container shapemd.comp.input-chip.container.shape
8dp
Input chip container heightmd.comp.input-chip.container.height
32dp
Input chip container elevationmd.comp.input-chip.container.elevation
0dp
Input chip unselected outline colormd.comp.input-chip.unselected.outline.color
#CAC4D0
Input chip unselected outline widthmd.comp.input-chip.unselected.outline.width
1dp
Input chip selected container colormd.comp.input-chip.selected.container.color
#E8DEF8
Input chip selected outline widthmd.comp.input-chip.selected.outline.width
0dp
Input chip outline colormd.comp.input-chip.outline.color
#79747E
Input chip outline widthmd.comp.input-chip.outline.width
1dp
Label text
Label text tokens
TokenValue
Input chip label text fontmd.comp.input-chip.label-text.font
Roboto
Input chip label text line heightmd.comp.input-chip.label-text.line-height
20pt
Input chip label text sizemd.comp.input-chip.label-text.size
14pt
Input chip label text weightmd.comp.input-chip.label-text.weight
500
Input chip label text trackingmd.comp.input-chip.label-text.tracking
0.1pt
Input chip label text type stylemd.comp.input-chip.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Input chip selected label text colormd.comp.input-chip.selected.label-text.color
#4A4458
Input chip unselected label text colormd.comp.input-chip.unselected.label-text.color
#49454F
Input chip label text colormd.comp.input-chip.label-text.color
#49454F
Leading icon
Leading icon tokens
TokenValue
Input chip leading icon sizemd.comp.input-chip.with-leading-icon.leading-icon.size
18dp
Input chip with leading icon selected leading icon colormd.comp.input-chip.with-leading-icon.selected.leading-icon.color
#6750A4
Input chip with leading icon unselected leading icon colormd.comp.input-chip.with-leading-icon.unselected.leading-icon.color
#49454F
Input chip leading icon colormd.comp.input-chip.with-leading-icon.leading-icon.color
#49454F
Trailing icon
Trailing icon tokens
TokenValue
Input chip trailing icon sizemd.comp.input-chip.with-trailing-icon.trailing-icon.size
18dp
Input chip with trailing icon selected trailing icon colormd.comp.input-chip.with-trailing-icon.selected.trailing-icon.color
#4A4458
Input chip with trailing icon unselected trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color
#49454F
Input chip trailing icon colormd.comp.input-chip.with-trailing-icon.trailing-icon.color
#49454F
Disabled
Container
Container tokens
TokenValue
Input chip disabled unselected outline colormd.comp.input-chip.disabled.unselected.outline.color
#1D1B20
Input chip disabled unselected outline opacitymd.comp.input-chip.disabled.unselected.outline.opacity
12%
Input chip disabled selected container colormd.comp.input-chip.disabled.selected.container.color
#1D1B20
Input chip disabled selected container opacitymd.comp.input-chip.disabled.selected.container.opacity
12%
Input chip disabled outline colormd.comp.input-chip.disabled.outline.color
#1D1B20
Input chip disabled outline opacitymd.comp.input-chip.disabled.outline.opacity
12%
Label text
Label text tokens
TokenValue
Input chip disabled label text colormd.comp.input-chip.disabled.label-text.color
#1D1B20
Input chip disabled label text opacitymd.comp.input-chip.disabled.label-text.opacity
38%
Leading icon
Leading icon tokens
TokenValue
Input chip with leading icon disabled leading icon colormd.comp.input-chip.with-leading-icon.disabled.leading-icon.color
#1D1B20
Input chip with leading icon disabled leading icon opacitymd.comp.input-chip.with-leading-icon.disabled.leading-icon.opacity
38%
Trailing icon
Trailing icon tokens
TokenValue
Input chip with trailing icon disabled trailing icon colormd.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color
#1D1B20
Input chip with trailing icon disabled trailing icon opacitymd.comp.input-chip.with-trailing-icon.disabled.trailing-icon.opacity
38%
Avatar
Avatar tokens
TokenValue
Input chip with avatar disabled avatar opacitymd.comp.input-chip.with-avatar.disabled.avatar.opacity
38%
Hovered
Label text
Label text tokens
TokenValue
Input chip unselected hover label text colormd.comp.input-chip.unselected.hover.label-text.color
#49454F
Input chip selected hover label text colormd.comp.input-chip.selected.hover.label-text.color
#4A4458
Input chip hover label text colormd.comp.input-chip.hover.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Input chip unselected hover state layer colormd.comp.input-chip.unselected.hover.state-layer.color
#49454F
Input chip unselected hover state layer opacitymd.comp.input-chip.unselected.hover.state-layer.opacity
8%
Input chip selected hover state layer colormd.comp.input-chip.selected.hover.state-layer.color
#4A4458
Input chip selected hover state layer opacitymd.comp.input-chip.selected.hover.state-layer.opacity
8%
Input chip hover state layer colormd.comp.input-chip.hover.state-layer.color
#49454F
Input chip hover state layer opacitymd.comp.input-chip.hover.state-layer.opacity
8%
Leading icon
Leading icon tokens
TokenValue
Input chip with leading icon unselected hover leading icon colormd.comp.input-chip.with-leading-icon.unselected.hover.leading-icon.color
#6750A4
Input chip with leading icon selected hover leading icon colormd.comp.input-chip.with-leading-icon.selected.hover.leading-icon.color
#6750A4
Input chip with leading icon hover leading icon colormd.comp.input-chip.with-leading-icon.hover.leading-icon.color
#49454F
Trailing icon
Trailing icon tokens
TokenValue
Input chip with trailing icon unselected hover trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.hover.trailing-icon.color
#49454F
Input chip with trailing icon selected hover trailing icon colormd.comp.input-chip.with-trailing-icon.selected.hover.trailing-icon.color
#4A4458
Input chip with trailing icon hover trailing icon colormd.comp.input-chip.with-trailing-icon.hover.trailing-icon.color
#49454F
Focused
Focus indicator
Focus indicator tokens
TokenValue
Input chip focus indicator colormd.comp.input-chip.focus.indicator.color
#625B71
Input chip focus indicator thicknessmd.comp.input-chip.focus.indicator.thickness
3dp
Input chip focus indicator offsetmd.comp.input-chip.focus.indicator.outline.offset
2dp
Container
Container tokens
TokenValue
Input chip unselected focus outline colormd.comp.input-chip.unselected.focus.outline.color
#49454F
Input chip focus outline colormd.comp.input-chip.focus.outline.color
#49454F
Label text
Label text tokens
TokenValue
Input chip unselected focus label text colormd.comp.input-chip.unselected.focus.label-text.color
#49454F
Input chip selected focus label text colormd.comp.input-chip.selected.focus.label-text.color
#4A4458
Input chip focus label text colormd.comp.input-chip.focus.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Input chip unselected focus state layer colormd.comp.input-chip.unselected.focus.state-layer.color
#49454F
Input chip unselected focus state layer opacitymd.comp.input-chip.unselected.focus.state-layer.opacity
10%
Input chip selected focus state layer colormd.comp.input-chip.selected.focus.state-layer.color
#4A4458
Input chip selected focus state layer opacitymd.comp.input-chip.selected.focus.state-layer.opacity
10%
Input chip focus state layer colormd.comp.input-chip.focus.state-layer.color
#49454F
Input chip focus state layer opacitymd.comp.input-chip.focus.state-layer.opacity
10%
Leading icon
Leading icon tokens
TokenValue
Input chip with leading icon unselected focus leading icon colormd.comp.input-chip.with-leading-icon.unselected.focus.leading-icon.color
#6750A4
Input chip with leading icon selected focus leading icon colormd.comp.input-chip.with-leading-icon.selected.focus.leading-icon.color
#6750A4
Input chip with leading icon focus leading icon colormd.comp.input-chip.with-leading-icon.focus.leading-icon.color
#49454F
Trailing icon
Trailing icon tokens
TokenValue
Input chip with trailing icon unselected focus trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.focus.trailing-icon.color
#49454F
Input chip with trailing icon selected focus trailing icon colormd.comp.input-chip.with-trailing-icon.selected.focus.trailing-icon.color
#4A4458
Input chip with trailing icon focus trailing icon colormd.comp.input-chip.with-trailing-icon.focus.trailing-icon.color
#49454F
Pressed (ripple)
Label text
Label text tokens
TokenValue
Input chip unselected pressed label text colormd.comp.input-chip.unselected.pressed.label-text.color
#49454F
Input chip selected pressed label text colormd.comp.input-chip.selected.pressed.label-text.color
#4A4458
Input chip pressed label text colormd.comp.input-chip.pressed.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Input chip unselected pressed state layer colormd.comp.input-chip.unselected.pressed.state-layer.color
#49454F
Input chip unselected pressed state layer opacitymd.comp.input-chip.unselected.pressed.state-layer.opacity
10%
Input chip selected pressed state layer colormd.comp.input-chip.selected.pressed.state-layer.color
#4A4458
Input chip selected pressed state layer opacitymd.comp.input-chip.selected.pressed.state-layer.opacity
10%
Input chip pressed state layer colormd.comp.input-chip.pressed.state-layer.color
#49454F
Input chip pressed state layer opacitymd.comp.input-chip.pressed.state-layer.opacity
10%
Leading icon
Leading icon tokens
TokenValue
Input chip with leading icon unselected pressed leading icon colormd.comp.input-chip.with-leading-icon.unselected.pressed.leading-icon.color
#6750A4
Input chip with leading icon selected pressed leading icon colormd.comp.input-chip.with-leading-icon.selected.pressed.leading-icon.color
#6750A4
Input chip with leading icon pressed leading icon colormd.comp.input-chip.with-leading-icon.pressed.leading-icon.color
#49454F
Trailing icon
Trailing icon tokens
TokenValue
Input chip with trailing icon unselected pressed trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.pressed.trailing-icon.color
#49454F
Input chip with trailing icon selected pressed trailing icon colormd.comp.input-chip.with-trailing-icon.selected.pressed.trailing-icon.color
#4A4458
Input chip with trailing icon pressed trailing icon colormd.comp.input-chip.with-trailing-icon.pressed.trailing-icon.color
#49454F
Dragged
Container
Container tokens
TokenValue
Input chip dragged container elevationmd.comp.input-chip.dragged.container.elevation
8dp
Label text
Label text tokens
TokenValue
Input chip unselected dragged label text colormd.comp.input-chip.unselected.dragged.label-text.color
#49454F
Input chip selected dragged label text colormd.comp.input-chip.selected.dragged.label-text.color
#4A4458
Input chip dragged label text colormd.comp.input-chip.dragged.label-text.color
#49454F
State layer
State layer tokens
TokenValue
Input chip unselected dragged state layer colormd.comp.input-chip.unselected.dragged.state-layer.color
#49454F
Input chip unselected dragged state layer opacitymd.comp.input-chip.unselected.dragged.state-layer.opacity
16%
Input chip selected dragged state layer colormd.comp.input-chip.selected.dragged.state-layer.color
#4A4458
Input chip selected dragged state layer opacitymd.comp.input-chip.selected.dragged.state-layer.opacity
16%
Input chip dragged state layer colormd.comp.input-chip.dragged.state-layer.color
#49454F
Input chip dragged state layer opacitymd.comp.input-chip.dragged.state-layer.opacity
16%
Trailing icon
Trailing icon tokens
TokenValue
Input chip with trailing icon unselected dragged trailing icon colormd.comp.input-chip.with-trailing-icon.unselected.dragged.trailing-icon.color
#6750A4
Input chip with trailing icon selected dragged trailing icon colormd.comp.input-chip.with-trailing-icon.selected.dragged.trailing-icon.color
#6750A4
Input chip with trailing icon dragged trailing icon colormd.comp.input-chip.with-trailing-icon.dragged.trailing-icon.color
#49454F
Leading icon
Leading icon tokens
TokenValue
Input chip with leading icon unselected dragged leading icon colormd.comp.input-chip.with-leading-icon.unselected.dragged.leading-icon.color
#49454F
Input chip with leading icon selected dragged leading icon colormd.comp.input-chip.with-leading-icon.selected.dragged.leading-icon.color
#4A4458
Input chip with leading icon draged leading icon colormd.comp.input-chip.with-leading-icon.dragged.leading-icon.color
#49454F