Cursor
Controls the cursor style when hovering over an element.
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; |
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.
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>
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>