compose-preview Material 3 Design Kit

Toolbars

4 of 139 components implemented · Open in Figma

Show
Diff against
Marks

Double-click a section to zoom · ⌘/Ctrl-scroll · drag to pan · + / − / 0 by keyboard · Esc resets

State=Enabled — no code behind this State=Hovered — no code behind this State=Focused — no code behind this State=Pressed — no code behind this State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Hovered — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Selected=True, State=Hovered — no code behind this State=Enabled — no code behind this State=Hovered — no code behind this State=Focused — no code behind this State=Pressed — no code behind this State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Hovered — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=False, State=Focused — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Hovered — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Configuration=Floating, Orientation=Horizontal, Color=Standard — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Toolbars.kt#HorizontalFloatingToolbarSticker Configuration=Docked, Orientation=Horizontal, Color=Standard — no code behind this Configuration=Floating, Orientation=Horizontal, Color=Vibrant — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Toolbars.kt#HorizontalFloatingToolbarSticker Configuration=Docked, Orientation=Horizontal, Color=Vibrant — no code behind this Configuration=Floating, Orientation=Vertical, Color=Standard — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Toolbars.kt#HorizontalFloatingToolbarSticker Configuration=Floating, Orientation=Vertical, Color=Vibrant — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Toolbars.kt#HorizontalFloatingToolbarSticker Elevation=Surface container, Orientation=Horizontal — no code behind this Elevation=Surface container high, Orientation=Horizontal — no code behind this Elevation=Surface container highest, Orientation=Horizontal — no code behind this Elevation=Tertiary container, Orientation=Horizontal — no code behind this Elevation=Surface container, Orientation=Vertical — no code behind this Elevation=Surface container high, Orientation=Vertical — no code behind this Elevation=Surface container highest, Orientation=Vertical — no code behind this Elevation=Tertiary container, Orientation=Vertical — no code behind this State=Enabled — no code behind this State=Hovered — no code behind this State=Focused — no code behind this State=Pressed — no code behind this State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Hovered — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Selected=True, State=Hovered — no code behind this State=Enabled — no code behind this State=Hovered — no code behind this State=Focused — no code behind this State=Pressed — no code behind this State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Hovered — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Selected=True, State=Hovered — no code behind this State=Enabled — no code behind this State=Hovered — no code behind this State=Focused — no code behind this State=Pressed — no code behind this State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Hovered — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Selected=False, State=Enabled — no code behind this Selected=False, State=Hovered — no code behind this Selected=False, State=Focused — no code behind this Selected=False, State=Pressed — no code behind this Selected=False, State=Disabled — no code behind this Selected=True, State=Enabled — no code behind this Selected=True, State=Focused — no code behind this Selected=True, State=Pressed — no code behind this Selected=True, State=Disabled — no code behind this Selected=True, State=Hovered — no code behind this
4 of 139 components implemented
State=Enabledno code behind this State=Hoveredno code behind this State=Focusedno code behind this State=Pressedno code behind this State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Hoveredno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Selected=True, State=Hoveredno code behind this State=Enabledno code behind this State=Hoveredno code behind this State=Focusedno code behind this State=Pressedno code behind this State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Hoveredno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=False, State=Focusedno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Hoveredno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Configuration=Floating, Orientation=Horizontal, Color=Standardcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Toolbars.kt#HorizontalFloatingToolbarSticker Configuration=Docked, Orientation=Horizontal, Color=Standardno code behind this Configuration=Floating, Orientation=Horizontal, Color=Vibrantcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Toolbars.kt#HorizontalFloatingToolbarSticker Configuration=Docked, Orientation=Horizontal, Color=Vibrantno code behind this Configuration=Floating, Orientation=Vertical, Color=Standardcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Toolbars.kt#HorizontalFloatingToolbarSticker Configuration=Floating, Orientation=Vertical, Color=Vibrantcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Toolbars.kt#HorizontalFloatingToolbarSticker Elevation=Surface container, Orientation=Horizontalno code behind this Elevation=Surface container high, Orientation=Horizontalno code behind this Elevation=Surface container highest, Orientation=Horizontalno code behind this Elevation=Tertiary container, Orientation=Horizontalno code behind this Elevation=Surface container, Orientation=Verticalno code behind this Elevation=Surface container high, Orientation=Verticalno code behind this Elevation=Surface container highest, Orientation=Verticalno code behind this Elevation=Tertiary container, Orientation=Verticalno code behind this State=Enabledno code behind this State=Hoveredno code behind this State=Focusedno code behind this State=Pressedno code behind this State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Hoveredno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Selected=True, State=Hoveredno code behind this State=Enabledno code behind this State=Hoveredno code behind this State=Focusedno code behind this State=Pressedno code behind this State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Hoveredno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Selected=True, State=Hoveredno code behind this State=Enabledno code behind this State=Hoveredno code behind this State=Focusedno code behind this State=Pressedno code behind this State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Hoveredno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Selected=False, State=Enabledno code behind this Selected=False, State=Hoveredno code behind this Selected=False, State=Focusedno code behind this Selected=False, State=Pressedno code behind this Selected=False, State=Disabledno code behind this Selected=True, State=Enabledno code behind this Selected=True, State=Focusedno code behind this Selected=True, State=Pressedno code behind this Selected=True, State=Disabledno code behind this Selected=True, State=Hoveredno code behind this

Report a problem

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