Component

Material Design 3 search 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

Color
Enabled
Enabled tokens
TokenValue
Search bar container colormd.comp.search-bar.container.color
#ECE6F0
Search bar container elevationmd.comp.search-bar.container.elevation
6dp
Search bar leading icon colormd.comp.search-bar.leading-icon.color
#1D1B20
Search bar trailing icon colormd.comp.search-bar.trailing-icon.color
#49454F
Search bar supporting text colormd.comp.search-bar.supporting-text.color
#49454F
Search bar input text colormd.comp.search-bar.input-text.color
#1D1B20
Hovered
Hovered tokens
TokenValue
Search bar hover state layer colormd.comp.search-bar.hover.state-layer.color
#1D1B20
Search bar hover state layer opacitymd.comp.search-bar.hover.state-layer.opacity
8%
Search bar hover supporting text colormd.comp.search-bar.hover.supporting-text.color
#49454F
Pressed
Pressed tokens
TokenValue
Search bar pressed state layer colormd.comp.search-bar.pressed.state-layer.color
#1D1B20
Search bar pressed state layer opacitymd.comp.search-bar.pressed.state-layer.opacity
10%
Search bar pressed supporting text colormd.comp.search-bar.pressed.supporting-text.color
#49454F
Focused
Focused tokens
TokenValue
Search bar focus indicator colormd.comp.search-bar.focus.indicator.color
#625B71
Search bar focus indicator thicknessmd.comp.search-bar.focus.indicator.thickness
3dp
Search bar focus indicator offsetmd.comp.search-bar.focus.indicator.outline.offset
2dp
Layout and Text
Contained (expressive)
Contained (expressive) tokens
TokenValue
Search bar contained pane leading marginmd.comp.search-bar.contained.leading-margin
24dp
Search bar contained pane trailing marginmd.comp.search-bar.contained.trailing-margin
24dp
Search bar contained motionmd.comp.search-bar.contained.motion.spring
—
Search bar contained leading spacemd.comp.search-bar.contained.leading-space
4dp
Search bar contained trailing spacemd.comp.search-bar.contained.trailing-space
4dp
Search bar contained no actions leading spacemd.comp.search-bar.contained.no-actions.leading-space
16dp
Search bar contained no actions trailing spacemd.comp.search-bar.contained.no-actions.trailing-space
16dp
Search bar contained icon label gapmd.comp.search-bar.contained.icon-label.gap
4dp
Search bar contained avatar target sizemd.comp.search-bar.contained.avatar.target-size
48dp
Search bar contained trailing actions gapmd.comp.search-bar.contained.trailing-actions.gap
0dp
Search bar contained trailing actions leading spacemd.comp.search-bar.contained.trailing-actions.leading-space
4dp
Search bar contained trailing actions trailing spacemd.comp.search-bar.contained.trailing-actions.trailing-space
4dp
Baseline
Baseline tokens
TokenValue
Search bar leading spacemd.comp.search-bar.leading-space
16dp
Search bar trailing spacemd.comp.search-bar.trailing-space
16dp
Search bar leading icon leading icon label spacemd.comp.search-bar.leading-icon.leading-icon-label-space
16dp
Search bar trailing icon label trailing icon spacemd.comp.search-bar.trailing-icon.label-trailing-icon-space
16dp
Common tokens
Common tokens tokens
TokenValue
Search bar container heightmd.comp.search-bar.container.height
56dp
Search bar container shapemd.comp.search-bar.container.shape
Full
Search bar avatar sizemd.comp.search-bar.avatar.size
30dp
Search bar avatar shapemd.comp.search-bar.avatar.shape
Full
Search bar icon sizemd.comp.search-bar.icon.size
24dp
Search bar supporting text typemd.comp.search-bar.supporting-text.type
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Search bar supporting text fontmd.comp.search-bar.supporting-text.font
Roboto
Search bar supporting text line heightmd.comp.search-bar.supporting-text.line-height
24pt
Search bar supporting text sizemd.comp.search-bar.supporting-text.size
16pt
Search bar supporting text weightmd.comp.search-bar.supporting-text.weight
400
Search bar supporting text trackingmd.comp.search-bar.supporting-text.tracking
0.5pt
Search bar input text typemd.comp.search-bar.input-text.type
Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt
Search bar input text fontmd.comp.search-bar.input-text.font
Roboto
Search bar input text line heightmd.comp.search-bar.input-text.line-height
24pt
Search bar input text sizemd.comp.search-bar.input-text.size
16pt
Search bar input text weightmd.comp.search-bar.input-text.weight
400
Search bar input text trackingmd.comp.search-bar.input-text.tracking
0.5pt
Search bar container surface tint layer colormd.comp.search-bar.container.surface-tint-layer.color
#6750A4