Lumeo

Density Scope

A cascading wrapper that sets the Lumeo.Density token for every density-aware descendant. It renders no DOM element of its own — just the cascading value around its content.

When to Use

  • Make a whole page, panel, or sidebar denser or more spacious in one wrapper
  • Render a dense admin grid at Compact without editing each component
  • Give a thumb-first mobile or marketing view Spacious hit areas

For the full concept — the density scale, per-component overrides, and the list of density-aware components — see the Density guide.

Compact

Comfortable (default)

Spacious

Current scope: Comfortable

API Reference

DensityScope

Property Type Default Description
Value Density Comfortable The density cascaded to every density-aware descendant: Compact, Comfortable, or Spacious.
ChildContent RenderFragment? The content the density value applies to.

DensityScope renders no wrapper element, so it is safe to place inside <tbody>, <tr>, <ul>, and other contexts that only permit specific children.

  • Density guide — The full density concept and which components are density-aware
  • Button — A density-aware component with a Density override parameter