Cursor Utilities

NuvoUI provides a comprehensive set of cursor utility classes to control how the mouse cursor appears when hovering over elements. These utilities help improve user experience by providing visual cues about element interactivity.

Configuration

The cursor utility system uses the following configurable variables:

Utility Class Generation

Parent Selector

Available Cursor Values

The cursor utility classes are generated from this comprehensive list of cursor values:

Basic Cursor Utilities

Change the cursor appearance with straightforward utility classes:

Common Use Case Examples

Interactive Elements

Text Interaction

Resize Handlers

Drag and Drop

Loading States

Zoom Controls

Direction Indicators

Special Cursors

Interactive Components

Button States

Form Elements

Cursor Utilities Reference Table

Class	CSS Property	Visual Effect	Common Use Case
`.cursor-auto`	`cursor: auto;`	Browser's default cursor	Default state
`.cursor-pointer`	`cursor: pointer;`	Pointing hand	Interactive elements (buttons, links)
`.cursor-default`	`cursor: default;`	Default arrow	Non-interactive elements
`.cursor-move`	`cursor: move;`	Move icon	Draggable elements
`.cursor-not-allowed`	`cursor: not-allowed;`	Prohibited icon	Disabled elements
`.cursor-wait`	`cursor: wait;`	Wait/hourglass	Loading states
`.cursor-help`	`cursor: help;`	Question mark	Elements with help/hint info
`.cursor-text`	`cursor: text;`	I-beam	Text input areas
`.cursor-cell`	`cursor: cell;`	Cell selection	Spreadsheets, tables
`.cursor-crosshair`	`cursor: crosshair;`	Crosshair	Precise selection
`.cursor-grabbing`	`cursor: grabbing;`	Closed hand	Element being dragged
`.cursor-grab`	`cursor: grab;`	Open hand	Element can be dragged
`.cursor-zoom-in`	`cursor: zoom-in;`	Magnifying glass +	Zoom in functionality
`.cursor-zoom-out`	`cursor: zoom-out;`	Magnifying glass -	Zoom out functionality
`.cursor-none`	`cursor: none;`	No cursor	Hide cursor
`.cursor-progress`	`cursor: progress;`	Progress indicator	Background operation running
`.cursor-col-resize`	`cursor: col-resize;`	Column resize	Table/grid column resizing
`.cursor-row-resize`	`cursor: row-resize;`	Row resize	Table/grid row resizing
`.cursor-n-resize`	`cursor: n-resize;`	North resize	Resize from top edge
`.cursor-e-resize`	`cursor: e-resize;`	East resize	Resize from right edge
`.cursor-s-resize`	`cursor: s-resize;`	South resize	Resize from bottom edge
`.cursor-w-resize`	`cursor: w-resize;`	West resize	Resize from left edge
`.cursor-ne-resize`	`cursor: ne-resize;`	Northeast resize	Resize from top-right corner
`.cursor-nw-resize`	`cursor: nw-resize;`	Northwest resize	Resize from top-left corner
`.cursor-se-resize`	`cursor: se-resize;`	Southeast resize	Resize from bottom-right corner
`.cursor-sw-resize`	`cursor: sw-resize;`	Southwest resize	Resize from bottom-left corner
`.cursor-ew-resize`	`cursor: ew-resize;`	East-west resize	Horizontal resizing
`.cursor-ns-resize`	`cursor: ns-resize;`	North-south resize	Vertical resizing
`.cursor-nesw-resize`	`cursor: nesw-resize;`	Northeast-southwest	Diagonal resizing
`.cursor-nwse-resize`	`cursor: nwse-resize;`	Northwest-southeast	Diagonal resizing
`.cursor-context-menu`	`cursor: context-menu;`	Context menu	Element with context menu
`.cursor-all-scroll`	`cursor: all-scroll;`	Omnidirectional scroll	Scrollable in all directions

SCSS Mixins

Available Mixins

Mixin	Description	Parameters
`@include cursor($cursor-value)`	Sets the cursor for an element	`$cursor-value`: Any valid cursor value

SCSS Usage Examples

Browser Support

The cursor utility classes use standard CSS properties that are well-supported across modern browsers. Some specialty cursors may have varying appearance across different operating systems and browsers.

Best Practices

Use appropriate cursors to improve user experience and provide visual cues about element interactivity.
Use .cursor-pointer for clickable elements like buttons and links.
Use .cursor-not-allowed for disabled elements to indicate they cannot be interacted with.
Use .cursor-text for text input areas.
Use resize cursors only when the element can actually be resized in the indicated direction.
Consider using .cursor-progress or .cursor-wait during loading operations.

Configuration​

Utility Class Generation​

Parent Selector​

Available Cursor Values​

Basic Cursor Utilities​

Common Use Case Examples​

Interactive Elements​

Text Interaction​

Resize Handlers​

Drag and Drop​

Loading States​

Zoom Controls​

Direction Indicators​

Special Cursors​

Interactive Components​

Button States​

Form Elements​

Cursor Utilities Reference Table​

SCSS Mixins​

Available Mixins​

SCSS Usage Examples​

Browser Support​

Best Practices​