Choosing the Right Cursor for the Right UX Signal

Cursors Are a Silent Communication Channel

Before a user clicks anything, the cursor's shape has already told them something about what's about to happen — that's genuinely useful information, and picking the wrong cursor keyword actively misleads people about what an element does.

Draggable Content: grab and grabbing

Use grab for an element that can be picked up and dragged, and switch to grabbing specifically while the drag is actively in progress (typically toggled via JavaScript on mousedown and back on mouseup). This pairing mirrors how a physical object being picked up actually feels.

Disabled or Unavailable Actions: not-allowed

A disabled button or an action that's currently unavailable should use not-allowed — the universally recognized "this can't be done right now" signal, distinct from simply not changing the cursor at all.

Zoomable Content: zoom-in and zoom-out

An image or map that can be clicked to zoom in benefits from zoom-in, switching to zoom-out once already zoomed in, to indicate the click will now zoom back out.

Help and Additional Information: help

An element that reveals a tooltip or additional explanation on hover or click suits the help cursor — a small question-mark indicator distinct from a standard pointer.

Text Fields: text

Standard text inputs and editable text areas already show the text cursor (the I-beam) automatically — rarely something you need to set explicitly, but useful to apply deliberately over custom text-editing widgets that aren't native form elements.

The General Principle

Match the cursor to the actual interaction, not to what looks visually interesting. A mismatched cursor — a zoom cursor over a button that doesn't zoom anything, for instance — creates a small but real moment of confusion that a well-chosen cursor avoids entirely.