Making a button

Some opinions and facts about the html button element. This is meant to be a living document.

Opinions Facts, and Accessability

  • Often other elements will look like a button but will keep its own behavior. Make a top level class to initialize the base button style like css frameworks do. I use button like bulma does. The following classes should be modifiers or extensions of the base style.
  • The default type of an html element is submit. It makes sense because of history but its kinda crazy that this is the case today. This means if you want to make sure none of your buttons accidentally post your form make sure to always use type="button".
  • Buttons should never be links. They should be scoped to update UI on the current page.
  • Button text should say what it does. This is not a place to be cryptic. Screen readers will use this text.
  • I can't recommend enough using a span to wrap text inside the button. This makes vertically centering text much easier and span's are display: inline by default which just makes sense for the use case.
  • If a button shows or hides UI on the page then aria-expanded and aria-controls should be used to indicate the state of the UI and to point to what UI is controlled by the button.
  • Never remove the outline style. Fight all differing opinions.

Leave a comment