Documentation

Documentation versions (currently viewingVaadin 23)
Check out the new styling guides

Lumo Compact Mode

Learn how to enable Lumo’s compact variant to reduce the font size and the sizing and spacing of all components.

Lumo has a compact variant that reduces the font size and the sizing and spacing of all components, allowing you to place more components on the screen. The compact variant is applied by importing an additional style sheet, which sets new values for the typography, sizing and spacing CSS properties.

To enable the compact mode, use the @JsModule annotation as follows:

@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js") 1
public class Foo { 2
}
  1. Adding this @JsModule annotation enables the compact mode.

  2. Unlike the @Theme annotation, the @JsModule annotation does not have to be added to a class that implements the AppShellConfigurator interface.

9844F8E8-639B-4A63-BBCD-5D95831A901B