Skip to content

Cursor

Controls the cursor style when hovering over an element.

Utility Properties

c-auto

cursor: auto;

c-ch

cursor: crosshair;

c-cr

cursor: col-resize;

c-d

cursor: default;

c-h

cursor: help;

c-m

cursor: move;

c-na

cursor: not-allowed;

c-ner

cursor: ne-resize;

c-neswr

cursor: nesw-resize;

c-none

cursor: none;

c-nr

cursor: n-resize;

c-nwr

cursor: nw-resize;

c-nwser

cursor: nwse-resize;

c-p

cursor: pointer;

c-pr

cursor: progress;

c-rs

cursor: row-resize;

c-ser

cursor: se-resize;

c-sr

cursor: s-resize;

c-swr

cursor: sw-resize;

c-t

cursor: text;

c-w

cursor: wait;

c-wr

cursor: w-resize;

c-zi

cursor: zoom-in;

c-zo

cursor: zoom-out;

Help

This example sets the cursor to help, indicating that additional information is available.

Try hovering over the buttons to see how the cursor transforms with your mouse.
<button class="c-h b-2 bc-indigo bg-indigo-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-indigo">
Help
</button>

Not Allowed

This example sets the cursor to not-allowed, indicating that the action is not permitted.

Try hovering over the buttons to see how the cursor transforms with your mouse.
<button class="c-na b-2 bc-red bg-red-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-red">
Stop
</button>

Pointer

This example sets the cursor to pointer, indicating that the element is clickable.

Try hovering over the buttons to see how the cursor transforms with your mouse.
<button class="c-p b-2 bc-indigo bg-indigo-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-indigo">
Buy
</button>

Progress

This example sets the cursor to progress, indicating that the application is performing some processing and the user should wait.

Try hovering over the buttons to see how the cursor transforms with your mouse.
<button class="c-pr b-2 bc-indigo bg-indigo-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-indigo">
Wait
</button>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:c-*,md:c-*, lg:c-*, and xxl:c-* allows targeting specific utilities in different viewports.

<div class="c-p md:c-wait ..."></div>
Hover modifiers

Alternatively, you can apply :hover by using h:c-* utility to override elements and change their values when hovering over them.

<div class="c-p h:c-wait ..."></div>