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.

Usage

In server-side views (Flow/Java), the custom properties are imported automatically.

In client-side views (Fusion/TypeScript), you need to explicitly import the custom properties before you can use them in your style sheets.

import '@vaadin/vaadin-lumo-styles/style';

Learn how to use CSS Custom Properties.

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.

DescriptionCSS Custom Property

Cursor

--lumo-clickable-cursor: