The Button Cheat Sheet

Hacker News The Button Cheat Sheet

  1. Rating: Good, use it! 🥳

    <button>

    Yea or nay?

    </button>

    Details

    • That’s a proper button!
    • It’s focusable
    • It has correct key events by default
    • Correct button role
    • Supports HTML content
    • All in all beautiful! ❤️
  2. Rating: Okay, but <button> offers more flexibility! 🙂

    <input type="button" value="Yea or nay?">

    Details

    • That’s a proper button!
    • It’s focusable
    • It has correct key events by default
    • Correct button role
    • Supports only text content
  3. Rating: The worst, don’t use it! 🤮

    <div>

    Yea or nay?

    </div>

    Yea or nay?

    • That’s not a button!
    • Not keyboard focusable
    • No key events by default
    • No semantic button role
    • Shows wrong cursor on hover
  4. Rating: Really bad, don’t use it!

    <div tabindex="0">

    Yea or nay?

    </div>

    Yea or nay?

    • That’s not a button
    • No key events by default
    • No semantic button role
    • Shows wrong cursor on hover
  5. Rating: Bad, don’t use it!

    <div tabindex="0" role="button">

    Yea or nay?

    </div>

    Yea or nay?

    • It feels like a button, but it’s still not a proper button
    • No key events by default
    • Shows wrong cursor on hover
  6. Rating: Hell no, don’t use it!

    <img src="button.png">

    An image that looks like a button

    Details

    • That’s an image, not a button
    • Not keyboard focusable
    • No key events by default
    • image instead of button role
    • No accessible name
  7. Rating: Hmm…no, don’t use it!

    <a>

    Yea or nay?

    </a>

    Yea or nay?

    Details

    • That’s a placeholder link, not a button
    • Not keyboard focusable
    • No key events by default
    • link instead of button role
    • Shows wrong cursor on hover
  8. Rating: Nope, don’t use it!

    <a role="button" tabindex="0">

    Yea or nay?

    </a>

    Yea or nay?

    Details

    • That’s a placeholder link, not a button
    • No key events by default
    • Shows wrong cursor on hover
  9. Rating: Please, just don’t do that!

    <button>


    <a href="www.htmhell.dev">

    Yea or Nay?

    </a>


    </button>

    Details

    • Don’t nest interactive elements
    • If you need a link that looks like a button, style the link accordingly

https://www.buttoncheatsheet.com/

Sent with Reeder