Documentation versions (currently viewingVaadin 14)

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


Use these CSS Custom Properties to apply consistent interaction styles for components.

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
// tag::color[]
import '@vaadin/vaadin-lumo-styles/color';
// end::color[]
// tag::typography[]
import '@vaadin/vaadin-lumo-styles/typography';
// end::typography[]
// tag::size[]
import '@vaadin/vaadin-lumo-styles/sizing';
// end::size[]
// tag::space[]
import '@vaadin/vaadin-lumo-styles/spacing';
// end::space[]
// tag::style[]
import '@vaadin/vaadin-lumo-styles/style';
// end::style[]
// prettier-ignore

Clickable Cursor

How clickable items are indicated to the users of pointer devices (the mouse) can be configured to suit your application’s target audience.

You can either follow the “web” approach and use the pointer (hand) cursor for clickable items, or the “desktop” approach and use the default (arrow) cursor.

Description CSS Custom Property