Cursors

Cursor utilities set the mouse pointer for an element, so the cursor shows what happens on click or drag.

Cursor utilities

Add one of the cursor classes to set the pointer for an element.

• .cursor-auto- the cursor style depends on what's inside a given element
• .cursor-pointer - a pointing cursor, used to show that an element is clickable
• .cursor-move - a cursor which shows that a given element can be moved
• .cursor-not-allowed - a cursor which shows that a user is not allowed to perform an action on an element
• .cursor-zoom-in - a cursor which shows that a user can zoom in
• .cursor-zoom-out - a cursor which shows that a user can zoom out
• .cursor-default - the default cursor
• .cursor-none - no cursor
• .cursor-help - a cursor which shows that help information is available
• .cursor-progress - a cursor which shows that an action is in progress
• .cursor-wait - a cursor which shows that a user cannot interact with the element because it is busy
• .cursor-text - a cursor which shows that a user can type
• .cursor-v-text - a cursor which shows that a user can type in a vertical text input
• .cursor-grab - a cursor which shows that a user can grab an element
• .cursor-grabbing - a cursor which shows that a user is grabbing an element

<div class="cursor-auto">auto</div>
<div class="cursor-pointer">pointer</div>
<div class="cursor-move">move</div>
<div class="cursor-not-allowed">not-allowed</div>
<div class="cursor-zoom-in">zoom-in</div>
<div class="cursor-zoom-out">zoom-out</div>
<div class="cursor-default">default</div>
<div class="cursor-none">none</div>
<div class="cursor-help">help</div>
<div class="cursor-progress">progress</div>
<div class="cursor-wait">wait</div>
<div class="cursor-text">text</div>
<div class="cursor-v-text">vertical-text</div>
<div class="cursor-grab">grab</div>
<div class="cursor-grabbing">grabbing</div>

Hover each box to see its cursor:

Accessibility

• A cursor changes the pointer, nothing else. cursor-pointer on a div does not make it a button - use a real button so it can be focused and activated.
• Do not put cursor-pointer on something that is not clickable. It promises an action that is not there.
• pointer-events-none blocks the mouse but not the keyboard. To really disable a control, use the disabled attribute or aria-disabled.
• A cursor never reaches touch or keyboard users, so nothing important may depend on it.

Related