Skip to main content
A link that is styled to look like a button, optimized for email clients.

​
Installation

npm install @react-email/button -E

​
Usage

Add the component to your email template. Include styles where needed. 
import { Button } from "@react-email/button";

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

​
Props

The Button component accepts all standard HTML anchor (<a>) element attributes.
​
href
string
Link to be triggered when the button is clicked
​
target
string
default:"_blank"
Specify the target attribute for the button link
​
children
ReactNode
The content of the button
​
style
React.CSSProperties
Inline styles for the button. Padding is specially handled to work across all email clients, including Outlook

​
Styling Example

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

const Email = () => {
  return (
    <Button
      href="https://example.com"
      style={{
        backgroundColor: "#5469d4",
        borderRadius: "4px",
        color: "#fff",
        fontSize: "16px",
        fontWeight: "bold",
        padding: "12px 24px",
      }}
    >
      Get Started
    </Button>
  );
};

​
Implementation Details

The Button component uses advanced techniques to ensure padding works correctly across all email clients, including Outlook which doesn’t support padding on anchor elements. It uses conditional comments and special MSO properties to achieve consistent rendering.

​
TypeScript

export type ButtonProps = Readonly<React.ComponentPropsWithoutRef<'a'>>;

​
Email Client Support

This component was tested using the most popular email clients.
GmailApple MailOutlookYahoo! MailHEYSuperhuman
✔✔✔✔✔✔

Build docs developers (and LLMs) love

Get started for freeTalk to us