Skip to content

Components: Remove pointer styling from Button component #71316

@aduth

Description

@aduth

What problem does this address?

The hand cursor on buttons applied via cursor: pointer styling is redundant and can confuse users who might expect pointer cursors to signify a link, since buttons benefit from strong visual affordance (unlike links).

Related resources:

  • W3C User interface guidelines
    • pointer: The cursor is a pointer that indicates a link.

  • Apple Design: Pointing devices
    • Pointing hand: The content beneath the pointer is a URL link to a webpage, document, or other item.

  • Microsoft
    • Buttons and sliders have strong affordance. [...] Text and graphics links use a hand or "link select" pointer (a hand with the index finger pointing screen shot of hand with index finger pointing ) because of their weak affordance. [...] To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don't need a hand pointer

  • "Buttons shouldn't have a hand cursor"

Previous discussions:

What is your proposed solution?

Remove the default pointer cursor styling on the Button component:

Open questions:

Metadata

Metadata

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions