Material Design 3 "App Bar" tokens: All tokens

App bar - Common

Color

Color tokens
Token	Value
App bar container color`md.comp.app-bar.container.color`	#FEF7FF `md.comp.app-bar.container.color` `md.sys.color.surface` `md.ref.palette.neutral98`
App bar container elevation`md.comp.app-bar.container.elevation`	0dp `md.comp.app-bar.container.elevation` `md.sys.elevation.level0`
App bar leading icon `md.comp.app-bar.leading-icon.color`	#1D1B20 `md.comp.app-bar.leading-icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
App bar container color on scroll`md.comp.app-bar.on-scroll.container.color`	#F3EDF7 `md.comp.app-bar.on-scroll.container.color` `md.sys.color.surface-container` `md.ref.palette.neutral94`
App bar container elevation on scroll`md.comp.app-bar.on-scroll.container.elevation`	3dp `md.comp.app-bar.on-scroll.container.elevation` `md.sys.elevation.level2`
Search container color`md.comp.app-bar.search.container.color`	#F3EDF7 `md.comp.app-bar.search.container.color` `md.sys.color.surface-container` `md.ref.palette.neutral94`
Search label color`md.comp.app-bar.search.label.color`	#49454F `md.comp.app-bar.search.label.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Search container color on scroll`md.comp.app-bar.search.on-scroll.container.color`	#E6E0E9 `md.comp.app-bar.search.on-scroll.container.color` `md.sys.color.surface-container-highest` `md.ref.palette.neutral90`
App bar subtitle text`md.comp.app-bar.subtitle.color`	#49454F `md.comp.app-bar.subtitle.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
App bar title text`md.comp.app-bar.title.color`	#1D1B20 `md.comp.app-bar.title.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
App bar trailing icon `md.comp.app-bar.trailing-icon.color`	#49454F `md.comp.app-bar.trailing-icon.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`

Spacing

Spacing tokens
Token	Value
App bar icon spacing`md.comp.app-bar.icon-button-space`	0dp `md.comp.app-bar.icon-button-space` `md.sys.measurement.space0`
App bar left padding`md.comp.app-bar.leading-space`	4dp `md.comp.app-bar.leading-space` `md.sys.measurement.space50`
Search left padding`md.comp.app-bar.search.leading-space`	8dp `md.comp.app-bar.search.leading-space` `md.sys.measurement.space100`
Search right padding`md.comp.app-bar.search.trailing-space`	8dp `md.comp.app-bar.search.trailing-space` `md.sys.measurement.space100`
App bar right padding`md.comp.app-bar.trailing-space`	4dp `md.comp.app-bar.trailing-space` `md.sys.measurement.space50`

Shape

Shape tokens
Token	Value
App bar container shape`md.comp.app-bar.container.shape`	0dp `md.comp.app-bar.container.shape` `md.sys.shape.corner.none`

Size

Size tokens
Token	Value
App bar avatar size`md.comp.app-bar.avatar.size`	32dp `md.comp.app-bar.avatar.size`
App bar icon size`md.comp.app-bar.icon.size`	24dp `md.comp.app-bar.icon.size`

App bar - Size - Large (baseline)

tokens
Token	Value
App bar large container height`md.comp.app-bar.large.container.height`	152dp `md.comp.app-bar.large.container.height`
App bar large icon button size`md.comp.app-bar.large.icon.size`	24dp `md.comp.app-bar.large.icon.size`
App bar large subtitle font`md.comp.app-bar.large.subtitle.font`	Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt `md.comp.app-bar.large.subtitle.font` `md.sys.typescale.title-medium` `md.sys.typescale.title-medium.font` `md.ref.typeface.plain` `md.sys.typescale.title-medium.weight` `md.ref.typeface.weight-medium` `md.sys.typescale.title-medium.size` `md.sys.typescale.title-medium.line-height` `md.sys.typescale.title-medium.tracking`
App bar large title font`md.comp.app-bar.large.title.font`	Roboto · 28pt · weight 400 · line height 36pt · tracking 0pt `md.comp.app-bar.large.title.font` `md.sys.typescale.headline-medium` `md.sys.typescale.headline-medium.font` `md.ref.typeface.brand` `md.sys.typescale.headline-medium.weight` `md.ref.typeface.weight-regular` `md.sys.typescale.headline-medium.size` `md.sys.typescale.headline-medium.line-height` `md.sys.typescale.headline-medium.tracking`

App bar - Size - Large Flexible

tokens
Token	Value
App bar large flexible container height`md.comp.app-bar.large-flexible.container.height`	120dp `md.comp.app-bar.large-flexible.container.height`
App bar large Subtitle font`md.comp.app-bar.large-flexible.subtitle.font`	Roboto · 16pt · weight 500 · line height 24pt · tracking 0.15pt `md.comp.app-bar.large-flexible.subtitle.font` `md.sys.typescale.title-medium` `md.sys.typescale.title-medium.font` `md.ref.typeface.plain` `md.sys.typescale.title-medium.weight` `md.ref.typeface.weight-medium` `md.sys.typescale.title-medium.size` `md.sys.typescale.title-medium.line-height` `md.sys.typescale.title-medium.tracking`
App bar large Title font`md.comp.app-bar.large-flexible.title.font`	Roboto · 36pt · weight 400 · line height 44pt · tracking 0pt `md.comp.app-bar.large-flexible.title.font` `md.sys.typescale.display-small` `md.sys.typescale.display-small.font` `md.ref.typeface.brand` `md.sys.typescale.display-small.weight` `md.ref.typeface.weight-regular` `md.sys.typescale.display-small.size` `md.sys.typescale.display-small.line-height` `md.sys.typescale.display-small.tracking`
App bar large flexible container height with subtitle`md.comp.app-bar.large-flexible.with-subtitle.container.height`	152dp `md.comp.app-bar.large-flexible.with-subtitle.container.height`

App bar - Size - Medium (baseline)

tokens
Token	Value
App bar medium container height`md.comp.app-bar.medium.container.height`	112dp `md.comp.app-bar.medium.container.height`
App bar medium icon button size`md.comp.app-bar.medium.icon.size`	24dp `md.comp.app-bar.medium.icon.size`
App bar medium subtitle font`md.comp.app-bar.medium.subtitle.font`	Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt `md.comp.app-bar.medium.subtitle.font` `md.sys.typescale.label-large` `md.sys.typescale.label-large.font` `md.ref.typeface.plain` `md.sys.typescale.label-large.weight` `md.ref.typeface.weight-medium` `md.sys.typescale.label-large.size` `md.sys.typescale.label-large.line-height` `md.sys.typescale.label-large.tracking`
App bar medium title font`md.comp.app-bar.medium.title.font`	Roboto · 24pt · weight 400 · line height 32pt · tracking 0pt `md.comp.app-bar.medium.title.font` `md.sys.typescale.headline-small` `md.sys.typescale.headline-small.font` `md.ref.typeface.brand` `md.sys.typescale.headline-small.weight` `md.ref.typeface.weight-regular` `md.sys.typescale.headline-small.size` `md.sys.typescale.headline-small.line-height` `md.sys.typescale.headline-small.tracking`

App bar - Size - Medium Flexible

tokens
Token	Value
App bar medium flexible container height`md.comp.app-bar.medium-flexible.container.height`	112dp `md.comp.app-bar.medium-flexible.container.height`
App bar medium Subtitle font`md.comp.app-bar.medium-flexible.subtitle.font`	Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt `md.comp.app-bar.medium-flexible.subtitle.font` `md.sys.typescale.label-large` `md.sys.typescale.label-large.font` `md.ref.typeface.plain` `md.sys.typescale.label-large.weight` `md.ref.typeface.weight-medium` `md.sys.typescale.label-large.size` `md.sys.typescale.label-large.line-height` `md.sys.typescale.label-large.tracking`
App bar medium Title font`md.comp.app-bar.medium-flexible.title.font`	Roboto · 28pt · weight 400 · line height 36pt · tracking 0pt `md.comp.app-bar.medium-flexible.title.font` `md.sys.typescale.headline-medium` `md.sys.typescale.headline-medium.font` `md.ref.typeface.brand` `md.sys.typescale.headline-medium.weight` `md.ref.typeface.weight-regular` `md.sys.typescale.headline-medium.size` `md.sys.typescale.headline-medium.line-height` `md.sys.typescale.headline-medium.tracking`
App bar medium flexible container height with subtitle`md.comp.app-bar.medium-flexible.with-subtitle.container.height`	136dp `md.comp.app-bar.medium-flexible.with-subtitle.container.height`

App bar - Size - Small

tokens
Token	Value
App bar small container height`md.comp.app-bar.small.container.height`	64dp `md.comp.app-bar.small.container.height`
App bar small icon button size`md.comp.app-bar.small.icon.size`	24dp `md.comp.app-bar.small.icon.size`
Search container height`md.comp.app-bar.small.search.container.height`	56dp `md.comp.app-bar.small.search.container.height`
Search container shape`md.comp.app-bar.small.search.container.shape`	Full `md.comp.app-bar.small.search.container.shape` `md.sys.shape.corner.full`
Search title font`md.comp.app-bar.small.search.label-text.font`	Roboto · 16pt · weight 400 · line height 24pt · tracking 0.5pt `md.comp.app-bar.small.search.label-text.font` `md.sys.typescale.body-large` `md.sys.typescale.body-large.font` `md.ref.typeface.plain` `md.sys.typescale.body-large.weight` `md.ref.typeface.weight-regular` `md.sys.typescale.body-large.size` `md.sys.typescale.body-large.line-height` `md.sys.typescale.body-large.tracking`
App bar small subtitle font`md.comp.app-bar.small.subtitle.font`	Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt `md.comp.app-bar.small.subtitle.font` `md.sys.typescale.label-medium` `md.sys.typescale.label-medium.font` `md.ref.typeface.plain` `md.sys.typescale.label-medium.weight` `md.ref.typeface.weight-medium` `md.sys.typescale.label-medium.size` `md.sys.typescale.label-medium.line-height` `md.sys.typescale.label-medium.tracking`
App bar small title font`md.comp.app-bar.small.title.font`	Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt `md.comp.app-bar.small.title.font` `md.sys.typescale.title-large` `md.sys.typescale.title-large.font` `md.ref.typeface.brand` `md.sys.typescale.title-large.weight` `md.ref.typeface.weight-regular` `md.sys.typescale.title-large.size` `md.sys.typescale.title-large.line-height` `md.sys.typescale.title-large.tracking`

[Deprecated] Top app bar - Large

[Deprecated] Enabled

[Deprecated] Container

[Deprecated] Container tokens
Token	Value
Top app bar (large) container color`md.comp.top-app-bar.large.container.color`	#FEF7FF `md.comp.top-app-bar.large.container.color` `md.sys.color.surface` `md.ref.palette.neutral98`
Top app bar (large) container elevation`md.comp.top-app-bar.large.container.elevation`	0dp `md.comp.top-app-bar.large.container.elevation` `md.sys.elevation.level0`
Top app bar (large) container height`md.comp.top-app-bar.large.container.height`	152dp `md.comp.top-app-bar.large.container.height`
Top app bar (large) container shape`md.comp.top-app-bar.large.container.shape`	0dp `md.comp.top-app-bar.large.container.shape` `md.sys.shape.corner.none`
Top app bar (large) container surface tint layer color`md.comp.top-app-bar.large.container.surface-tint-layer.color`	#6750A4 `md.comp.top-app-bar.large.container.surface-tint-layer.color` `md.sys.color.surface-tint` `md.sys.color.primary` `md.ref.palette.primary40`

[Deprecated] Leading icon

[Deprecated] Leading icon tokens
Token	Value
Top app bar (large) leading icon color`md.comp.top-app-bar.large.leading-icon.color`	#1D1B20 `md.comp.top-app-bar.large.leading-icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Top app bar (large) leading icon size`md.comp.top-app-bar.large.leading-icon.size`	24dp `md.comp.top-app-bar.large.leading-icon.size`

[Deprecated] Trailing icon

[Deprecated] Trailing icon tokens
Token	Value
Top app bar (large) trailing icon color`md.comp.top-app-bar.large.trailing-icon.color`	#49454F `md.comp.top-app-bar.large.trailing-icon.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Top app bar (large) trailing icon size`md.comp.top-app-bar.large.trailing-icon.size`	24dp `md.comp.top-app-bar.large.trailing-icon.size`

[Deprecated] Headline

[Deprecated] Headline tokens
Token	Value
Top app bar (large) headline color`md.comp.top-app-bar.large.headline.color`	#1D1B20 `md.comp.top-app-bar.large.headline.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Top app bar (large) headline font`md.comp.top-app-bar.large.headline.font`	Roboto `md.comp.top-app-bar.large.headline.font` `md.sys.typescale.headline-medium.font` `md.ref.typeface.brand`
Top app bar (large) headline height`md.comp.top-app-bar.large.headline.line-height`	36pt `md.comp.top-app-bar.large.headline.line-height` `md.sys.typescale.headline-medium.line-height`
Top app bar (large) headline size`md.comp.top-app-bar.large.headline.size`	28pt `md.comp.top-app-bar.large.headline.size` `md.sys.typescale.headline-medium.size`
Top app bar (large) headline tracking`md.comp.top-app-bar.large.headline.tracking`	0pt `md.comp.top-app-bar.large.headline.tracking` `md.sys.typescale.headline-medium.tracking`
Type style`md.comp.top-app-bar.large.headline.type`	Roboto · 28pt · weight 400 · line height 36pt · tracking 0pt `md.comp.top-app-bar.large.headline.type` `md.comp.top-app-bar.large.headline.font` `md.sys.typescale.headline-medium.font` `md.ref.typeface.brand` `md.comp.top-app-bar.large.headline.weight` `md.sys.typescale.headline-medium.weight` `md.ref.typeface.weight-regular` `md.comp.top-app-bar.large.headline.size` `md.sys.typescale.headline-medium.size` `md.comp.top-app-bar.large.headline.line-height` `md.sys.typescale.headline-medium.line-height` `md.comp.top-app-bar.large.headline.tracking` `md.sys.typescale.headline-medium.tracking`
Top app bar (large) headline weight`md.comp.top-app-bar.large.headline.weight`	400 `md.comp.top-app-bar.large.headline.weight` `md.sys.typescale.headline-medium.weight` `md.ref.typeface.weight-regular`

[Deprecated] Top app bar - Medium

[Deprecated] Enabled

[Deprecated] Container

[Deprecated] Container tokens
Token	Value
Top app bar (medium) container color`md.comp.top-app-bar.medium.container.color`	#FEF7FF `md.comp.top-app-bar.medium.container.color` `md.sys.color.surface` `md.ref.palette.neutral98`
Top app bar (medium) container elevation`md.comp.top-app-bar.medium.container.elevation`	0dp `md.comp.top-app-bar.medium.container.elevation` `md.sys.elevation.level0`
Top app bar (medium) container height`md.comp.top-app-bar.medium.container.height`	112dp `md.comp.top-app-bar.medium.container.height`
Top app bar (medium) container shape`md.comp.top-app-bar.medium.container.shape`	0dp `md.comp.top-app-bar.medium.container.shape` `md.sys.shape.corner.none`
Top app bar (medium) container surface tint layer color`md.comp.top-app-bar.medium.container.surface-tint-layer.color`	#6750A4 `md.comp.top-app-bar.medium.container.surface-tint-layer.color` `md.sys.color.surface-tint` `md.sys.color.primary` `md.ref.palette.primary40`

[Deprecated] Leading icon

[Deprecated] Leading icon tokens
Token	Value
Top app bar (medium) leading icon color`md.comp.top-app-bar.medium.leading-icon.color`	#1D1B20 `md.comp.top-app-bar.medium.leading-icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Top app bar (medium) leading icon size`md.comp.top-app-bar.medium.leading-icon.size`	24dp `md.comp.top-app-bar.medium.leading-icon.size`

[Deprecated] Trailing icon

[Deprecated] Trailing icon tokens
Token	Value
Top app bar (medium) trailing icon color`md.comp.top-app-bar.medium.trailing-icon.color`	#49454F `md.comp.top-app-bar.medium.trailing-icon.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Top app bar (medium) trailing icon size`md.comp.top-app-bar.medium.trailing-icon.size`	24dp `md.comp.top-app-bar.medium.trailing-icon.size`

[Deprecated] Headline

[Deprecated] Headline tokens
Token	Value
Top app bar (medium) headline color`md.comp.top-app-bar.medium.headline.color`	#1D1B20 `md.comp.top-app-bar.medium.headline.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Top app bar (medium) headline font`md.comp.top-app-bar.medium.headline.font`	Roboto `md.comp.top-app-bar.medium.headline.font` `md.sys.typescale.headline-small.font` `md.ref.typeface.brand`
Top app bar (medium) headline height`md.comp.top-app-bar.medium.headline.line-height`	32pt `md.comp.top-app-bar.medium.headline.line-height` `md.sys.typescale.headline-small.line-height`
Top app bar (medium) headline size`md.comp.top-app-bar.medium.headline.size`	24pt `md.comp.top-app-bar.medium.headline.size` `md.sys.typescale.headline-small.size`
Top app bar (medium) headline tracking`md.comp.top-app-bar.medium.headline.tracking`	0pt `md.comp.top-app-bar.medium.headline.tracking` `md.sys.typescale.headline-small.tracking`
Type style`md.comp.top-app-bar.medium.headline.type`	Roboto · 24pt · weight 400 · line height 32pt · tracking 0pt `md.comp.top-app-bar.medium.headline.type` `md.comp.top-app-bar.medium.headline.font` `md.sys.typescale.headline-small.font` `md.ref.typeface.brand` `md.comp.top-app-bar.medium.headline.weight` `md.sys.typescale.headline-small.weight` `md.ref.typeface.weight-regular` `md.comp.top-app-bar.medium.headline.size` `md.sys.typescale.headline-small.size` `md.comp.top-app-bar.medium.headline.line-height` `md.sys.typescale.headline-small.line-height` `md.comp.top-app-bar.medium.headline.tracking` `md.sys.typescale.headline-small.tracking`
Top app bar (medium) headline weight`md.comp.top-app-bar.medium.headline.weight`	400 `md.comp.top-app-bar.medium.headline.weight` `md.sys.typescale.headline-small.weight` `md.ref.typeface.weight-regular`

[Deprecated] Top app bar - Small, Center-aligned

Enabled

Avatar

Avatar tokens
Token	Value
Top app bar (small) on scroll avatar shape`md.comp.top-app-bar.small.centered.avatar.shape`	Full `md.comp.top-app-bar.small.centered.avatar.shape` `md.sys.shape.corner.full`
Top app bar (small) on scroll avatar size`md.comp.top-app-bar.small.centered.avatar.size`	30dp `md.comp.top-app-bar.small.centered.avatar.size`

Container

Container tokens
Token	Value
Top app bar (small centered) container color`md.comp.top-app-bar.small.centered.container.color`	#FEF7FF `md.comp.top-app-bar.small.centered.container.color` `md.sys.color.surface` `md.ref.palette.neutral98`
Top app bar (small centered) container elevation`md.comp.top-app-bar.small.centered.container.elevation`	0dp `md.comp.top-app-bar.small.centered.container.elevation` `md.sys.elevation.level0`
Top app bar (small centered) container height`md.comp.top-app-bar.small.centered.container.height`	64dp `md.comp.top-app-bar.small.centered.container.height`
Top app bar (small centered) container shape`md.comp.top-app-bar.small.centered.container.shape`	0dp `md.comp.top-app-bar.small.centered.container.shape` `md.sys.shape.corner.none`
Top app bar (small centered) container surface tint layer color`md.comp.top-app-bar.small.centered.container.surface-tint-layer.color`	#6750A4 `md.comp.top-app-bar.small.centered.container.surface-tint-layer.color` `md.sys.color.surface-tint` `md.sys.color.primary` `md.ref.palette.primary40`
Top app bar (small centered) on-scroll container color`md.comp.top-app-bar.small.centered.on-scroll.container.color`	#F3EDF7 `md.comp.top-app-bar.small.centered.on-scroll.container.color` `md.sys.color.surface-container` `md.ref.palette.neutral94`
Top app bar (small) on scroll container shadow color`md.comp.top-app-bar.small.centered.on-scroll.container.shadow-color`	#000000 `md.comp.top-app-bar.small.centered.on-scroll.container.shadow-color` `md.sys.color.shadow` `md.ref.palette.neutral0`

Leading icon

Leading icon tokens
Token	Value
Top app bar (small centered) leading icon color`md.comp.top-app-bar.small.centered.leading-icon.color`	#1D1B20 `md.comp.top-app-bar.small.centered.leading-icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Top app bar (small centered) leading icon size`md.comp.top-app-bar.small.centered.leading-icon.size`	24dp `md.comp.top-app-bar.small.centered.leading-icon.size`

Trailing icon

Trailing icon tokens
Token	Value
Top app bar (small centered) trailing icon color`md.comp.top-app-bar.small.centered.trailing-icon.color`	#49454F `md.comp.top-app-bar.small.centered.trailing-icon.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Top app bar (small centered) trailing icon size`md.comp.top-app-bar.small.centered.trailing-icon.size`	24dp `md.comp.top-app-bar.small.centered.trailing-icon.size`

Headline

Headline tokens
Token	Value
Top app bar (small centered) headline color`md.comp.top-app-bar.small.centered.headline.color`	#1D1B20 `md.comp.top-app-bar.small.centered.headline.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Top app bar (small centered) headline font`md.comp.top-app-bar.small.centered.headline.font`	Roboto `md.comp.top-app-bar.small.centered.headline.font` `md.sys.typescale.title-large.font` `md.ref.typeface.brand`
Top app bar (small centered) headline height`md.comp.top-app-bar.small.centered.headline.line-height`	28pt `md.comp.top-app-bar.small.centered.headline.line-height` `md.sys.typescale.title-large.line-height`
Top app bar (small centered) headline size`md.comp.top-app-bar.small.centered.headline.size`	22pt `md.comp.top-app-bar.small.centered.headline.size` `md.sys.typescale.title-large.size`
Top app bar (small centered) headline tracking`md.comp.top-app-bar.small.centered.headline.tracking`	0pt `md.comp.top-app-bar.small.centered.headline.tracking` `md.sys.typescale.title-large.tracking`
Type style`md.comp.top-app-bar.small.centered.headline.type`	Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt `md.comp.top-app-bar.small.centered.headline.type` `md.comp.top-app-bar.small.centered.headline.font` `md.sys.typescale.title-large.font` `md.ref.typeface.brand` `md.comp.top-app-bar.small.centered.headline.weight` `md.sys.typescale.title-large.weight` `md.ref.typeface.weight-regular` `md.comp.top-app-bar.small.centered.headline.size` `md.sys.typescale.title-large.size` `md.comp.top-app-bar.small.centered.headline.line-height` `md.sys.typescale.title-large.line-height` `md.comp.top-app-bar.small.centered.headline.tracking` `md.sys.typescale.title-large.tracking`
Top app bar (small centered) headline weight`md.comp.top-app-bar.small.centered.headline.weight`	400 `md.comp.top-app-bar.small.centered.headline.weight` `md.sys.typescale.title-large.weight` `md.ref.typeface.weight-regular`

On scroll

On scroll tokens
Token	Value
Top app bar (small) on scroll container elevation`md.comp.top-app-bar.small.centered.on-scroll.container.elevation`	3dp `md.comp.top-app-bar.small.centered.on-scroll.container.elevation` `md.sys.elevation.level2`

[Deprecated] Top app bar - Small

[Deprecated] Enabled

[Deprecated] Container

[Deprecated] Container tokens
Token	Value
Top app bar (small) container color`md.comp.top-app-bar.small.container.color`	#FEF7FF `md.comp.top-app-bar.small.container.color` `md.sys.color.surface` `md.ref.palette.neutral98`
Top app bar (small) container elevation`md.comp.top-app-bar.small.container.elevation`	0dp `md.comp.top-app-bar.small.container.elevation` `md.sys.elevation.level0`
Top app bar (small) container height`md.comp.top-app-bar.small.container.height`	64dp `md.comp.top-app-bar.small.container.height`
Top app bar (small) container shape`md.comp.top-app-bar.small.container.shape`	0dp `md.comp.top-app-bar.small.container.shape` `md.sys.shape.corner.none`
Top app bar (small) container surface tint layer color`md.comp.top-app-bar.small.container.surface-tint-layer.color`	#6750A4 `md.comp.top-app-bar.small.container.surface-tint-layer.color` `md.sys.color.surface-tint` `md.sys.color.primary` `md.ref.palette.primary40`
Top app bar (small) on-scroll container color`md.comp.top-app-bar.small.on-scroll.container.color`	#F3EDF7 `md.comp.top-app-bar.small.on-scroll.container.color` `md.sys.color.surface-container` `md.ref.palette.neutral94`
Top app bar (small) on scroll container shadow color`md.comp.top-app-bar.small.on-scroll.container.shadow-color`	#000000 `md.comp.top-app-bar.small.on-scroll.container.shadow-color` `md.sys.color.shadow` `md.ref.palette.neutral0`

[Deprecated] Leading icon

[Deprecated] Leading icon tokens
Token	Value
Top app bar (small) leading icon color`md.comp.top-app-bar.small.leading-icon.color`	#1D1B20 `md.comp.top-app-bar.small.leading-icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Top app bar (small) leading icon size`md.comp.top-app-bar.small.leading-icon.size`	24dp `md.comp.top-app-bar.small.leading-icon.size`

[Deprecated] Trailing icon

[Deprecated] Trailing icon tokens
Token	Value
Top app bar (small) trailing icon color`md.comp.top-app-bar.small.trailing-icon.color`	#49454F `md.comp.top-app-bar.small.trailing-icon.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Top app bar (small) trailing icon size`md.comp.top-app-bar.small.trailing-icon.size`	24dp `md.comp.top-app-bar.small.trailing-icon.size`

[Deprecated] Headline

[Deprecated] Headline tokens
Token	Value
Top app bar (small) headline color`md.comp.top-app-bar.small.headline.color`	#1D1B20 `md.comp.top-app-bar.small.headline.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Top app bar (small) headline font`md.comp.top-app-bar.small.headline.font`	Roboto `md.comp.top-app-bar.small.headline.font` `md.sys.typescale.title-large.font` `md.ref.typeface.brand`
Top app bar (small) headline height`md.comp.top-app-bar.small.headline.line-height`	28pt `md.comp.top-app-bar.small.headline.line-height` `md.sys.typescale.title-large.line-height`
Top app bar (small) headline size`md.comp.top-app-bar.small.headline.size`	22pt `md.comp.top-app-bar.small.headline.size` `md.sys.typescale.title-large.size`
Top app bar (small) headline tracking`md.comp.top-app-bar.small.headline.tracking`	0pt `md.comp.top-app-bar.small.headline.tracking` `md.sys.typescale.title-large.tracking`
Type style`md.comp.top-app-bar.small.headline.type`	Roboto · 22pt · weight 400 · line height 28pt · tracking 0pt `md.comp.top-app-bar.small.headline.type` `md.comp.top-app-bar.small.headline.font` `md.sys.typescale.title-large.font` `md.ref.typeface.brand` `md.comp.top-app-bar.small.headline.weight` `md.sys.typescale.title-large.weight` `md.ref.typeface.weight-regular` `md.comp.top-app-bar.small.headline.size` `md.sys.typescale.title-large.size` `md.comp.top-app-bar.small.headline.line-height` `md.sys.typescale.title-large.line-height` `md.comp.top-app-bar.small.headline.tracking` `md.sys.typescale.title-large.tracking`
Top app bar (small) headline weight`md.comp.top-app-bar.small.headline.weight`	400 `md.comp.top-app-bar.small.headline.weight` `md.sys.typescale.title-large.weight` `md.ref.typeface.weight-regular`

[Deprecated] On scroll

[Deprecated] On scroll tokens
Token	Value
Top app bar (small) on scroll container elevation`md.comp.top-app-bar.small.on-scroll.container.elevation`	3dp `md.comp.top-app-bar.small.on-scroll.container.elevation` `md.sys.elevation.level2`

Material Design 3 "App Bar" tokens: All tokens

Preview

Title

Title

Title

Title

Title

Title

Title

Title

Title

Title

Browse tokens

See more values