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!

Currently, in beta, React Email allows you to write emails with the same syntax as React. This means you can easily create and edit email templates using JSX.

Let's get started 🚀

1. Project Setup

First, start with setting up the project in your system.

• Paste the following code in your terminal:

npx create-email@latest

• This will create a new folder called react-email-starter with a few email templates.

• Now, change your current directory by:

cd react-email-starter

• Install dependencies by running:

npm install

• Alright, now spin it up for the server by:

npm run dev

• If everything is done right you will see the following screen on "http://localhost:3000/"

2. Generating Email with React!

• Let's start editing the pre-build template by the awesome "React Email Team".

• Although you can also explore more templates or create your own custom one by following the documentation.

• I am going with the vercel one:

• Paste the following code:

import { Button } from '@react-email/button';
import { Container } from '@react-email/container';
import { Head } from '@react-email/head';
import { Hr } from '@react-email/hr';
import { Html } from '@react-email/html';
import { Img } from '@react-email/img';
import { Link } from '@react-email/link';
import { Preview } from '@react-email/preview';
import { Section } from '@react-email/section';
import { Text } from '@react-email/text';
import * as React from 'react';

export default function Email() {
  return (
    <Html>
      <Head />
      <Preview>Join my team</Preview>
      <Section style={main}>
        <Container style={container}>
          <Section style={{ marginTop: '32px' }}>
            <Img
              src="https://dipeshjaiswal.com/static/logos/dipeshjaiswal_logo.png"
              width="40"
              height="37"
              alt="Vercel"
              style={logo}
            />
          </Section>
          <Text style={h1}>
            Join <strong>My Awesome</strong> Project <strong></strong>
          </Text>
          <Text style={text}>Hello zenorocha,</Text>
          <Text style={text}>
            <strong>John Doe</strong> (
            <Link href="mailto:youremail@domain.com" style={link}>
            youremail@domain.com
            </Link>
            ) has invited you to the <strong>My Project</strong> team.
          </Text>
          <table
            style={spacing}
            border={0}
            cellPadding="0"
            cellSpacing="10"
            align="center"
          >
            <tr>
              <td style={center} align="left" valign="middle">
                <Img
                  style={avatar}
                  src="/static/myemoji.png"
                  width="64"
                  height="64"
                />
              </td>
              <td style={center} align="left" valign="middle">
                <Img
                  src="/static/vercel-arrow.png"
                  width="12"
                  height="9"
                  alt="invited you to"
                />
              </td>
              <td style={center} align="left" valign="middle">
                <Img
                  style={avatar}
                  src="https://dipeshjaiswal.com/static/logos/dipeshjaiswal_logo.png"
                  width="64"
                  height="64"
                />
              </td>
            </tr>
          </table>
          <Section style={{ textAlign: 'center' }}>
            <Button
              pX={20}
              pY={12}
              style={btn}
              href="https://domain.com/teams/invite"
            >
              Join the team
            </Button>
          </Section>
          <Text style={text}>
            <br />
            or copy and paste this URL into your browser:{' '}
            <Link
              href="https://domain.com/teams/invite"
              target="_blank"
              style={link}
              rel="noreferrer"
            >
              https://domain.com/teams/invite
            </Link>
          </Text>
          <Hr style={hr} />
          <Text style={footer}>
            This invitation was intended for{' '}
            <span style={black}>zenorocha</span>.This invite was sent from{' '}
            <span style={black}>204.13.186.218</span> located in{' '}
            <span style={black}>São Paulo, Brazil</span>. If you were not
            expecting this invitation, you can ignore this email. If you are
            concerned about your account's safety, please reply to this email to
            get in touch with us.
          </Text>
        </Container>
      </Section>
    </Html>
  );
}

const main = {
  backgroundColor: '#ffffff',
  margin: '0 auto',
};

const container = {
  border: '1px solid #eaeaea',
  borderRadius: '5px',
  margin: '40px auto',
  padding: '20px',
  width: '465px',
};

const logo = {
  margin: '0 auto',
};

const h1 = {
  color: '#000',
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: '24px',
  fontWeight: 'normal',
  textAlign: 'center' as const,
  margin: '30px 0',
  padding: '0',
};

const avatar = {
  borderRadius: '100%',
};

const link = {
  color: '#067df7',
  textDecoration: 'none',
};

const text = {
  color: '#000',
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: '14px',
  lineHeight: '24px',
};

const black = {
  color: 'black',
};

const center = {
  verticalAlign: 'middle',
};

const btn = {
  backgroundColor: 'rgb(0,199,255)',
  borderRadius: '5px',
  color: '#fff',
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: '12px',
  fontWeight: 500,
  lineHeight: '50px',
  textDecoration: 'none',
  textAlign: 'center' as const,
};

const spacing = {
  marginBottom: '26px',
};

const hr = {
  border: 'none',
  borderTop: '1px solid #eaeaea',
  margin: '26px 0',
  width: '100%',
};

const footer = {
  color: '#666666',
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: '12px',
  lineHeight: '24px',
};

• The output will look like this:

• You can always play with your favorite colors & theme in your favorite framework React😉.

3. Let's Setup Mailing Integration

• Once, you are happy with your email it's time to start sending it to the user.

• I will be using Nodemailer but you can check other as well in the documentation.

• First, install the following dependencies:

npm install @react-email/render nodemailer

• Now, Create a new file and paste the following code:

import * as React from 'react';
import { render } from '@react-email/render';
import nodemailer from 'nodemailer';
import MyCustomEmail from './vercel-invite-user';

const transporter = nodemailer.createTransport({
  host: 'smtp.ethereal.email',
  port: 587,
  secure: false,
  auth: {
    user: 'my_user',
    pass: 'my_password',
  },
});

const emailHtml = render(<MyCustomEmail />);

const options = {
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'My Awesome Project',
  html: emailHtml,
};

transporter.sendMail(options);

• The render() the function returns your custom React Email template in HTML format, which can be understood by mailing servers like Gmail or Outlook.

• You can then pass this HTML to your mailer, in this case, Nodemailer Transporter.

• And that's all you need to create beautiful Emails with React.

4. Preview your Email

• If you come over this way, you can actually send yourself a preview of this.

• Click on the "Send" button in the top right corner and type in your own email.

• Click Send and you'll receive a preview of your email in your inbox, and that's all you need to create beautiful emails with React.

In conclusion, React Email allows developers to create beautiful and functional emails with the power of React and TypeScript. By using pre-built templates or creating custom designs, developers can easily create emails that are both visually appealing and functional. With the added benefit of being able to preview and send emails directly from the application, React Email makes the process of building emails a much more enjoyable and efficient experience. Give React Email a try and see the difference it can make in your email development process.