Cursor

Cursor utilities communicate interaction behavior before the user clicks or drags. The right cursor sets a clear expectation: a pointer hand for clickable elements, a spinning wheel for loading states, a grabbing hand for active drag — all without any JavaScript.

All cursor utilities are pure CSS and do not require the FrontAlign runtime.

Quick reference

Class	Cursor	Common use
`cursor-pointer`	`pointer`	Buttons, links, clickable cards.
`cursor-not-allowed`	`not-allowed`	Disabled or unavailable actions.
`cursor-grab`	`grab`	Draggable elements at rest.
`cursor-grabbing`	`grabbing`	Active dragging state.
`cursor-text`	`text`	Selectable or editable text areas.
`cursor-wait`	`wait`	Loading or processing states.

Usage

Apply cursor-pointer to any element that behaves like a button or link.

<div class="cursor-pointer border rounded-4 shadow hover:shadow-large">
  Open Project
</div>

Disabled button

Apply cursor-not-allowed to signal that an action is unavailable. Pair with opacity-50 for a complete disabled appearance.

<button class="cursor-not-allowed opacity-50">
  Unavailable
</button>

Draggable item

Apply cursor-grab to an element the user can drag. Switch to cursor-grabbing while dragging is active.

<div class="cursor-grab border rounded-3">
  Drag Item
</div>

Active drag state

<div class="cursor-grabbing shadow-large">
  Dragging
</div>

Text cursor

Apply cursor-text to content areas that are selectable or editable.

<p class="cursor-text">
  Select or edit this text.
</p>

Loading state

Apply cursor-wait during async operations to signal that the interface is busy.

<button class="cursor-wait opacity-75">
  Processing...
</button>

Real-world examples

Loading button

<button class="cursor-wait opacity-75 select-none">
  Saving...
</button>

Interactive link card

<a
  href="#"
  class="cursor-pointer select-none hover:shadow-large"
>
  View Documentation
</a>

Drag handle

<button class="cursor-grab select-none">
  Drag
</button>

Cursor + hover

<div class="cursor-pointer hover:shadow-large hover:scale-105 transition-all">
  Interactive Surface
</div>

Choosing the right cursor

Use case	Recommended utility
Clickable element	`cursor-pointer`
Disabled interaction	`pointer-none` + `cursor-not-allowed`
Draggable item	`cursor-grab`
Active dragging	`cursor-grabbing`
Loading state	`cursor-wait`

Accessibility notes

Cursor utilities are visual helpers. They should not be the only way to communicate state.

For disabled controls, pair cursor-not-allowed with the HTML disabled attribute so assistive technologies receive the correct signal.

<button disabled class="cursor-not-allowed opacity-50">
  Disabled
</button>

For interactive elements, use semantic HTML — <button> and <a> — rather than applying cursor-pointer to a generic <div>.

<button class="cursor-pointer select-none">
  Open
</button>

Usage notes

Use cursor-pointer only for genuinely interactive elements; non-interactive elements should not show a pointer hand.
Use cursor-not-allowed with visually disabled actions; always pair with opacity-50 or similar to reinforce the state.
Switch between cursor-grab and cursor-grabbing dynamically via JavaScript to reflect rest and active drag states.
Use cursor-wait during async operations such as form submissions and data loading.
Prefer semantic HTML (<button>, <a>) over cursor-pointer on generic elements wherever possible.
Combine cursor utilities with opacity, hover:, transition-all, and shadow utilities for polished interactive states.