Mastering Buttons in React: A Deep Dive into Interactivity Design🧑‍🎨

In the world of web development, React is a popular JavaScript library used to create interactive user interfaces. One of the most essential components in any React application is buttons, which allow users to take action or navigate to different pages. This blog post aims to provide a comprehensive guide to buttons in React, covering everything from basic button creation to advanced customization and styling.

To Click or Not to Click: A Div vs. Button vs. Anchor Tag Debate

When it comes to creating clickable elements in HTML, the answer to which tag to use - an anchor tag, a button tag, or something else entirely - can be a nuanced one. In 99% of cases, it is highly recommended to avoid using a div for a clickable element. Here's why:

• Divs are not focusable, meaning that the tab key won't move the focus to a div as it would for other buttons on your device.
• Screen readers and other assistive technologies don’t recognize divs as clickable elements, making them inaccessible to some users.
• Divs don't translate certain key inputs, such as space bars or return keys, into clicks when focused.

While it's possible to work around some of these issues by adding extra attributes, like:

// ❗️Trying to make a div *mostly* behave like a button...
export function MyDivButton() {
  function onClick() { ... }
  return (
    <div
      className="my-button"
      tabindex="0" // Makes the div focusable
      role="button" // Hint to screen readers this is clickable
      onClick={onClick}
      onKeydown={(event) => {
        // Listen to the enter and space keys when focused and call the
        // click handler manually
        if (event.key === "Enter" || event.key === "Space") {
          onClick()
        }
      }}
    >
      Div Button
    </div>
  )
}

But it can quickly become a tedious process that may not solve all the problems.

Button to the Rescue: A Better Solution

Thankfully, there's a more straightforward solution in most cases: the button tag. The button tag behaves as you would expect, acting just like any other button on your device and being recognized by users and accessibility tools. It's focusable, accessible, responsive to keyboard input, and has a compliant focus state styling.

Styling buttons, however, can be a challenge. Browsers often add their own styling to button elements, making it difficult to apply your own styles. To overcome this, you can either reset properties line by line or use the all: unset property to remove all special styling and then add your own focus state with an outline of your brand color with sufficient contrast.

It's important to note that any button inside a form is treated as a “submit” button by default and will submit the form when clicked.

function MyForm() {
  return (
    <form onSubmit={...}>
      ...
      <button type="submit">Submit</button>
      {/* ❗️Clicking "Cancel" will also submit the form! */}
      <button onClick={...}>Cancel</button>
    </form>
  )
}

To prevent this behavior, you can add the type="button" attribute to the button element, making it a regular clickable element rather than a submit button.

Links to Other Pages: A Different Story

One big exception to our rule is using buttons for links to other pages:

// ❗️Making a 'button' behave like a link
function MyButtonLink() {
  return (
    <button
      type="button"
      onClick={() => {
        location.href = "/"
      }}
    >
      Don't do this
    </button>
  )
}

There are several issues with using buttons for click events to link to pages:

• They are not crawlable, affecting SEO negatively.
• Users can't open the link in new tabs or windows, such as with cmd/ctrl-click or right-click "open in new tab".

For these reasons, it's best to avoid using buttons for navigation. That's where the anchor tag (a) comes in:

// ✅ Good Way
function MyLink() {
  return (
    <a href="/">
      Do this for links
    </button>
  )
}

Anchor tags offer all the benefits of buttons - being accessible, focusable, and responsive to keyboard input - without extra styling.

But before you start using anchor tags for everything clickable, it's important to note that an anchor tag without an href value no longer behaves like a button.

So, let’s make sure to use buttons for buttons and anchors for links.

In conclusion, the choice between using a button, anchor, or div for your clickable elements in React can be a tricky one, but with a little bit of know-how and understanding, you can create interactive and accessible user interfaces with ease. Whether you're looking to style a basic button or navigate between pages, React has got you covered. So go ahead, unleash your creativity, and make your applications truly come to life!