Cursor

vel-src: interactivity.css

Utilities for controlling the cursor style.

Class	Properties
vel-cursor-auto	cursor: auto
vel-cursor-default	cursor: default
vel-cursor-pointer	cursor: pointer
vel-cursor-wait	cursor: wait
vel-cursor-text	cursor: text
vel-cursor-move	cursor: move
vel-cursor-help	cursor: help
vel-cursor-not-allowed	cursor: not-allowed
vel-cursor-grab	cursor: grab
vel-cursor-grabbing	cursor: grabbing
vel-cursor-crosshair	cursor: crosshair
vel-cursor-zoom-in	cursor: zoom-in
vel-cursor-zoom-out	cursor: zoom-out
vel-cursor-none	cursor: none

Examples

Pointer cursor on interactive element

example.html

<button class="vel-cursor-pointer vel-btn vel-btn-primary">
  Click me
</button>

Disabled state with not-allowed cursor

example.html

<button class="vel-cursor-not-allowed vel-btn vel-btn-outline-primary vel-opacity-50" disabled>
  Disabled
</button>

Grab cursor for draggable items

Drag me

example.html

<div class="vel-cursor-grab vel-bg-surface-1 vel-text-base vel-rounded-lg vel-inline-block" style="padding:1rem;border:1px solid #1e2d45">
  Drag me
</div>