search

PrefectHQ / prefect-design

https://prefect-design.netlify.app
Apache License 2.0
29 stars 11 forks source link

Use `cursor: pointer;` for interactive elements #94

Open pleek91 opened 2 years ago

pleek91 commented 2 years ago

Description

Elements like buttons, checkboxes, select, etc that are expecting the user to interact with them via a click should have cursor: pointer.

znicholasbrown commented 2 years ago

On thinking and doing some reading about this topic some more, I think there's a strong argument that this isn't something we should do. Reading through the W3 definition of the cursor property, the pointer spec is defined:

pointer The cursor is a pointer that indicates a link.

Similarly, the Windows 7 cursor guidelines (a bit dated, but still) even define the hand as a "Link select":

Link select | Used for text and graphics links because of their weak affordance.

There are some other resources on this but it boils down to: interactive elements should have strong affordance due to good design; the pointer cursor should be reserved for elements that by their nature have weak affordance, e.g. text links, and should hint at context menu interactions like navigation that can be opened in a new tab.