Component

Material Design 3 list item list 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.

Enabled
Enabled tokens
TokenValue
List list item container colormd.comp.list.list-item.container.color
md.sys.color.surfaceShow reference chainHide reference chain
md.comp.list.list-item.container.color
  • md.sys.color.surface
    • md.ref.palette.neutral98
#FEF7FF
List list item container elevationmd.comp.list.list-item.container.elevation
md.sys.elevation.level0Show reference chainHide reference chain
md.comp.list.list-item.container.elevation
  • md.sys.elevation.level0
No value specified (dp)
List list item label text colormd.comp.list.list-item.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item leading avatar label colormd.comp.list.list-item.leading-avatar-label.color
md.sys.color.on-primary-containerShow reference chainHide reference chain
md.comp.list.list-item.leading-avatar-label.color
  • md.sys.color.on-primary-container
    • md.ref.palette.primary30
#4F378B
List list item leading avatar colormd.comp.list.list-item.leading-avatar.color
md.sys.color.primary-containerShow reference chainHide reference chain
md.comp.list.list-item.leading-avatar.color
  • md.sys.color.primary-container
    • md.ref.palette.primary90
#EADDFF
List list item leading icon colormd.comp.list.list-item.leading-icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.leading-icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item overline colormd.comp.list.list-item.overline.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.overline.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item segmented container colormd.comp.list.list-item.segmented.container.color
md.sys.color.surfaceShow reference chainHide reference chain
md.comp.list.list-item.segmented.container.color
  • md.sys.color.surface
    • md.ref.palette.neutral98
#FEF7FF
List list item selected container colormd.comp.list.list-item.selected.container.color
md.sys.color.secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.container.color
  • md.sys.color.secondary-container
    • md.ref.palette.secondary90
#E8DEF8
List list item selected label text colormd.comp.list.list-item.selected.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item selected leading icon colormd.comp.list.list-item.selected.leading-icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.leading-icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item selected overline colormd.comp.list.list-item.selected.overline.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.overline.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item selected supporting text colormd.comp.list.list-item.selected.supporting-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.supporting-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item selected trailing icon colormd.comp.list.list-item.selected.trailing-icon.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.trailing-icon.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item selected trailing supporting text colormd.comp.list.list-item.selected.trailing-supporting-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.trailing-supporting-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item supporting text colormd.comp.list.list-item.supporting-text.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.supporting-text.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item trailing icon colormd.comp.list.list-item.trailing-icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.trailing-icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item trailing supporting text colormd.comp.list.list-item.trailing-supporting-text.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.trailing-supporting-text.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item unselected trailing icon colormd.comp.list.list-item.unselected.trailing-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.unselected.trailing-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Disabled
Disabled tokens
TokenValue
List list item disabled label text colormd.comp.list.list-item.disabled.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.disabled.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item disabled label text opacitymd.comp.list.list-item.disabled.label-text.opacity38%
List list item disabled leading icon colormd.comp.list.list-item.disabled.leading-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.disabled.leading-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item disabled leading icon opacitymd.comp.list.list-item.disabled.leading-icon.opacity38%
List list item disabled overline colormd.comp.list.list-item.disabled.overline.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.disabled.overline.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item disabled overline opacitymd.comp.list.list-item.disabled.overline.opacity38%
List list item disabled state layer colormd.comp.list.list-item.disabled.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.disabled.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item disabled state layer opacitymd.comp.list.list-item.disabled.state-layer.opacity10%
List list item disabled supporting text colormd.comp.list.list-item.disabled.supporting-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.disabled.supporting-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item disabled supporting text opacitymd.comp.list.list-item.disabled.supporting-text.opacity38%
List list item disabled trailing icon colormd.comp.list.list-item.disabled.trailing-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.disabled.trailing-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item disabled trailing icon opacitymd.comp.list.list-item.disabled.trailing-icon.opacity38%
List list item selected disabled container colormd.comp.list.list-item.selected.disabled.container.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.disabled.container.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected disabled container opacitymd.comp.list.list-item.selected.disabled.container.opacity38%
List list item selected disabled label text colormd.comp.list.list-item.selected.disabled.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.disabled.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected disabled label text opacitymd.comp.list.list-item.selected.disabled.label-text.opacity38%
List list item selected disabled leading icon colormd.comp.list.list-item.selected.disabled.leading-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.disabled.leading-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected disabled leading icon opacitymd.comp.list.list-item.selected.disabled.leading-icon.opacity38%
List list item selected disabled overline colormd.comp.list.list-item.selected.disabled.overline.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.disabled.overline.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected disabled overline opacitymd.comp.list.list-item.selected.disabled.overline.opacity38%
List list item selected disabled state layer colormd.comp.list.list-item.selected.disabled.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.disabled.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected disabled state layer opacitymd.comp.list.list-item.selected.disabled.state-layer.opacity10%
List list item selected disabled supporting text colormd.comp.list.list-item.selected.disabled.supporting-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.disabled.supporting-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected disabled supporting text opacitymd.comp.list.list-item.selected.disabled.supporting-text.opacity38%
List list item selected disabled trailing icon colormd.comp.list.list-item.selected.disabled.trailing-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.disabled.trailing-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected disabled trailing icon opacitymd.comp.list.list-item.selected.disabled.trailing-icon.opacity38%
List list item selected disabled trailing supporting text colormd.comp.list.list-item.selected.disabled.trailing-supporting-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.disabled.trailing-supporting-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected disabled trailing supporting text opacitymd.comp.list.list-item.selected.disabled.trailing-supporting-text.opacity38%
Hovered
Hovered tokens
TokenValue
List list item hover label text colormd.comp.list.list-item.hover.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.hover.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item hover leading icon colormd.comp.list.list-item.hover.leading-icon.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.hover.leading-icon.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item hover state layer colormd.comp.list.list-item.hover.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.hover.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item hover state layer opacitymd.comp.list.list-item.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.list.list-item.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
List list item hover trailing icon colormd.comp.list.list-item.hover.trailing-icon.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.hover.trailing-icon.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item selected hover label text colormd.comp.list.list-item.selected.hover.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.hover.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item selected hover leading icon colormd.comp.list.list-item.selected.hover.leading-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.hover.leading-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected hover state layer colormd.comp.list.list-item.selected.hover.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.hover.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected hover state layer opacitymd.comp.list.list-item.selected.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.list.list-item.selected.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
List list item selected hover trailing icon colormd.comp.list.list-item.selected.hover.trailing-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.hover.trailing-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Focused
Focused tokens
TokenValue
List list item focus label text colormd.comp.list.list-item.focus.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.focus.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item focus leading icon colormd.comp.list.list-item.focus.leading-icon.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.focus.leading-icon.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item focus state layer colormd.comp.list.list-item.focus.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.focus.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item focus state layer opacitymd.comp.list.list-item.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.list.list-item.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
List list item focus trailing icon colormd.comp.list.list-item.focus.trailing-icon.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.focus.trailing-icon.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item selected focus label text colormd.comp.list.list-item.selected.focus.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.focus.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item selected focus leading icon colormd.comp.list.list-item.selected.focus.leading-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.focus.leading-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected focus state layer colormd.comp.list.list-item.selected.focus.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.focus.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected focus state layer opacitymd.comp.list.list-item.selected.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.list.list-item.selected.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
List list item selected focus trailing icon colormd.comp.list.list-item.selected.focus.trailing-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.focus.trailing-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Pressed
Pressed tokens
TokenValue
List list item pressed label text colormd.comp.list.list-item.pressed.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.pressed.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item pressed leading icon colormd.comp.list.list-item.pressed.leading-icon.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.pressed.leading-icon.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item pressed state layer colormd.comp.list.list-item.pressed.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.pressed.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item pressed state layer opacitymd.comp.list.list-item.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.list.list-item.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%
List list item pressed trailing icon colormd.comp.list.list-item.pressed.trailing-icon.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.pressed.trailing-icon.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item selected pressed label text colormd.comp.list.list-item.selected.pressed.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.pressed.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item selected pressed leading icon colormd.comp.list.list-item.selected.pressed.leading-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.pressed.leading-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected pressed state layer colormd.comp.list.list-item.selected.pressed.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.pressed.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected pressed state layer opacitymd.comp.list.list-item.selected.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.list.list-item.selected.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%
List list item selected pressed trailing icon colormd.comp.list.list-item.selected.pressed.trailing-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.pressed.trailing-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Dragged
Dragged tokens
TokenValue
List list item dragged container colormd.comp.list.list-item.dragged.container.elevation
md.sys.elevation.level4Show reference chainHide reference chain
md.comp.list.list-item.dragged.container.elevation
  • md.sys.elevation.level4
8dp
List list item dragged label text colormd.comp.list.list-item.dragged.label-text.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.dragged.label-text.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item dragged leading icon colormd.comp.list.list-item.dragged.leading-icon.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.dragged.leading-icon.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item dragged state layer colormd.comp.list.list-item.dragged.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.dragged.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item dragged state layer opacitymd.comp.list.list-item.dragged.state-layer.opacity
md.sys.state.dragged.state-layer-opacityShow reference chainHide reference chain
md.comp.list.list-item.dragged.state-layer.opacity
  • md.sys.state.dragged.state-layer-opacity
16%
List list item dragged trailing icon colormd.comp.list.list-item.dragged.trailing-icon.icon.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.list.list-item.dragged.trailing-icon.icon.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
List list item selected dragged label text colormd.comp.list.list-item.selected.dragged.label-text.color
md.sys.color.on-secondary-containerShow reference chainHide reference chain
md.comp.list.list-item.selected.dragged.label-text.color
  • md.sys.color.on-secondary-container
    • md.ref.palette.secondary30
#4A4458
List list item selected dragged leading icon colormd.comp.list.list-item.selected.dragged.leading-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.dragged.leading-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected dragged state layer colormd.comp.list.list-item.selected.dragged.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.dragged.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
List list item selected dragged state layer opacitymd.comp.list.list-item.selected.dragged.state-layer.opacity
md.sys.state.dragged.state-layer-opacityShow reference chainHide reference chain
md.comp.list.list-item.selected.dragged.state-layer.opacity
  • md.sys.state.dragged.state-layer-opacity
16%
List list item selected dragged trailing icon colormd.comp.list.list-item.selected.dragged.trailing-icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.list.list-item.selected.dragged.trailing-icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20