Cursor

Utilities for controlling the cursor style when hovering over an element.

Auto

Use cursor="auto" to allow the browser to change the cursor based on the current content (e.g. automatically change to text cursor when hovering over text).

<x.div cursor="auto">Hover over this text</x.div>

Default

Use cursor="default" to change the mouse cursor to always use the platform-dependent default cursor (usually an arrow).

<x.div cursor="default">Hover over this text</x.div>

Pointer

Use cursor="pointer" to change the mouse cursor to indicate an interactive element (usually a pointing hand).

<x.div cursor="pointer">Hover over this text</x.div>

Wait

Use cursor="wait" to change the mouse cursor to indicate something is happening in the background (usually an hourglass or watch).

<x.div cursor="wait">Hover over this text</x.div>

Text

Use cursor="text" to change the mouse cursor to indicate the text can be selected (usually an I-beam shape).

<x.div cursor="text">Hover over this text</x.div>

Move

Use cursor="move" to change the mouse cursor to indicate something that can be moved.

<x.div cursor="move">Hover over this text</x.div>

Not allowed

Use cursor="not-allowed" to change the mouse cursor to indicate something can not be interacted with or clicked.

<x.div cursor="not-allowed">Hover over this text</x.div>

Responsive

To control cursor style at a specific breakpoint, use responsive object notation. For example, adding the property cursor={{ md: "pointer" }} to an element would apply the cursor="pointer" utility at medium screen sizes and above.

<x.div cursor={{ md: 'pointer' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.