Results Density Toggle
View-controls toolbar with independent density and layout toggles wired to a demo list that visibly responds with changed padding and grid or list arrangement.
View-controls toolbar with independent density and layout toggles wired to a demo list that visibly responds with changed padding and grid or list arrangement.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Results Density Toggle is the view-controls toolbar for the Acme Projects list, four projects wired to two independent ToggleGroups: Comfortable or Compact density, and List or Grid layout. Switching density changes row padding live; switching layout flips between a ruled list and a two-column card grid. Both axes respond independently so Compact Grid is a valid combination.
Projects are one flat const array, and density and layout are two separate useState values. The dual-axis wiring is the point: most toolbars collapse these into one control and lose a dimension the user actually wants.
Reach for this block on any content list where users might prefer cards over rows, or need to maximize visible items. Wire the toggle values to localStorage or a user-preference endpoint so the choice persists across sessions.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the projects list view switcher. Other density and layout surfaces:
Tip: store density and layout separately in preferences; users switch layout more often than density and should not lose their density choice when they do.