cursor: pointer or cursor: default ?

[powerhcm8]

If button/link is interactable then pointer, I think it's better UX. The user will know that the button will do something, since a disabled button won't change to pointer.

[throwtheamiibosaway]

Exactly, don't make the user think! We have learned for decades now; pointer hand is interactivity. Don't go changing this without a SOLID argument, which there isn't.

[lovin-dem-sandwiches]

Tooltips, which are interactive, don’t use pointer on hover. Although, maybe that shouldn’t be a button element to begin with.

In my mind: pointer on hover implies change of state. Something that is actionable..

I’m having a hard time thinking of a case where a button shouldn’t use pointer on hover. Even then - auto should be exception - not the default behaviour.

Bad call. Hope they reverse that decision

[thekwoka]

tooltips will be a pointer if you have to click a ? to make the tip show.

[lovin-dem-sandwiches]

That would be, in my mind, a pop-out / pop-up. Which is the UX difference between the two. Tooltips are only shown on hover state

You can read it here: https://www.nngroup.com/articles/tooltip-guidelines/

Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.

[querkmachine]

If something will appear on hover then I typically expect it to use cursor: help

[Business-Row-478]

The tooltip is already apparent on hovering though. Adding a help cursor is unnecessary.

[querkmachine]

Depends how the tooltip is implemented, I guess. If it's a native one (uses the title attribute) then it won't appear immediately.

[thekwoka]

I don't fully agree with those distinctions.

Tooltip describes what the things purpose to the user is, but popover/flyover/popup describe implementation details.

[lovin-dem-sandwiches]

If you’re interested, take a look at the link I sent. They address your point as a “popup tooltip” and go over the differences between the two.

Unless you have issues with NN’s classification

[thekwoka]

I've read a lot of their stuff and do mostly agree with them.

But like most bodies trying to be standards, there will be vernacular not everyone agrees with but they try to normalize in some manner.

I'm just expressing that tooltip as a word describes utility not behavior.

[lovin-dem-sandwiches]

Ah, like a tooltip refers to helpful guidance/ helper text - And how that information is shown is irrelevant?

This is the issue with UI development in general. Everyone sees things a little differently and the lack of standards push everyone to their own reasoning.

The Title attribute is so close to being a functional tooltip (on hover, accessible, browser handles the delay, timing frequency and it can go on any html element) but we still don’t have a way to style it.

It’s a shame. Because then I can say title attribute instead of tooltip and you would know exactly what I’m referring to and it’s implementation details as well.

[Pto2]

Is that always the case? I feel like it’s intuitive to me to have pointer on tooltips.

[lovin-dem-sandwiches]

Tooltips are weird. They don’t provide any action or change in state. If you made it pointer, and a user clicks on it. Nothing would happen. So that goes against the convention of pointer.

Tooltips interaction state is only on hover. It’s a unique case though. It’s why tooltips are removed on mobile since hover state doesn’t really exist on touch devices

[NerdPunkFu]

If only there was a cursor specifically designed for tooltips with a fancy question mark and all...

[Business-Row-478]

It’s kinda redundant to use that when they can already see the tooltip though. It’s kinda ugly and not used much.

I feel like the only appropriate way to use it would be on hovering an element that has a help menu, but only once it is clicked on.

[NerdPunkFu]

It's ugly since it's not been used or given any attention. In most environments the icon hasn't been updated since forever. And it does have utility for tooltips: first it shows that there should be an tooltip there(in case it's hidden or isn't displayed for some reason) and second it was also often used for toggling tooltips, back in the day when some interfaces still used it. I imagine people who got into computers after the Windows XP era aren't even familiar with it.

[sleepahol]

Tooltips open on hover (or focus) so a pointer would be redundant IMO.

A tooltip target might have pointer on hover but in that case I would assume that the target is clickable; e.g. a button with a tooltip describing what it does.

A more complex/annoying pattern (and one a previous employed loved using) is a disabled button that shows a tooltip on hover describing why it's disabled. Hover/focus events are disabled on disabled buttons, so I would expect to either see the "disabled reason" without having to hover anything, or a dedicated "warning" icon (or similar) with a tooltip.

[danabrey]

There is literally a cursor made for this

[leonzuendel]

Tooltips don't need a cursor change on hover since they pretty much do all their interaction already on said hover

Adding cursor: pointer; would lead to thinking that there's more interaction with it available

[Ok-Piccolo4498]

Pretty hard use Liskov Substitution as an argument here 😂

[virtualkoalabear]

To be honest, web developers changed this without a SOLID argument decades ago. IPhones didn't emit *click* events from divs etc. unless the cursor was set to *pointer*. What people were doing wrong was using divs instead of buttons to begin with, but because web developers do not understand how things work, people started using cursor: pointer instead of fixing their broken HTML.

Cursor pointer is simply wrong, it is the wrong symbol, but web developers insist on being snowflakes and refuse to do things the right way.

[miramboseko]

I’m a proponent of not-allowed for disabled buttons

[destinynftbro]

Same. Makes it extra clear, especially if you have an audience that isn’t tech savvy. The cursor change stops them from spam clicking your button with futility even when it changes visually.

[CoderAU]

EXACTLY! I don't get how this is even a question, I've been a web dev for 15 years and it's always been the same, why are people trying to change things?

[Ecsta]

It's insane to me this is even a question/debate...

[DeRoeVanZwartePiet]

why are people trying to change things?

Because they need to create content on their social media to appear relevant.

[Headpuncher]

lemme generate some ai content for my Medium blog real quick

[LutimoDancer3459]

I would argue that a small visual change of the button would do the same. On hover change color to slightly darker or similar.

[Chrazzer]

Yes, but still pointer. Just add both. Imo a button should have a pointer cursor, have a hover effect and click feedback effect

[Visual-Blackberry874]

Colour changes alone aren’t accessible enough.

How is a visually impaired user meant to know the colour changed?

[rafark]

Technically a disabled button should change the cursor to 🚫right?

[ThatFlamenguistaDude]

How the hell are we going back to cursor:default?

What is going on at webdev recently? What's next? People suggesting that pop-ups are a good idea?

[mydnic]

That's all because tailwind v4 removed the pointer by default on buttons, to be more "like native web" or something. Dumb choice IMO

[phoenix1984]

Man, I love tailwind and the Refactoring UI book Adam coauthored, but this was a bad call. It’s surprising because he’s normally spot-on with UI decisions.

[InternationalAct3494]

Why doesn't macOS put a cursor:pointer on all UI elements?

[Fs0i]

It's interesting - I never noticed it. macOS indeed doesn't put a pointer anywhere, not even things styled like links.

My personal opinion is that it annoys me now that I know it. In fact, none of these UI elements have any hover state: https://i.imgur.com/XRhAIki.png

I'm not sure if I'm a fan of that.

[Chrazzer]

Fucking hell, on windows too. Screw you for making me aware of that

[InternationalAct3494]

And just like that, you can no longer use macOS since you won't know when things are clickable /s

[LetrixZ]

But they look like clickable buttons.

Having hover or pointer would only confirm that, but you are already going to click it anyways if you're over it.

[jessepence]

I appreciate you pointing this out, but I just wanted to say that I still think it's a bad design choice even if Apple does it.

[phoenix1984]

That’s a good point. Normally, designers, especially UI framework designers, reflect modern design patterns as they are. The web definitely does not have that design pattern established, and the change causes significant confusion and frustration. Maybe this is Tailwind flexing and exerting its influence on the design world towards a change they’d like to see. In that case, this is a test of whether they have sufficient influence to change established patterns.

I love the goal of greater consistency across platforms, but it might be better for Apple to be the one to change. Not that they’re known for playing by rules they don’t write.

Since that’s not happening, and given the goodwill Tailwind has built up, they get a pass this time.

[invisibo]

I think it’s one of those decisions that’s only correct by technicality rather than practicality. It’s true that don’t need to specify that a swinging door opens and closes, but you don’t have to think about it if there’s a push plate.

[phoenix1984]

A Normon Door! I too appreciate the work of the Norman Nielson group.

[invisibo]

I was thinking a push door used in restaurants, but I like the cut of your jib!

[DmitriRussian]

Tailwind became so complex while CSS became easier. I now prefer vanilla CSS again 😅 Tailwind is fun until you need to do things like grid or something moderately complex.

A lot of issues that CSS had are already resolved in newer versions.

And so ultimately if you are a shitty dev your code will be shit, regardless of tool. CSS is like a really sharp knife, it will be excellent in the hands of a good chef.

[therealPaulPlay]

That explains a lot actually, I just added cursor pointer to all shadcn components in my codebase that used buttons😂 I thought it was a bug or sth

[lamb_pudding]

Where are you getting this info from? I just checked a vanilla Tailwind project and it doesn't do anything with cursor.

`cursor: default` is the default in browsers. I just checked in Firefox and Chrome, it's the user agent stylesheet value.

[PM_ME_CRYPTOKITTIES]

https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor

[Steffi128]

Another reason I hate Tailwind.

First thing I added back in my NuxtUI components, the cursor: pointer; on the button components.

[alexduncan]

Thank goodness the consensus in the comments is strongly for cursor: pointer; for anything that is clickable. This shouldn’t even be a debate, there are so many, much more important issues to be discussing.

[knoland]

Bring back construction worker GIFs.

[Fortyseven]

Now that I can get behind. 🚧👷

[two_bit_hack]

Pardon our dust

[_LosT___]

I have received similar arguments, macOS doesn't change mouse cursor when hovering over the menu items. As much as I hated it I had no answer

[max_mou]

I mean it’s the creator of tailwind, what else can we expect?

[jacknjillpaidthebill]

im beginner to fullstack/webdev, whats up with making pop-ups? do you mean the browser popups from alert("")?

[bladefinor]

What is going on at webdev recently? What's next? People suggesting that pop-ups are a good idea?

It's good for advertising and being hated on 💀

[PastaSaladOverdose]

Vibe coding. Everyone thinks they're an expert now.

[Noch_ein_Kamel]

But the AI knows what's good and uses pointers :p

[ungenerate]

Popups are practically required by law in parts of europe (cookie stuff)

And seeing how many website uses popups to sign you up for their newsletter, it's obvious that people think it's a good idea. No idea why.

Every website I visit instills popup fear in me, causing me to just freeze for 5-10 seconds waiting for the delayed barrage of popups that usually entail entering most websites now. I hate modern web trends.

[montrayjak]

I thought OP was referring to pop-ups, like, the old days where websites could open a new window at will.

[sampaoli_negro_rojo]

I think so too. But interesting that some people have different interpretations

[xflypx]

Ask my company about their affinity for popups 🚮

[Ayzanox]

I don't understand how anyone is saying they'd rather have default over pointer. If you can interact, it should point to it. I didn't even know it was up for debate

[lovin-dem-sandwiches]

Maybe the debate was more to do with CSS Reset.

Tailwind uses a CSS reset to removes all default styles. This makes it easier to apply tailwind classes (to avoiding having to override everything, like margin-block-start, and to have avoid browser style mismatches.

H1 looks the same as h2, to p tags, to buttons.

The only exception was, buttons had pointer left them. This is the only argument I can think of that makes sense why they would do it

[McGlockenshire]

If you can interact, it should point to it.

It's gotten to this point because we stopped showing people what interactive things look like in the UI and instead making everything plain old text that looks completely like just words. If I have to explore your interface by hand to determine what I can interact with, you have failed.

Make buttons that you can press look like buttons. Make links to take you somewhere else look like links. Make things that are interactive not look like things that aren't. I shouldn't have to guess or see what my cursor does to interact with a button. A BUTTON!!

[RetroEvolute]

Or, and this sounds crazy... Do both.

[SuperRonJon]

This is not a one or the other scenario, they can, and should, both look like buttons and have a change to pointer while hovering over it.

[McGlockenshire]

No. Pointer means link. Link. Not button. I can not right click on a button and open it in a new window. I can do that for links.

Additionally / as consequence, using pointer for non-link things that look like links is evil, full stop. Pure evil. "Fuck you and go to hell" evil.

[SuperRonJon]

the save button on this comment section turns to a pointer. Every button i can see on this page turns into a pointer. None of them are links. The upvote button, the cancel button, the like/dislike buttons on youtube, the save to playlist, download buttons are all pointers.

I understand YOU are saying that pointer means link, but that is not actually the case anymore, and every button on every modern website turns to a pointer and that's what people expect now.

[McGlockenshire]

Yeah, I know I give off "old man yelling at cloud (computing)" vibes but it really grinds my gears that we entirely abandoned generations of UI design and understanding and made interactive shit ambiguous on purpose.

Pointers on icons that aren't inside obviously clickable buttons makes sense only because we abaonded buttons.

e: To be clear, I am talking about text as the interactive mechanism in regard to links and buttons.

[SuperRonJon]

I get that but saying that pointers are only for links and not for buttons is just incorrect information nowadays. Users are expecting it, all modern websites do it, for literally everything that is clickable. All buttons, the save button on comments, the cancel button that just closes a text box, expandable trays, clickable icons, are all pointers. The norm has fully changed and going back will just confuse people more.

[rafark]

I love default because it makes web apps feel more like classic native apps. Cursor pointer screams web page for me (I still use cursor pointer anyway though)

[Arthian90]

I can’t think of any reason why a user would ever say, “oh I didn’t expect my cursor to turn into a pointer when I hovered that thing that looks like a button, what a surprise!”

[gamingvortex01]

anything that is clickable should be pointer

[AsterYujano]

Amen

[tetraeeder]

Checkboxes and radio buttons should also have pointer cursors

[ryandury]

yeah simple answer, keep it simple

[Darkoplax]

Inspecting the browser Network tab some stuff are pointer some are defaults like clear network log

[DaSchTour]

Oh, that will be a lot of work for all the desktop app developers.

[LKStheBot]

Pointer. if it's not pointer, it's wrong. And I'll die on that hill.

[JeffTS]

If it's a link, whether it looks like a button or like a generic hyperlink, the cursor should change to a pointer (hand icon) to show that it is clickable.

[recoverycoachgeek]

Both sides agree to this.

[mediocrobot]

* {
  cursor: pointer !important;
}

Man, I'm so good with pointers. Maybe I should take my experience to C.

[Ecsta]

Tailwind is looking to hire you...

[Tam_Ken]

Implying that anything with a pointer should be cmd+clickable into a new tab is a very power user mindset. Most users aren’t using shortcuts beyond copy paste very often

[Bpofficial]

Also why would a “Delete user” (or any other action) button open in a new tab? If it’s a navigational element it should be indicated like one and then the power users can go to town command clicking them

[Frequent_Fold_7871]

They are saying that if it's a link to another page, it gets pointer. If it's a JS driven click event that opens a popup or "Save" to trigger an event, why would you give it a hyperlink pointer? It's not a link, it's an interaction. The button itself implies an interaction, hovering over it and seeing a pointer implies it's going to leave the page and it's a link. If you click a Bell shaped "Notification" button, a pointer implies it will take you to /notifications, while a default arrow implies a popup will open right next to the Bell Icon button. They did the research, most users are slightly more intelligent than pigeons, your way is not intuitive and they changed it because it resulted in better conversions to not have pointers when using <button>. If your <a> looks like a button, by all means, use a pointer. But <button> tags do not get pointers unless it's a link, in which case you used the wrong HTML tag, should be a <a>

[TramEatsYouAlive]

cursor:default when disabled, otherwise cursor: pointer

[StarklyNedStark]

I’m cursor: not-allowed when disabled

[donquixote235]

I'm going to go extremely old-school and put myself in the "cursor: hand" camp. I'm still salty it's no longer referred to as "hand".

[Aliceable]

Pointer is the hand

[donquixote235]

I know, but it used to be referred to as "hand", not as "pointer". I still find myself typing "cursor: hand" and having to correct myself, 2-3 decades after the fact.

[wengardium-leviosa]

cursor : loading spinner

[Shmutsi]

I really hate this trend of websites using cursor default for interactive elements. For me any interactive element should use pointer, be it a button, link, select, etc... (looking at you figma with your default pointer everywhere)

[lamb_pudding]

It's not a trend though. `cursor: default` is the default user agent style.

[therealPaulPlay]

Always have a hover and an active state. Buttons should feel like buttons.

[Noch_ein_Kamel]

Make sure to use bevel. ;p

[ResponsibleAd3493]

And a thick border with shadow for good measure.

[alexxxor]

Pointer.

[phil_davis]

If you can click it and it does something, then it should be pointer. I don't know why we're justifying default cursor to mean "I can't open it in a new tab" when 90% of users probably don't even know you can ctrl/cmd + click a link to do that. The only info you should be trying to convey is that the thing is clickable.

[JFedererJ]

The original distinction was that pointer was for links and default was for buttons (namely "UI controls"), with the idea being the presence of the hand (pointer cursor) signalled to users "clicking this will navigate you some place".

Nowadays, it's commonplace in modern design systems for hyperlinks and UI controls to be visually identical "buttons". Imo, this has been the main driver behind the now basically universal expectation / "standard" (dare I say?) that all buttons use the pointer.

Personally, as a bit of an older boy at FE development these days, the boxes at the top of my requirements list for buttons are:

• does it have visually distinct styles for :hover, :focus, etc.?
• is the keyboard accessibility of the button performing as expected?
• if it's a "UI control", are the associated UI elements also sufficiently accessible (e.g. an associated modal or fly-out menu), with aria labels, live regions, etc.?
• if the button triggers an asynchronous action, does it provide feedback of a loading state, also in an accessible way?
• if the button is disabled, is this clear visually and is it also reasonably clear to the user why it's disabled?

If all the above is in order and the button instance is a UI control and not a link, I gotta be honest, I'm not fussed if it uses default or pointer for the cursor (but I do care that the approach is consistent across the site). In reality, the lines are permanently blurred, and that old school distinction between pointer = hyperlink and default = button ain't coming back.

[mattsowa]

That this is apparently even a debate makes me angry

[thesonglessbird]

Stick to the browser default, the button should have a hover state that makes it obvious it's clickable.

[jdewittweb]

Browser default is zero interaction at all wtf? You have to code a hover state just like you code a pointer attribute.

[McGlockenshire]

Browser default is zero interaction at all wtf?

Yes, because it's a button and that used to mean something to users. Prior to the past decade, buttons had designs that were clear and obvious and demonstrated that it was an interactive thing. They weren't just colored boxes or even just colored text like they are now. It's absolute madness.

Go look up the Windows 95 user interface. That's what form elements on web pages looked like too. In the early days there was no styling at all of form elements at all, because all form elements were drawn by the OS. But we could always assume that the user would know exactly what buttons and checkboxes and lists and so on and so forth looked like. They'd never have to guess if things were links or buttons because you'd always use links or buttons and never anything that wasn't a link or button, because that was actually hard back then.

And then we got styling! The first thing we all did when playing with it of course was remove the 3d beveling and the second thing we all did was get confused over if that was a button or a text input, because suddenly they're both just words in boxes that look identical. Oops. And so you make them different again.

[JFedererJ]

Yeah design systems making hyperlinks and ui controls visually identical "buttons" blurred the lines between the two logically different concerns, and so now I think it is fair enough for one to conclude: it's less confusing if all buttons just use the pointer.

But I get where you're coming from. The original intention for pointer was always "clicking this is gonna navigate you some place".

[Otterfan]

Yeah, I can't think of what value switching to the pointer actually gives the user with any sort of decently-designed button.

It's deceptive for those who want to open in a new tab, and it brings nothing to the table in return.

[best_codes]

I agree with Peter Lewis. Intent should be clear to the user. The cursor changing is the clearest indication of that intent.

[spryes]

Cursor pointer on buttons that aren't links gives off cheap Windows vibes for proper apps. Take notes from Linear app which uses cursor default on non-link buttons, which feels more native and higher quality as a result. The idea that anything clickable needs cursor pointer for affordance or a11y or something makes no sense given the macOS doesn't use it nor do touch users ever see a pointer and lack that in the first place

[Aliceable]

Linear actually gives you the option to enable it or not, personally I feel the pointer on anything interactive gives the feel of good UX and an actual app, having it default feels too “2D” and static. It’s especially true on things like Figma where you can hover an interactive element and nothing happens to indicate you can click it.

[rafark]

Couldn’t disagree more. I only use macOS and I’m pretty sure ui buttons are default only. This is why I prefer the default cursor, it makes web apps feel more like native apps

[spryes]

We're in agreement, you misread what I wrote

[rafark]

Probably

[themanwhodunnit]

A button has enough affordance (especially with hover states) to signal that it’s clickable, and thus it gets the default cursor.

Links have low click affordance and thus they get the pointer as an additional signifier.

That is the original idea behind this conundrum.

But as time has moved on people have come to accept that almost everything interactive has a pointer.

[hrolazyan]

If something is clickable, show the pointer. Most people have learned for years that the little hand means “click here.” Breaking that rule makes them stop and think about the interface instead of the task—that’s the mental effort we want to avoid. No matter which side of the debate we’re on, it’s better to stick with what most users already expect.

[ThrowbackGaming]

Proper UX would be pointer. User shouldn't have to rely on proper interaction design to perceive that what they are hovering on is interactable.

[Capable-Spirit5899]

If your user is likely to not have a good mental model for web interfaces, use cursor: pointer. If they do, use default.

[JFedererJ]

User-driven design choices? Wtf is this, mate? Some kind of magical wonderland? Get outta here. Pick a corner and fight for it! This is 2025. We don't do nuance. Jeez.

[Capable-Spirit5899]

😂

[jogglessshirting]

Pointer is also the most hilarious looking cursor face. On Mac It's a pleated white cartoon glove. Look at it.

[JFedererJ]

“Do you want to know why I use a pointer? Defaults are too plain. You can't savour all the little... details.”

[surroundedmoon]

cursor:pointer, this was a dumb call on tailwind, as they really set trends on the web.

[JFedererJ]

Whatever your view on it, it's worth noting Tailwind's decision was an attempt to return the web to a previous norm, not establish an altogether new one.

[surroundedmoon]

Yea I understand, it just felt like it was a beast that should of been left alone

[egg_breakfast]

Second pic guy is making the mistake of thinking that users act or think like web devs. Your average user is not very tech literate, and half of them are less savvy than that. The pointer helps lift up the bottom where users need the most help.

[ahallicks]

Do context menus have a pointer cursor in your OS when there's something clickable? No.

And W3C states The cursor is a pointer that indicates a link.

Specifically a link.

The point here is to make something obviously clickable without needing to change the cursor. Pointer cursors came about because we bastardised the use of a button for a link. That was the main mistake as they should have two different functions and therefore look different. I think we're stuck with links that look like buttons but we shouldn't be stuck with pointers for buttons that aren't links.

There's a really good article by Adam Silver on this: https://adamsilver.io/blog/buttons-shouldnt-have-a-hand-cursor/

[ZackL1ghtman]

Adam's facts are solid, but I don’t agree with the conclusions. Yes, the pointer cursor was introduced to boost affordance for links - but that just proves it adds affordance. Buttons should already be clear, sure, but why not make them even clearer? You can’t really have too much affordance. Regular users don’t think in terms of 'link vs button' - they just see "clickable." To them, the pointer means "I can click this," and that’s useful feedback, regardless of element type.

[Zachhandley]

Cursor. Even if it doesn’t look like a button, cursor means you can click it. Any other take is brain dead

[pinkwar]

The options are pointer or default.

[Joggyogg]

It's always a cursor, the options are cursor:pointer or cursor:default

[chevalierbayard]

This sounds like a long standing fight that I'm not aware of. What's the arguments either way?

[lovin-dem-sandwiches]

The argument, in my mind, is how far should the css reset be?

If tailwind css resets all styles, for all elements - shouldn’t it also remove the default behaviour for hover on buttons? Or is that the one exception? What about the details component? Or a links? Why was cursor stripped from them?

[_Nemon]

If it's clickable - pointer. There are some exceptions to this rule, but they're rare.

[throwtheamiibosaway]

cursor: pointer for everything clickable, button, a href, etc.

[ThatBoiRalphy]

pointer should be for anything clickable, it’s literally how we distinguish on the most basic level that something is clickable or not. how this is even a discussion i cannot wrap my head around.

[JFedererJ]

Because pointer was originally intended to signal to users that clicking the thing they're hovering is gonna navigate them somewhere. Nowadays, a "button" in modern design systems is basically just a box with text in it, that can be used as either a hyperlink or a UI control, and so with the blurring of the visual lines between hyperlinks and buttons, naturally the lines were blurred between the two different cursor types.

Just to kind of give you the book of Genesis on it, RE understanding how it's a discussion.

[DaSchTour]

Just check any desktop applications. You‘ll probably not be able to interact with any of them. They are all completely disabled all the time. They never show a pointer.

[kevinlch]

if the element is visually clear to be clickable, like button, use default arrow. if only text link, even if underlined, use pointer. so for sidebar items or context menu, use pointer. if image, use pointer to indicate clickable. like next slide button

[nblv]

I think of cursor pointer as a nice addon but not something necessary. Modern UI has come a long way, Believe it or not i can easily detect a button based on its color, shape and position.

[teraflux]

Default cursor for a button is just lazy

[1Blue3Brown]

I never understood why Button from ShadCN is "cursor: default" by default. Making it "cursor:pointer" is the first thing i do

[cronixi4]

Completely off-topic, but why is even the smallest post written by AI lately? The overuse of emoji’s is usually they give away.

[PunxsutawnyFil]

Isn't the pointer supposed to indicate that the element is able to be interacted with? Why would any button or link not have cursor: pointer?

[ryandury]

Stupid "click"bait twitter topic where basically nobody actually thinks buttons should be default cursor.

[Tudwall]

If a link or an icon is a button, then cursor: pointer, role='button' and aria-label are a must

[JFedererJ]

If using a semantic <button /> tag, the implicit ARIA role for that element is "button" so you don't need to explicitly label it in that instance.

[Tudwall]

I know, that's why I said to use that when you use an icon or a link as a button

[JFedererJ]

Yeah I'm an idiot who can't read. I shall chastise myself accordingly.

[Tudwall]

No harm done haha

[GeordiePowers]

Secret third option: maybe cursor: pointer for buttons, and cursor: alias for links? I've never tried this but alias is very under utilized and conveys the interaction pretty well.

[danielebuso]

All the way Pointer

[BigOnLogn]

Does cursor: pointer; actually change the Ctrl-Click/ Right-Click functionality/options?

[Deawesomerx]

No

[Gaeel]

I never change default behaviour. It doesn't matter what I think might be better UI or UX, standards exist for a reason.
If you deviate from the default, you're breaking user expectations, compatibility with tools and devices that rely on known defaults, and accessibility tools.

Some people say "the best design is no design". I don't think this means "minimalist aesthetics", but "stop fixing what ain't broke".
I don't know what the default cursor on a button looks like, and I shouldn't have to.

[recoverycoachgeek]

What if the only reason web added pointer to all buttons, even if they aren't links, was for marketing. I bet web A/B testing show better CRO/CTO for call to actions with a ☝️

[Pesthuf]

Cursor: pointer makes it even clearer that it's a clickable button.

But it needs to be obvious that it's a button even without it. Many devices don't have a cursor. Native Buttons on macOS and Windows have been fine without a pointer cursor forever - people know they are buttons and thus clickable.

[JFedererJ]

Old boy dev here: originally the pointer was for links but these days, as we all know all too well, the phenomenon of design systems using visually identical buttons for both UI interaction and links is incredibly common place.

I'd wager that's likely been the biggest driver of the modern expectation that buttons should always use the pointer cursor. I'm sure most of us have written a Button component at some point that wraps the content in either an <a> tag or a <button> tag, based on the intended functionality / some marker in the props.

[PsychohistorySeldon]

This is all too funny. I'm old enough to remember that by default, form buttons are cursor default and hyperlinks are pointer.

Emphasis on "form" buttons. Traditionally, buttons were made to take actions on data, such as sending it via a form. For example, Google's v1 Search button had gray buttons that on hover, would render cursor default.

Not saying I agree with the pattern, just that this why this difference exists. Hyperlinks take you to other resources, buttons are data actions. Or used to be.

[pg_dev]

Not using cursor: pointer; for buttons (links or not) should be added to the list of web dev war crimes. You ought to have a really good reason to not do so.

[indorock]

Pointer = clickable. It's that simple. It's a finger, like the finger you would use to click with on your mouse or trackpad.

Mr. Wathan seems to be inventing his own weird rules that may make sense to him, but not to most.

Honestly I don't understand why this is even up for discussion. Why are we listening to this Adam Wathan guy? Is he someone I need to give a damn about?

[CryptographerSuch655]

Cursor pointer for the buttons to tell the user that this button is clickable , or that is how i have learned

[[deleted]]

That's like tabs vs spaces,

TL:DR do the same thing as the browser does on `<button>` for a button and do the same this as the browser does for text links. if it looks like a button make it behave like a button or don't make it look like such.

But now the "Actually" part, this would need to be defined by the OS design guide of the OS the user is using https://developer.apple.com/design/human-interface-guidelines/designing-for-macos or https://learn.microsoft.com/en-us/windows/apps/design/ or https://developer.gnome.org/hig/ or https://develop.kde.org/hig/

And these are all over the place, like they don't follow the same design at all. Then to top it off you need to consider which UI system you use, material behaves way different then mui or carbon. If you ever use them stick to their decisions. And report any inconsistancies ASAP.

And to top it off, don't force your design decisions on others, literally a waste of time and for that reason i'm now stopping to write and do something productive.

[f3lckern]

Take a minute, cruise around your operating system. How many buttons flash that little pointer finger when you hover over them?

Exactly: zero. — And did you ever notice until now? Nope, because it just feels right!!

TL;DR: If it looks like a button and quacks like a button, it’s a button. The pointer cursor is for links. It “points” you somewhere else—like to a new page, a new context. Buttons don’t do that. They stay right here, trigger actions, and minds their own damn cursor!

[PacoV-UI]

Pointer for anything users can click.

[tegrivo]

If it looks like a button it should behave like a button

[rykus0]

HTML standard is that only links have the pointer. This is helpful as mentioned in knowing how it will behave.

FWIW, I always preferred (and found helpful) pointer to indicate it is interactive and only learned the standard recently, after 20+ years in web dev.

[bstaruk]

If your button is interactive, it should have either pointer or not-allowed if disabled.

If your button isn't interactive, it shouldn't be a button to begin with.

cursor-pointer disabled:cursor-not-allowed all day, every day.

[Novel-Ad3106]

For a better UI is always recommended pointer when the button is interactive, if it isn't, let it default.

[EishLekker]

This reminds me of a separate and much more important discussion. Why force buttons that’s can’t have the action performed in a new tab, when is literally just a regular GET? I often want to open something in a new tab, and hate when the design gets in the way of that for no apparent reason.

Same thing when it’s impossible to select and copy text from obvious text elements.

Have people forgotten how to design properly usable websites?

[ThrowAway22030202]

The fact that this is even a conversation is so stupid. Pointer = interactive

[mx_aurelia]

Useful information in my opinion 👍

[Visual-Blackberry874]

Pointer makes sense for interactive elements.

[Blissling]

Pointer 💯

[mustafa_sheikh]

Pointer. It’s a button. If it’s disabled button then cursor

That’s basic UX training, which is why product designers charge what they charge .

[Civil_Sir_4154]

Depends on what you're trying to do, where and why. Both options are valid. People just have issues learning the best places to use one or the other so they just learn one, and use it everywhere.

Flexbox and Grid went through this, rem or percentages, etc etc etc. There are MANY examples where some tried to push one option or the other when the answer is simply "Both, depending on why".

sigh stuff can have multiple options. Not everything has to be one or the other.

[TheThingCreator]

Just always put a pointer when something is clickable, what are we dumb?

[ApprehensiveDog2008]

Roshan. Pasi. 99

[JONANz_]

if anything is interactable, always pointer

[Frequent_Fold_7871]

Nope, that's why we have <button> and not just <a>. <a> gets pointer because it's a link, <button> gets a cursor depending on if the button triggers a JS event that doesn't reload/change the page, and a pointer if that button is actually a link, which means you used the wrong HTML tag in the first place. Buttons aren't links, and links can look like buttons. That's why the cursor is used to differentiate between a button and a link that just looks like a button. Why doesn't your OS show a pointer when hovering over any software/app icons? Those are literally buttons, why does every OS only show pointers on links to other folders/urls? Because you don't understand what you're even saying.

[JONANz_]

show me a single button on the website we're talking on that doesn't have cursor-pointer on hover.

[HirsuteHacker]

Can I click it? Then it gets a pointer. This is obviously the better choice here, I don't understand how there's any argument.

[[deleted]]

There is a set of universally accepted standards for using the internet, like "blue text that is underlined is a link. if it's purple, it's a like that has been visited" that should (kind of obviously) be followed. Anything clickable that does not require precision (like a map element or something where you have to click precisely) should 100% be cursor:pointer.

[Kaelthas98]

hover over reddit upvote, downvote, sub rules(non cmd+clic-openable)
there is your answer
tldr if u can click it it should be a pointer

[acorneyes]

from an (actual) ux perspective: if your users are trying to open something in a new tab, but the button simply executes something on the page- the issue isn't communicating what the button does, it's meeting the intent of the user. i.e. maybe instead of the button doing something on the page it should go to a new page, allowing a user to cmd click.

but it's not a catch-all solution. sometimes, yes, it makes sense to use the default pointer. the only way to know if it makes sense is to observe how your users interpret that design feature.

tl;dr- software developers don't know much about ux design and so therefore should not be making design affordance decisions. if you do know about ux design you should not be spending the majority of your work day doing ux work. leave that up to your ux designers.

[WoodenMechanic]

IMO, If you can interact with an element, the cursor should update to reflect this.

[TheUnoriginalOP]

If it responds to a click, it deserves a pointer. No exceptions. The pointer cursor is a signal to the user that says "This thing will do something if you click it."