DEV Community

Discussion on: On Buttons and Links

renatodeleao profile image
Renato de Leão • Edited on

It's just sad that your tweet was so controversial and apparently no one read this excelent post, but eh we're talking about social media 🤷‍♂️... it is not designed for people to have actual productive discussions.

Speaking of design, I'm a retired designer so I can confirm that this quote is pretty accurate:

The fact is that designers always, always ask for links that look like buttons and buttons that look like link

One subtle but important difference though that you also highlight some paragraphs bellow: sometimes the designer does it, not because he wants to be a pain in the ass, but because the context where an "user action" is required asks for that particular styling, for the benefit of customers, not developers/designers.

Your post examples are excelent and highlight the myriad of complex edge cases that can happen, but I can think of one that would be a particular good fit for your twitter audience:

twitter button-link

  • a link that looks like a button
  • but that act as a link (a navigation occurs even though unnoticiable to most users — the url is replaced)
  • But we can argue that at the same time acts as a button, since "navigation" is "silent", it does feel like a button to trigger that tweet popup.

So should the designers made that CTA look like an anchor just for the sake of semantics? IMO, no. They made it stand out for quicker/easier reach for the users, it's the devs job to care about semantics.

Another super simple example from top of my mind: in 99% of the landing pages that we visit, you'll see a shinny CTA that looks like a button, but that in fact is a link that redirects you to signup/login page. Again, is that wrong? No. "Form should follow function".

stripe button-link

Woah this got a bit longer that I expected, anyways been in your shoes for way too many times. I've done both, but currently I'm also leaning towards having a single smart <app-button>, although most of the times a convinience <app-link> emerges, that is simply a wrapper around with the pre-set styling props that makes it "look like a link" by default.

Great post! Cheers, keep being controversial!

claviska profile image
Cory LaViska Author

Thank you for sharing — these are great examples! As you’ve shown, it’s not always black and white. For those times, a single component is, IMO, more convenient and foolproof than two separate ones with matching styles.