Choose how people take action.
Material Design 3 "Search" tokens: All tokens
Preview
Component library
Find controls and patterns for your next screen.
Organize information and help people find it.
Collect information and show available choices.
Suggestions
No results
Component library
Find controls and patterns for your next screen.
Choose how people take action.
Organize information and help people find it.
Collect information and show available choices.
Suggestions
No results
Browse tokens
Color
Search - Bar
Color
Enabled
| Token | Value |
|---|---|
Search bar container colormd.comp.search-bar.container.color | #ECE6F0 md.comp.search-bar.container.color
|
Search bar container elevationmd.comp.search-bar.container.elevation | 6dp md.comp.search-bar.container.elevation
|
Search bar input text colormd.comp.search-bar.input-text.color | #1D1B20 md.comp.search-bar.input-text.color
|
Search bar leading icon colormd.comp.search-bar.leading-icon.color | #1D1B20 md.comp.search-bar.leading-icon.color
|
Search bar supporting text colormd.comp.search-bar.supporting-text.color | #49454F md.comp.search-bar.supporting-text.color
|
Search bar trailing icon colormd.comp.search-bar.trailing-icon.color | #49454F md.comp.search-bar.trailing-icon.color
|
Hovered
| Token | Value |
|---|---|
Search bar hover state layer colormd.comp.search-bar.hover.state-layer.color | #1D1B20 md.comp.search-bar.hover.state-layer.color
|
Search bar hover state layer opacitymd.comp.search-bar.hover.state-layer.opacity | 8% md.comp.search-bar.hover.state-layer.opacity
|
Search bar hover supporting text colormd.comp.search-bar.hover.supporting-text.color | #49454F md.comp.search-bar.hover.supporting-text.color
|
Pressed
| Token | Value |
|---|---|
Search bar pressed state layer colormd.comp.search-bar.pressed.state-layer.color | #1D1B20 md.comp.search-bar.pressed.state-layer.color
|
Search bar pressed state layer opacitymd.comp.search-bar.pressed.state-layer.opacity | 10% md.comp.search-bar.pressed.state-layer.opacity
|
Search bar pressed supporting text colormd.comp.search-bar.pressed.supporting-text.color | #49454F md.comp.search-bar.pressed.supporting-text.color
|
Focused
| Token | Value |
|---|---|
Search bar focus indicator colormd.comp.search-bar.focus.indicator.color | #625B71 md.comp.search-bar.focus.indicator.color
|
Search bar focus indicator offsetmd.comp.search-bar.focus.indicator.outline.offset | 2dp md.comp.search-bar.focus.indicator.outline.offset
|
Search bar focus indicator thicknessmd.comp.search-bar.focus.indicator.thickness | 3dp md.comp.search-bar.focus.indicator.thickness
|
Layout and Text
Contained (expressive)
| Token | Value |
|---|---|
Search bar contained avatar target sizemd.comp.search-bar.contained.avatar.target-size | 48dp md.comp.search-bar.contained.avatar.target-size |
Search bar contained icon label gapmd.comp.search-bar.contained.icon-label.gap | 4dp md.comp.search-bar.contained.icon-label.gap
|
Search bar contained pane leading marginmd.comp.search-bar.contained.leading-margin | 24dp md.comp.search-bar.contained.leading-margin
|
Search bar contained leading spacemd.comp.search-bar.contained.leading-space | 4dp md.comp.search-bar.contained.leading-space
|
Search bar contained motionmd.comp.search-bar.contained.motion.spring | — md.comp.search-bar.contained.motion.spring |
Search bar contained no actions leading spacemd.comp.search-bar.contained.no-actions.leading-space | 16dp md.comp.search-bar.contained.no-actions.leading-space
|
Search bar contained no actions trailing spacemd.comp.search-bar.contained.no-actions.trailing-space | 16dp md.comp.search-bar.contained.no-actions.trailing-space
|
Search bar contained trailing actions gapmd.comp.search-bar.contained.trailing-actions.gap | 0dp md.comp.search-bar.contained.trailing-actions.gap
|
Search bar contained trailing actions leading spacemd.comp.search-bar.contained.trailing-actions.leading-space | 4dp md.comp.search-bar.contained.trailing-actions.leading-space
|
Search bar contained trailing actions trailing spacemd.comp.search-bar.contained.trailing-actions.trailing-space | 4dp md.comp.search-bar.contained.trailing-actions.trailing-space
|
Search bar contained pane trailing marginmd.comp.search-bar.contained.trailing-margin | 24dp md.comp.search-bar.contained.trailing-margin
|
Search bar contained trailing spacemd.comp.search-bar.contained.trailing-space | 4dp md.comp.search-bar.contained.trailing-space
|
Baseline
| Token | Value |
|---|---|
Search bar leading icon leading icon label spacemd.comp.search-bar.leading-icon.leading-icon-label-space | 16dp md.comp.search-bar.leading-icon.leading-icon-label-space
|
Search bar leading spacemd.comp.search-bar.leading-space | 16dp md.comp.search-bar.leading-space
|
Search bar trailing icon label trailing icon spacemd.comp.search-bar.trailing-icon.label-trailing-icon-space | 16dp md.comp.search-bar.trailing-icon.label-trailing-icon-space
|
Search bar trailing spacemd.comp.search-bar.trailing-space | 16dp md.comp.search-bar.trailing-space
|
Common tokens
| Token | Value |
|---|---|
Search bar avatar shapemd.comp.search-bar.avatar.shape | Full md.comp.search-bar.avatar.shape
|
Search bar avatar sizemd.comp.search-bar.avatar.size | 30dp md.comp.search-bar.avatar.size |
Search bar container heightmd.comp.search-bar.container.height | 56dp md.comp.search-bar.container.height |
Search bar container shapemd.comp.search-bar.container.shape | Full md.comp.search-bar.container.shape
|
Search bar container surface tint layer colormd.comp.search-bar.container.surface-tint-layer.color | #6750A4 md.comp.search-bar.container.surface-tint-layer.color
|
Search bar icon sizemd.comp.search-bar.icon.size | 24dp md.comp.search-bar.icon.size |
Search bar input text fontmd.comp.search-bar.input-text.font | Roboto md.comp.search-bar.input-text.font
|
Search bar input text line heightmd.comp.search-bar.input-text.line-height | 24pt md.comp.search-bar.input-text.line-height
|
Search bar input text sizemd.comp.search-bar.input-text.size | 16pt md.comp.search-bar.input-text.size
|
Search bar input text trackingmd.comp.search-bar.input-text.tracking | 0.5pt md.comp.search-bar.input-text.tracking
|
Search bar input text typemd.comp.search-bar.input-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.search-bar.input-text.type
|
Search bar input text weightmd.comp.search-bar.input-text.weight | 400 md.comp.search-bar.input-text.weight
|
Search bar supporting text fontmd.comp.search-bar.supporting-text.font | Roboto md.comp.search-bar.supporting-text.font
|
Search bar supporting text line heightmd.comp.search-bar.supporting-text.line-height | 24pt md.comp.search-bar.supporting-text.line-height
|
Search bar supporting text sizemd.comp.search-bar.supporting-text.size | 16pt md.comp.search-bar.supporting-text.size
|
Search bar supporting text trackingmd.comp.search-bar.supporting-text.tracking | 0.5pt md.comp.search-bar.supporting-text.tracking
|
Search bar supporting text typemd.comp.search-bar.supporting-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.search-bar.supporting-text.type
|
Search bar supporting text weightmd.comp.search-bar.supporting-text.weight | 400 md.comp.search-bar.supporting-text.weight
|
Search - View
| Token | Value |
|---|---|
Search view container surface tint layer colormd.comp.search-view.container.surface-tint-layer.color | #6750A4 md.comp.search-view.container.surface-tint-layer.color
|
Color
| Token | Value |
|---|---|
Search view contained background colormd.comp.search-view.contained.background.color | #F7F2FA md.comp.search-view.contained.background.color
|
Search view container colormd.comp.search-view.container.color | #ECE6F0 md.comp.search-view.container.color
|
Search view container background elevationmd.comp.search-view.container.elevation | 6dp md.comp.search-view.container.elevation
|
Search view divider colormd.comp.search-view.divider.color | #79747E md.comp.search-view.divider.color
|
Search view header input text colormd.comp.search-view.header.input-text.color | #1D1B20 md.comp.search-view.header.input-text.color
|
Search view header leading icon colormd.comp.search-view.header.leading-icon.color | #1D1B20 md.comp.search-view.header.leading-icon.color
|
Search view header supporting text colormd.comp.search-view.header.supporting-text.color | #49454F md.comp.search-view.header.supporting-text.color
|
Search view header trailing icon colormd.comp.search-view.header.trailing-icon.color | #49454F md.comp.search-view.header.trailing-icon.color
|
Layout and Text
Contained (expressive)
| Token | Value |
|---|---|
Search view contained docked bar results gapmd.comp.search-view.contained.docked.bar-results.gap | 2dp md.comp.search-view.contained.docked.bar-results.gap
|
Search view contained docked bar shapemd.comp.search-view.contained.docked.bar.shape | Full md.comp.search-view.contained.docked.bar.shape
|
Search view contained docked results shapemd.comp.search-view.contained.docked.results.shape | 12dp md.comp.search-view.contained.docked.results.shape
|
Search view contained full screen bar container heightmd.comp.search-view.contained.full-screen.bar.container.height | 56dp md.comp.search-view.contained.full-screen.bar.container.height |
Search view contained icon label gapmd.comp.search-view.contained.icon-label.gap | 4dp md.comp.search-view.contained.icon-label.gap
|
Search view contained leading marginmd.comp.search-view.contained.leading-margin | 12dp md.comp.search-view.contained.leading-margin
|
Search view contained trailing marginmd.comp.search-view.contained.trailing-margin | 12dp md.comp.search-view.contained.trailing-margin
|
Divided (baseline)
| Token | Value |
|---|---|
Search view docked container shapemd.comp.search-view.docked.container.shape | 28dp md.comp.search-view.docked.container.shape
|
Search view docked header container heightmd.comp.search-view.docked.header.container.height | 56dp md.comp.search-view.docked.header.container.height |
Search view full screen header container heightmd.comp.search-view.full-screen.header.container.height | 72dp md.comp.search-view.full-screen.header.container.height |
Search view leading icon leading icon label spacemd.comp.search-view.leading-icon.leading-icon-label-space | 16dp md.comp.search-view.leading-icon.leading-icon-label-space
|
Search view leading spacemd.comp.search-view.leading-space | 16dp md.comp.search-view.leading-space
|
Search view trailing icon label trailing icon spacemd.comp.search-view.trailing-icon.label-trailing-icon-space | 16dp md.comp.search-view.trailing-icon.label-trailing-icon-space
|
Search view trailing spacemd.comp.search-view.trailing-space | 16dp md.comp.search-view.trailing-space
|
Common tokens
| Token | Value |
|---|---|
Search view full screen container shapemd.comp.search-view.full-screen.container.shape | 0dp md.comp.search-view.full-screen.container.shape
|
Search view header input text fontmd.comp.search-view.header.input-text.font | Roboto md.comp.search-view.header.input-text.font
|
Search view header input text line heightmd.comp.search-view.header.input-text.line-height | 24pt md.comp.search-view.header.input-text.line-height
|
Search view header input text sizemd.comp.search-view.header.input-text.size | 16pt md.comp.search-view.header.input-text.size
|
Search view header input text trackingmd.comp.search-view.header.input-text.tracking | 0.5pt md.comp.search-view.header.input-text.tracking
|
Search view header input text typemd.comp.search-view.header.input-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.search-view.header.input-text.type
|
Search view header input text weightmd.comp.search-view.header.input-text.weight | 400 md.comp.search-view.header.input-text.weight
|
Search view header supporting text fontmd.comp.search-view.header.supporting-text.font | Roboto md.comp.search-view.header.supporting-text.font
|
Search view header supporting text line heightmd.comp.search-view.header.supporting-text.line-height | 24pt md.comp.search-view.header.supporting-text.line-height
|
Search view header supporting text sizemd.comp.search-view.header.supporting-text.size | 16pt md.comp.search-view.header.supporting-text.size
|
Search view header supporting text trackingmd.comp.search-view.header.supporting-text.tracking | 0.5pt md.comp.search-view.header.supporting-text.tracking
|
Search view header supporting text typemd.comp.search-view.header.supporting-text.type | Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt md.comp.search-view.header.supporting-text.type
|
Search view header supporting text weightmd.comp.search-view.header.supporting-text.weight | 400 md.comp.search-view.header.supporting-text.weight
|