mirror of
https://github.com/resend/react-email.git
synced 2026-09-14 14:18:02 +08:00
Gabriel Miranda
66 lines
1.2 KiB
Plaintext
66 lines
1.2 KiB
Plaintext
---
|
|
title: "Button"
|
|
sidebarTitle: "Button"
|
|
description: "A link that is styled to look like a button."
|
|
"og:image": "https://react.email/static/covers/button.png"
|
|
icon: "b"
|
|
---
|
|
|
|
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
|
|
npm install react-email -E
|
|
```
|
|
|
|
```sh yarn
|
|
yarn add react-email -E
|
|
```
|
|
|
|
```sh pnpm
|
|
pnpm add react-email -E
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
## Getting started
|
|
|
|
Add the component to your email template. Include styles where needed.
|
|
|
|
```jsx
|
|
import { Button } from "react-email";
|
|
|
|
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/>
|