Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

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.
Open in a
new tab
// Import all Lumo CSS custom properties into the global style scope
import '@vaadin/vaadin-lumo-styles/color';
import '@vaadin/vaadin-lumo-styles/typography';
import '@vaadin/vaadin-lumo-styles/sizing';
import '@vaadin/vaadin-lumo-styles/spacing';
import '@vaadin/vaadin-lumo-styles/style';
// prettier-ignore

Size

Use these properties to adjust the sizing of regular elements (buttons, text fields, 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.

See Icons for properties that affect the sizing of icons.

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:

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 {
}

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:

B01EF7DD-2C1D-4BBC-BE33-9A8E48EC85B2