Cursor

Controls the cursor style when hovering over an element.

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.

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

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

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

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

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

Using utility variants

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

Using media queries

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

Using hover states

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