Documentation

Documentation versions (currently viewingVaadin 23)
New Acceleration Kits: Kubernetes Kit and Azure Cloud Kit. Read the blog post.

Lumo Sizing and Spacing

This page lists Lumo size and space CSS Custom Properties, which you can use to apply consistent sizing and spacing across your application.

You can enable the built-in Lumo compact mode variant to reduce the font size and the sizing and spacing of all components, allowing you to place more components on the screen.

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’s 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:

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