Top app bar
The Design System uses only the Center Aligned Material Design Top app bar.
- 1: Container
- 2: Headline
- 3: Leading standard icon button (optional)
- 4: Trailing standard icon button (optional)
- 4: Text Button (optional)
Specs
Details
Container
| Token | Value |
|---|---|
| ds.comp.topAppBar.containerColor | ds.sys.color.surfaceContainer |
| ds.comp.topAppBar.containerElevation | ds.sys.elevation.level3 |
| ds.comp.topAppBar.containerHeight | 64dp |
| ds.comp.topAppBar.containerPaddingHorizontal | 16dp |
| ds.comp.topAppBar.containerGap | 24dp |
Details
Headline
| Token | Value |
|---|---|
| ds.comp.topAppBar.headlineTypeScale | ds.sys.typeface.titleMedium |
| ds.comp.topAppBar.headlineColor | ds.sys.color.onSurface |
Details
Leading Standard Icon Button
| Token | Value |
|---|---|
| ds.comp.topAppBar.leadingIconButtonColor | ds.sys.color.onSurface |