Cursor

Utilities for controlling the CSS cursor property.

Basic

Class	cursor
cursor-default	default
cursor-pointer	pointer
cursor-wait	wait
cursor-text	text
cursor-move	move
cursor-help	help
cursor-not-allowed	not-allowed

Grab and drag

Class	cursor
cursor-grab	grab
cursor-grabbing	grabbing

Special

Class	cursor
cursor-copy	copy
cursor-alias	alias
cursor-no-drop	no-drop
cursor-cell	cell
cursor-crosshair	crosshair
cursor-zoom-in	zoom-in
cursor-zoom-out	zoom-out

Resize

Class	cursor
cursor-n-resize	n-resize
cursor-e-resize	e-resize
cursor-s-resize	s-resize
cursor-w-resize	w-resize
cursor-ne-resize	ne-resize
cursor-nw-resize	nw-resize
cursor-se-resize	se-resize
cursor-sw-resize	sw-resize
cursor-ew-resize	ew-resize
cursor-ns-resize	ns-resize

Examples

<!-- Clickable button -->
<button class="cursor-pointer">Click me</button>

<!-- Disabled element -->
<button class="cursor-not-allowed op-4" disabled>Unavailable</button>

<!-- Draggable item -->
<div class="cursor-grab" @mousedown="startDrag">
  Drag me
</div>

<!-- Zoomable image -->
<img class="cursor-zoom-in" @click="openLightbox" src="photo.jpg" />

<!-- Alias link -->
<a class="cursor-alias" href="/alias">Alias link</a>