Cursor

Class	Style
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;

Disc

Initial value

The list items will be marked with solid circles, which is the default style for unordered lists.

• Butter 🧈
• Egg 🥚
• Milk 🥛

<div class="bg-indigo-1 p-4 rad-1">
  <ul class="bg-white lsp-o lst-d p-4 pl-6 rad-1">
    <li class="tc-slate">Butter 🧈</li>
    <li class="tc-slate">Egg 🥚</li>
    <li class="tc-slate">Milk 🥛</li>
  </ul>
</div>

Progress

Indicates that a task is in progress.

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>

Help

Indicates that the element provides helpful information.

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

Indicates that the requested action cannot be performed.

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

Indicates that the element is a interactive element that can be activated.

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>

Conditional styles

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

Breakpoint variant

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

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

Hover variant

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>