[ @sdxc/u/general ]

cursor

Applies cursor.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { cursor } from "@sdxc/u/general";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.cursor("pointer")`	`css({ cursor: "pointer" })`
`u.cursor("not-allowed")`	`css({ cursor: "not-allowed" })`

Examples

Basic example

Use cursor(value), like cursor("pointer") or cursor("wait"), to set the pointer shown over an element. Hover each box to see it:

cursor("pointer")

cursor("progress")

cursor("text")

cursor("move")

cursor("help")

cursor("crosshair")

<div mix={[...]}>
	<div mix={[cursor("pointer"), ...]}>cursor("pointer")</div>
	<div mix={[cursor("progress"), ...]}>cursor("progress")</div>
	<div mix={[cursor("text"), ...]}>cursor("text")</div>
	<div mix={[cursor("move"), ...]}>cursor("move")</div>
	<div mix={[cursor("help"), ...]}>cursor("help")</div>
	<div mix={[cursor("crosshair"), ...]}>cursor("crosshair")</div>
</div>

Disabled controls

Combine cursor("pointer") with disabled(cursor("not-allowed")) so a control signals when it cannot be used. Hover both buttons:

<div mix={[...]}>
	<button
		mix={[cursor("pointer"), disabled([cursor("not-allowed"), opacity(50)]), ...]}
	>
		Publish
	</button>
	<button
		disabled
		mix={[cursor("pointer"), disabled([cursor("not-allowed"), opacity(50)]), ...]}
	>
		Publish
	</button>
</div>

Draggable items

Use cursor("grab") with active(cursor("grabbing")) on something the reader can drag. Press and hold the card:

Design review · Thursday 14:00

<div mix={[cursor("grab"), active(cursor("grabbing")), ...]}>
	Design review · Thursday 14:00
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.cursor("pointer"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.cursor("pointer"))

Signature

u.cursor(value: CursorValue | (string & {}))