Affordance

Cursors

The mouse cursor is key in helping users understand how to interact with elements on the screen.

CSS valueExampleDescription
defaultimageThe platform-dependent default cursor. Typically an arrow.
pointerimageIndicates that you can click on an element to invoke a command or navigate, such as links and buttons.
grabimageIndicates that you can grab and move an element around the screen.
grabbingimageIndicates that you are actively moving an element around the screen.
textimageIndicates that this is either text that you can select and copy, or a text field that you can click into to enter text.
not-allowedimageIndicates that an item may not be dropped at the current location or that the requested action will not be carried out.

Last updated at: