Why Are Buttons Losing the Pointer Cursor? ft. ShadCn

#webdev #javascript #programming #discuss

Developers working with ShadCN v4 and Tailwind CSS v4 noticed something odd: buttons no longer showed the pointer cursor on hover. For many, this broke expectations. Clicking a button without the familiar hand cursor felt... off.

A github issue was opened but the change wasn’t a bug. It was a deliberate design choice buttons now use the default cursor by design.

The Fix

Workarounds by @aow3xm and @Koda-Pig

@layer base {
  button:not([disabled]),
  [role="button"]:not([disabled]) {
    cursor: pointer;
  }
}

This custom CSS restores expected behavior, with added care to avoid pointer cursors on disabled buttons.

The reason.. i think.

A UX StackExchange thread explains: originally, GUI buttons relied on visual affordances (like shadows) rather than cursors to suggest interactivity. The pointer cursor was reserved for hyperlinks. Even today, native buttons in OSs typically don’t change to a hand cursor.

But web apps are not traditional GUIs they’re hybrid interfaces that mix form and function. Users now expect visual cues like cursor changes for all clickable elements.

TL;DR: Tailwind v4 removed cursor: pointer from buttons by default. It’s intentional, rooted in legacy UX logic. But if your users expect a hand cursor, just add a small CSS override.

Top comments (9)

Nevo David • Apr 26

Insane how a tiny thing like the cursor can throw me off so much lol, gotta have that hand or my brain freaks out

mmvergara • Apr 27

Yeahh, i wish theyd consult with the community first before shipping it, cause just as expressed it feels like a breaking change to me.

Eris Sulistina • Apr 27

Your code looks good, but I personally prefer doing it like this:

:where(button, [role="button"]):not([disabled]) {
  cursor: pointer;
}

Liam Hayes • Apr 26 • Edited

Interesting design choice! Glad there’s an easy fix to bring back the pointer cursor Pink Rave Outfits — users definitely expect that visual feedback today.