Skip to main content
A hyperlink to web pages, email addresses, or anything else a URL can address.

​
Installation

npm install @react-email/link -E

​
Usage

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

const Email = () => {
  return <Link href="https://example.com">Example</Link>;
};

​
Props

The Link component accepts all standard HTML anchor (<a>) element attributes.
​
href
string
The URL to link to
​
target
string
default:"_blank"
Specify the target attribute for the link
​
children
ReactNode
The text or content to display as the link
​
style
React.CSSProperties
Inline styles for the link. Default color is #067df7 with no text decoration

​
Default Styles

The Link component includes these default styles:
  • color: #067df7 - Blue link color
  • textDecorationLine: none - No underline by default
You can override these by passing your own styles.

​
Styling Example

import { Link } from "@react-email/link";

const Email = () => {
  return (
    <Link 
      href="https://example.com"
      style={{
        color: "#8b5cf6",
        textDecoration: "underline",
      }}
    >
      Visit our website
    </Link>
  );
};

​
TypeScript

export type LinkProps = 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