Cursor
Controls the cursor style when hovering over an element.
| Utility | Properties |
|---|---|
| Error: 429 | |
Auto
Initial value
This example sets the cursor to auto, indicating that the cursor is in its default state.
<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.
<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.
<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.
<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.
<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:-*,md:-*, lg:-*, and xxl:-* 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:-* utility to override elements and change their values when hovering over them.
<div class="c-p h:c-wait ..."></div>