Cursor

The Cursor property allows you to define how the mouse pointer appears when hovering over a particular UI element. This enhances user experience by giving visual feedback about the element's behavior β€” such as whether it’s clickable, draggable, or unavailable.

πŸ“˜ Definition:

  • The cursor setting changes the appearance of the pointer when it hovers over a widget.

  • It communicates interactivity, selection, loading states, or context actions.


πŸŽ›οΈ Available Cursor Types

Unset

Removes any previously applied cursor setting, allowing default inheritance.

Default

Standard arrow cursor. Used for general elements with no special behavior.

Auto

Browser decides the cursor based on context.

None

Hides the cursor entirely when hovering over the element.

Alias

Indicates a shortcut or alias (e.g., symbolic link).

All Scroll

Indicates that panning in all directions is possible.

Cell

Indicates a cell selection (like in a spreadsheet).

Column Resize

Indicates that the column can be resized horizontally.

Context Menu

Signals that a context menu is available.

Copy

Indicates that an item can be copied.

Crosshair

Displays a crosshair, often used in graphic or measurement tools.

East Resize

Indicates the element is resizable horizontally from the right side.

Grab

Indicates the element can be picked up (drag-and-drop start).

Grabbing

Indicates an element is currently being dragged.

Help

Displays a question mark to indicate help or more info is available.

Move

Indicates an element is draggable in all directions.

North Resize

Resizable from the top edge.

North-East Resize

Resizable diagonally from the top-right corner.

Not Allowed

Indicates an action is not permitted.

Pointer

A pointing hand cursor β€” commonly used for links or clickable elements.

Progress

Indicates a process is occurring, but the UI is still usable.

Text

Text selection cursor (I-beam), typically for editable or selectable text.

Wait

Indicates a process is ongoing and interaction is temporarily disabled.

Zoom In

Magnifying glass with a plus symbol β€” indicates zoom functionality.

Zoom Out

Magnifying glass with a minus symbol β€” indicates zoom out is possible.

Last updated