Cursor

Class reference

# Auto

Use .cursor-auto to allow the browser to change the cursor based on the current content (e.g. automatically change to text cursor when hovering over text).

<div class="cursor-auto ...">
  Hover over this text
</div>

# Default

Use .cursor-default to change the mouse cursor to always use the platform-dependent default cursor (usually an arrow).

<div class="cursor-default ...">
  Hover over this text
</div>

# Pointer

Use .cursor-pointer to change the mouse cursor to indicate an interactive element (usually a pointing hand).

<div class="cursor-pointer ...">
  Hover me
</div>

# Wait

Use .cursor-wait to change the mouse cursor to indicate something is happening in the background (usually an hourglass or watch).

<div class="cursor-wait ...">
  Hover me
</div>

# Text

Use .cursor-text to change the mouse cursor to indicate the text can be selected (usually an I-beam shape).

<div class="cursor-text ...">
  Hover me
</div>

# Move

Use .cursor-move to change the mouse cursor to indicate something that can be moved.

<div class="cursor-move ...">
  Hover me
</div>

# Not Allowed

Use .cursor-not-allowed to change the mouse cursor to indicate something can not be interacted with or clicked.

<div class="cursor-not-allowed ...">
  Hover me
</div>