# Buttons

> A collection of button components to use in various parts of your application.

Web: https://react.email/components/buttons

Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`.

## Single button

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/single-button

### Tailwind

```tsx
<Button
  className="box-border w-full rounded-[8px] bg-indigo-600 px-[12px] py-[12px] text-center font-semibold text-white"
  href="https://react.email"
>
  Get started
</Button>
```

### Inline styles

```tsx
<Button
  href="https://react.email"
  style={{
    width: '100%',
    boxSizing: 'border-box',
    padding: 12,
    fontWeight: 600,
    borderRadius: 8,
    textAlign: 'center',
    backgroundColor: 'rgb(79,70,229)',
    color: 'rgb(255,255,255)',
  }}
>
  Get started
</Button>
```

## Two buttons

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/two-buttons

### Tailwind

```tsx
<Row>
  <Column align="center">
    <Row>
      <td align="center" className="w-1/2 pr-[16px]" colSpan={1}>
        <Button
          className="box-border w-full rounded-[8px] bg-indigo-600 px-[20px] py-[12px] text-center font-semibold text-white"
          href="https://react.email"
        >
          Login
        </Button>
      </td>
      <td align="center" className="w-1/2 pl-[16px]" colSpan={1}>
        <Button
          className="box-border w-full rounded-[8px] border border-gray-200 border-solid bg-white px-[20px] py-[12px] text-center font-semibold text-gray-900"
          href="https://react.email"
        >
          Sign up
        </Button>
      </td>
    </Row>
  </Column>
</Row>
```

### Inline styles

```tsx
<Row>
  <Column align="center">
    <Row>
      <td
        align="center"
        colSpan={1}
        style={{ paddingRight: 16, width: '50%' }}
      >
        <Button
          href="https://react.email"
          style={{
            width: '100%',
            boxSizing: 'border-box',
            paddingLeft: 20,
            paddingRight: 20,
            paddingTop: 12,
            paddingBottom: 12,
            borderRadius: 8,
            backgroundColor: 'rgb(79,70,229)',
            textAlign: 'center',
            fontWeight: 600,
            color: 'rgb(255,255,255)',
          }}
        >
          Login
        </Button>
      </td>
      <td
        align="center"
        colSpan={1}
        style={{ paddingLeft: 16, width: '50%' }}
      >
        <Button
          href="https://react.email"
          style={{
            width: '100%',
            boxSizing: 'border-box',
            paddingLeft: 20,
            paddingRight: 20,
            paddingTop: 12,
            paddingBottom: 12,
            borderRadius: 8,
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: 'rgb(229,231,235)',
            textAlign: 'center',
            backgroundColor: 'rgb(255,255,255)',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }}
        >
          Sign up
        </Button>
      </td>
    </Row>
  </Column>
</Row>
```

## Download buttons

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/download-buttons

### Tailwind

```tsx
<Row>
  <Column align="center">
    <Row>
      <Text className="font-bold text-[18px] text-indigo-500 leading-[28px]">
        Try now
      </Text>
      <Text className="text-gray-900">
        The app all cheese enthusiasts have been waiting for
      </Text>
    </Row>
    <Row>
      <td align="center">
        <table>
          <tr>
            <td className="pr-[16px]">
              <Button href="https://react.email">
                <Img
                  alt="Get it on Google Play button"
                  width={182.5}
                  height={54}
                  src="/static/get-it-on-google-play.png"
                />
              </Button>
            </td>
            <td className="pl-[16px]">
              <Button href="https://react.email">
                <Img
                  alt="Download on the App Store button"
                  width={164}
                  height={54}
                  src="/static/download-on-the-app-store.png"
                />
              </Button>
            </td>
          </tr>
        </table>
      </td>
    </Row>
  </Column>
</Row>
```

### Inline styles

```tsx
<Row>
  <Column align="center">
    <Row>
      <Text
        style={{
          color: 'rgb(99,102,241)',
          fontWeight: 700,
          fontSize: 18,
          lineHeight: '28px',
        }}
      >
        Try now
      </Text>
      <Text
        style={{
          color: 'rgb(17,24,39)',
        }}
      >
        The app all cheese enthusiasts have been waiting for
      </Text>
    </Row>
    <Row>
      <td align="center">
        <table>
          <tr>
            <td style={{ paddingRight: 16 }}>
              <Button href="https://react.email">
                <Img
                  alt="Get it on Google Play button"
                  width={182.5}
                  height={54}
                  src="/static/get-it-on-google-play.png"
                />
              </Button>
            </td>
            <td style={{ paddingLeft: 16 }}>
              <Button href="https://react.email">
                <Img
                  alt="Download on the App Store button"
                  width={164}
                  height={54}
                  src="/static/download-on-the-app-store.png"
                />
              </Button>
            </td>
          </tr>
        </table>
      </td>
    </Row>
  </Column>
</Row>
```