Back to React Email

Button

apps/docs/components/button.mdx

0.0.151.2 KB
Original Source

import Support from '/snippets/support.mdx'

<Info> 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. </Info>

Install

Install component from your command line.

<CodeGroup>
sh
npm install @react-email/components -E

# or get the individual package

npm install @react-email/button -E
sh
yarn add @react-email/components -E

# or get the individual package

yarn add @react-email/button -E
sh
pnpm add @react-email/components -E

# or get the individual package

pnpm add @react-email/button -E
</CodeGroup>

Getting started

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

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

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

Props

<ResponseField name="href" type="string" required> Link to be triggered when the button is clicked </ResponseField> <ResponseField name="target" type="string" default="_blank"> Specify the target attribute for the button link </ResponseField> <Support/>