Buttons email templates

One Button

import {
  Body,
  Button,
  Container,
  Font,
  Head,
  Html,
  Preview,
  Row,
  Section,
  Tailwind,
} from '@react-email/components'
import * as React from 'react'

export const ButtonsOne = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Buttons one</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section className="text-center">
              <Row>
                <Button
                  className="w-full rounded-lg bg-indigo-600 py-3 font-semibold text-white"
                  href="#"
                >
                  Explore
                </Button>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default ButtonsOne

One Button

Two Buttons

import {
  Body,
  Button,
  Container,
  Font,
  Head,
  Html,
  Preview,
  Row,
  Section,
  Tailwind,
} from '@react-email/components'
import * as React from 'react'

export const TwoButtons = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Buttons with header</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section className="text-center">
              <Row>
                <Button
                  className="w-[180px] rounded-lg bg-indigo-600 py-3 font-semibold text-white"
                  href="#"
                >
                  Explore
                </Button>
                <Button
                  className="ml-4 w-[180px] rounded-lg border border-solid border-gray-200 bg-white py-3 font-semibold text-gray-900"
                  href="#"
                >
                  Buy
                </Button>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default TwoButtons

Two Buttons

Buttons with header

Preview

Unlock code

import {
  Body,
  Button,
  Container,
  Font,
  Head,
  Heading,
  Html,
  Preview,
  Row,
  Section,
  Tailwind,
  Text,
} from '@react-email/components'
import * as React from 'react'

export const ButtonsWithHeader = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Buttons with header</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section className="text-center">
              <Row>
                <Text className="m-0 text-lg font-semibold text-indigo-600">
                  What’s new
                </Text>
                <Heading
                  as="h1"
                  className="m-0 mt-2 text-4xl font-semibold text-gray-900"
                >
                  Designing with Furniture
                </Heading>
                <Text className="text-[16px] text-gray-500">
                  Unleash your inner designer as we explore how furniture plays
                  a vital role in creating stunning interiors, offering insights
                  into choosing the right pieces, arranging them harmoniously,
                  and infusing your space with personality and style
                </Text>
              </Row>
            </Section>
            <Section className="mt-4 text-center">
              <Row>
                <Button
                  className="w-[180px] rounded-lg bg-indigo-600 py-3 font-semibold text-white"
                  href="#"
                >
                  Explore
                </Button>
                <Button
                  className="ml-4 w-[180px] rounded-lg border border-solid border-gray-200 bg-white py-3 font-semibold text-gray-900"
                  href="#"
                >
                  Buy
                </Button>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default ButtonsWithHeader

Buttons with header

Buttons store

Preview

Unlock code

import {
  Body,
  Button,
  Column,
  Container,
  Font,
  Head,
  Heading,
  Html,
  Img,
  Preview,
  Row,
  Section,
  Tailwind,
  Text,
} from '@react-email/components'
import * as React from 'react'

// Download the asset and use your own base url here
const baseUrl = 'https://www.reactemailtemplate.com/'

export const ButtonsStore = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Buttons with header</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white p-8">
            <Section className="text-center">
              <Row>
                <Text className="m-0 text-lg font-semibold text-indigo-600">
                  What’s new
                </Text>
                <Heading
                  as="h1"
                  className="m-0 mt-2 text-4xl font-semibold tracking-tighter text-gray-900"
                >
                  Discover the Perfect Furniture
                </Heading>
                <Text className="text-[16px] text-gray-500">
                  Browse, Customize, and Shop an Extensive Range of Furniture
                  Anytime, Anywhere
                </Text>
              </Row>
            </Section>
            <Section className="mt-4 text-center">
              <Row>
                <Column align="right" className="w-[50%]">
                  <Button href="#">
                    <Img
                      src={`${baseUrl}/google-play-badge.png`}
                      className="mr-2 h-[40px] w-[140px] rounded-xl object-cover"
                    />
                  </Button>
                </Column>
                <Column align="left" className="w-[50%]">
                  <Button href="#">
                    <Img
                      src={`${baseUrl}/apple-store-badge.png`}
                      className="ml-2 h-[40px] w-[140px] rounded-xl object-cover"
                    />
                  </Button>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default ButtonsStore