Size and Space

Use these CSS Custom Properties to apply consistent sizing and spacing across your application.

Note	Only available in Lumo This documentation applies only to the Lumo theme.

Importing

Import the custom properties before using them in your style sheets.

import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';

Size

Use these properties to adjust the sizing of regular elements such as buttons, text fields, and list items.

Medium is the standard size, and it is primarily used to size buttons, text fields and list items. If you adjust the sizing, make sure to keep it large enough for touch targets.

Description	CSS Custom Property
Extra Large Minimum data grid header row height	--lumo-size-xl:
Large Large button	--lumo-size-l:
Medium Button and input field height, data grid row height	--lumo-size-m:
Small Small button and input field height	--lumo-size-s:
Extra Small	--lumo-size-xs:

Icon Size

Use the icon size custom properties to set consistent sizes for all icons across your application. The icon sizes are relative to the font size by default, meaning they scale automatically depending on the context you place them in.

import '@vaadin/vaadin-lumo-styles/sizing.js';

Description	CSS Custom Property
Large icon	--lumo-icon-size-l:
Medium icon Default size	--lumo-icon-size-m:
Small icon	--lumo-icon-size-s:

Compact Sizing

Lumo has a compact sizing preset available. It reduces the font size and the sizing and spacing of all components, allowing you to place more components on the screen.

Apply compact sizing by importing the style sheet, which sets new values for the Typography and the Size and Space CSS properties. You can view the values from the source code.

@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js")
@Theme(Lumo.class)
public class CompactApp extends Div {
}

import '@vaadin/vaadin-lumo-styles/presets/compact.js';

Space

Use these properties to adjust the inter-component spacings – the space outside a regular component (button, text field) or inside a container component (layouts, grid cells).

Description	CSS Custom Property
Extra Large	--lumo-space-xl:
Large	--lumo-space-l:
Medium	--lumo-space-m:
Small	--lumo-space-s:
Extra Small	--lumo-space-xs:

86ADC27D-53E6-4663-AB04-295B04920631

Documentation