Documentation

Documentation versions (currently viewingVaadin 23)

Interaction

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

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/style.js';

Clickable Cursor

The way clickable items are indicated to users of pointer devices (typically a 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 take the “desktop” approach and use the default (arrow) cursor.

DescriptionCSS Custom Property

Cursor

--lumo-clickable-cursor:

4D15B095-CBCB-4E82-A82B-E5B2DA00EDE5