Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

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 doesn’t have to be added to a class that implements the AppShellConfigurator interface.

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