Lumo Cursor

How clickable items are indicated to the users of pointer devices (the mouse) is debatable.

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.

Clickable Cursor

Use this property for elements that are clickable, such as buttons. That way, an application can decide which mouse cursor to use for them. Traditional web address links (anchors) should always use the pointer cursor (pointing hand).

By default, Lumo uses the default cursor (arrow) for clickable elements.

--lumo-clickable-cursor: default

Examples

HTML

<vaadin-button>Default</vaadin-button>
<vaadin-button class="pointer">Pointer</vaadin-button>
<custom-style>
  <style>
    .pointer {
      --lumo-clickable-cursor: pointer;
      cursor: var(--lumo-clickable-cursor);
    }
  </style>
</custom-style>