Cursor

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;

Auto

Initial value

This example sets the cursor to auto, indicating that the cursor is in its default state.

Try hovering over the buttons to see how the cursor transforms with your mouse.

Login

<button class="c-auto b-2 bc-indigo bg-indigo-2 d-g fw-600 pi-c px-8 py-1 rad-1 rad-2 tc-indigo">
  Login
</button>

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.

Help

<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.

Stop

<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.

Buy

<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.

Wait

<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 modifier

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 modifier

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>