# cursor

> Applies `cursor`.

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

Applies `cursor`. Accepts any CursorValue keyword — `"pointer"` for
an interactive control, `"not-allowed"` for a disabled one, `"default"` to
force the plain arrow — or an arbitrary string for a `url(...)` cursor.

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

```tsx
<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:

```tsx
<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:

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

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

## Responsive design

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

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

## Signature

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