Density

Density is an orthogonal "tightness" axis applied across sized Lumeo components. It sits next to the size scale rather than replacing it: a medium button can render compact for a dense admin grid or spacious for a marketing hero — without scaling the type ramp itself.

The density scale

The Lumeo.Density enum has three values. The default is Comfortable.

What density affects

Density shifts only padding, gap, and row-height tokens. It deliberately leaves the type ramp, icon size, and border radius unchanged — those belong to the size scale (Size), not density.

• Affected: internal padding, gaps between sub-elements, and list / table row height.
• Not affected: font size and the type ramp, icon size, and border radius. Use Size for those.

Setting density with DensityScope

Wrap a page, panel, or sidebar in <DensityScope> to cascade a density value to every density-aware descendant — no per-component edits. DensityScope renders no DOM element of its own, so it is valid inside <tbody>, <tr>, <ul>, and any other context that only permits specific children.

<DensityScope Value="Density.Compact">
    @* Every density-aware control inside renders compact *@
    <Button>Save</Button>
    <Input Placeholder="Search…" />
    <Table>
        <TableHeader>
            <TableRow><TableHead>Name</TableHead></TableRow>
        </TableHeader>
        <TableBody>
            <TableRow><TableCell>Compact row</TableCell></TableRow>
        </TableBody>
    </Table>
</DensityScope>

Per-component override

Components that expose a direct Density parameter (see the list below) read the cascading value, fall back to Comfortable when none is present, and let an explicit value override the inherited one — so a single control can opt out of its surrounding scope. Inherit-only components (also listed below) follow the nearest DensityScope and have no per-element override.

<DensityScope Value="Density.Compact">
    <Button>Inherits Compact</Button>

    @* Opt this one control out of the scope *@
    <Button Density="Density.Spacious">Stays Spacious</Button>
</DensityScope>

Density-aware components

All components below respond to a surrounding DensityScope. A subset also expose an explicit Density parameter you can set directly on the element. The rest only inherit from an ancestor DensityScope, because their sizing lives in subcomponents (e.g. the row cell, the trigger). Components not listed here ignore density and render at their fixed metrics.

Accept a direct Density parameter

Inherit from an ancestor DensityScope only

Related

• Density Scope component — the cascading wrapper and its API
• Theme Overrides — customizing colors and tokens