Semantics: Quite often in the email world we talk about buttons, when actually we mean links. Behind the scenes this is a <a> tag, that is styled like a <button> tag.

Install

Install component from your command line.

npm install @react-email/components -E

# or get the individual package

npm install @react-email/button -E

Getting started

Add the component to your email template. Include styles where needed.

import { Button } from "@react-email/components";

const Email = () => {
  return (
    <Button
      href="https://example.com"
      style={{ color: "#61dafb", padding: "10px 20px" }}
    >
      Click me
    </Button>
  );
};

Props

href
string
required

Link to be triggered when the button is clicked

target
string
default: "_blank"

Specify the target attribute for the button link

Support

All components were tested using the most popular email clients.

Gmail

Gmail

Apple Mail

Apple Mail

Outlook

Outlook

Yahoo! Mail

Yahoo! Mail

HEY

HEY

Superhuman

Superhuman