Cursor

Class	Properties
c-auto	cursor: auto
c-cr	cursor: col-resize
c-ch	cursor: crosshair
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

This example showcases various cursor styles: help, not-allowed, and pointer

• The c-h utility sets the cursor to help, indicating that additional information is available
• The c-na utility sets the cursor to not-allowed, indicating that the action is not permitted
• The c-p utility 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.

Send Help Disable

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <button class="c-p b-0 bg-indigo fw-600 h:bg-d-indigo-1 px-5 py-1 rad-1 tc-white">Send</button>
  <button class="c-h b-2 b-s bc-indigo bg-white fw-600 px-5 py-1 rad-1 tc-indigo">Help</button>
  <button class="o-50 c-na b-0 bg-l-indigo-4 fw-600 px-5 py-1 rad-1 tc-white">Disable</button>
</div>

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>