compose-preview Material 3 Design Kit

Top App Bar Small

topappbar-small__ideal__default__dark__compact__configuration-large 4 views
Theme Dark
current

Every publish of this design system is a commit on its delivery branch. Opening one pins this page — and the pixels on it — to that publish for good.

The app bar. Its four sizes, centred, image and search layouts, nav icon and actions fold in.

Top App Bar Small
View
Size
Exploded 3D
One sheet per visible drawing level. Structural-only composables are kept in the next sheet's breadcrumb. Rides the SVG link and download.
Locale & text
Overlays
Inspect
Overlays (Live Compose)
Overrides
Declared overrides — edit a value to re-render.

Compare30 variants of Top App Bar Small, against Design reference

  1. ideal/default/dark/compactnot scored
  2. ideal/default/dark/compact/configuration-largeon the stagenot scored
  3. ideal/default/dark/compact/configuration-mediumnot scored
  4. ideal/default/dark/compact/configuration-searchnot scored
  5. ideal/default/dark/compact/configuration-small-centerednot scored
  6. ideal/default/light/compact97.1%diff →
  7. ideal/default/light/compact/configuration-large88.6%diff →
  8. ideal/default/light/compact/configuration-medium94.3%diff →
  9. ideal/default/light/compact/configuration-search96.7%diff →
  10. ideal/default/light/compact/configuration-small-centered97.2%diff →
  11. ideal/no-actions/compactnot scored
  12. ideal/no-actions/compact/configuration-small-centerednot scored
  13. ideal/no-actions/dark/compactnot scored
  14. ideal/no-actions/dark/compact/configuration-small-centerednot scored
  15. ideal/no-nav/compactnot scored
  16. ideal/no-nav/compact/configuration-small-centerednot scored
  17. ideal/no-nav/dark/compactnot scored
  18. ideal/no-nav/dark/compact/configuration-small-centerednot scored
  19. ideal/on-scroll/compact98.3%diff →
  20. ideal/on-scroll/dark/compactnot scored
  21. ideal/query/compact/configuration-searchnot scored
  22. ideal/query/dark/compact/configuration-searchnot scored
  23. ideal/small-image/compact98.2%diff →
  24. ideal/small-image/dark/compactnot scored
  25. ideal/two-actions/compactnot scored
  26. ideal/two-actions/compact/configuration-largenot scored
  27. ideal/two-actions/compact/configuration-mediumnot scored
  28. ideal/two-actions/dark/compactnot scored
  29. ideal/two-actions/dark/compact/configuration-largenot scored
  30. ideal/two-actions/dark/compact/configuration-mediumnot scored

every component →

source

▶ playground

report a catalog issue
Applied as a parity: label, so the catalog’s issue index can tell a difference that is ours from one that is not. Leave it on needs investigating if you are not sure — that is what it is for.Files against yschimke/m3-catalog — the project whose code declares this preview, not the preview server. The rest of the report — what you were looking at, which build, the links — is filled in for you on GitHub.
Export PNG Download SVG Download

Report a problem

Two trackers — pick whichever owns the thing that is wrong.