Skip to content

fix(ui): give Button a pointer cursor and the secondary variant a hover - #37

Merged
datlechin merged 1 commit into
mainfrom
fix/button-hover
Sep 23, 2026
Merged

datlechin merged 1 commit into
mainfrom
fix/button-hover

Conversation

@datlechin

Copy link
Copy Markdown
Member

Follow-up to #36. The consent bar's Allow and Decline show an arrow cursor and nothing on hover, so they don't look clickable.

They are the first secondary Buttons to render as <button> rather than <a>. Two gaps meet there:

  • Cursor. Tailwind v4's preflight leaves <button> on the default cursor, and the primitive never set one. A link gets the pointer from the browser.
  • Hover. The secondary variant had no hover state at all. The link's pointer had been the only feedback it ever gave.

Change

  • cursor-pointer on the Button primitive.
  • On hover, secondary steps up to border-rule-strong over a bg-muted fill.
  • The transition now covers background and border as well as opacity.

The hover fill measures 1.09:1 against the card in light and 1.19:1 in dark, alongside the border going from 7% to 14%. It was checked visually in both themes in headless Chrome.

Every other secondary Button on the site is a link (hero GitHub, the database pages' docs links, the Download page's second architecture) and gains the same hover.

Testing

  • AnalyticsConsentTest pins cursor-pointer in the base classes and a hover: on the secondary variant. It fails with the cursor removed.
  • tsc --noEmit is clean.
  • In headless Chrome, the computed cursor is pointer and the hover background is oklch(0.97 0 0) in light and oklch(0.269 0 0) in dark.

The consent bar's Allow and Decline were the first secondary Buttons to
render as <button> rather than <a>. They showed an arrow cursor and nothing
on hover. Tailwind v4's preflight leaves buttons on the default cursor, and
the secondary variant had no hover at all; a link's pointer had always stood
in for one.

The primitive now carries cursor-pointer. Secondary steps up to
border-rule-strong over a bg-muted fill on hover, measured at 1.09:1 against
the card in light and 1.19:1 in dark. The transition covers background and
border as well as opacity. Every other secondary Button is a link and gains
the same hover.
@datlechin
datlechin merged commit d2417c3 into main Sep 23, 2026
5 checks passed
@datlechin
datlechin deleted the fix/button-hover branch September 23, 2026 08:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant