# Buttons

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

Web: https://vuemail.dev/components/buttons

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Single button

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/single-button

### Tailwind

```vue
<script setup lang="ts">
import { Button } from '@vuemaildev/vuemail';
</script>

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

### Inline styles

```vue
<script setup lang="ts">
import { Button } from '@vuemaildev/vuemail';
</script>

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

## Two buttons

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/two-buttons

### Tailwind

```vue
<script setup lang="ts">
import { Button, Column, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row>
    <Column align="center">
      <Row>
        <td align="center" class="w-1/2 pr-[16px]" :colspan="1">
          <Button
            class="box-border w-full rounded-[8px] bg-indigo-600 px-[20px] py-[12px] text-center font-semibold text-white"
            href="https://vuemail.dev"
          >Login</Button>
        </td>
        <td align="center" class="w-1/2 pl-[16px]" :colspan="1">
          <Button
            class="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://vuemail.dev"
          >Sign up</Button>
        </td>
      </Row>
    </Column>
  </Row>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Button, Column, Row } from '@vuemaildev/vuemail';
</script>

<template>
  <Row>
    <Column align="center">
      <Row>
        <td
          align="center"
          :colspan="1"
          :style="{ paddingRight: '16px', width: '50%' }"
        >
          <Button
            href="https://vuemail.dev"
            :style="{
              width: '100%',
              boxSizing: 'border-box',
              paddingLeft: '20px',
              paddingRight: '20px',
              paddingTop: '12px',
              paddingBottom: '12px',
              borderRadius: '8px',
              backgroundColor: 'rgb(79,70,229)',
              textAlign: 'center',
              fontWeight: 600,
              color: 'rgb(255,255,255)',
            }"
          >Login</Button>
        </td>
        <td
          align="center"
          :colspan="1"
          :style="{ paddingLeft: '16px', width: '50%' }"
        >
          <Button
            href="https://vuemail.dev"
            :style="{
              width: '100%',
              boxSizing: 'border-box',
              paddingLeft: '20px',
              paddingRight: '20px',
              paddingTop: '12px',
              paddingBottom: '12px',
              borderRadius: '8px',
              borderWidth: '1px',
              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>
</template>
```

## Download buttons

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/download-buttons

### Tailwind

```vue
<script setup lang="ts">
import { Button, Column, Img, Row, Text } from '@vuemaildev/vuemail';
</script>

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

### Inline styles

```vue
<script setup lang="ts">
import { Button, Column, Img, Row, Text } from '@vuemaildev/vuemail';
</script>

<template>
  <Row>
    <Column align="center">
      <Row>
        <Text
          :style="{
            color: 'rgb(99,102,241)',
            fontWeight: 700,
            fontSize: '18px',
            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>
            <tbody>
              <tr>
                <td :style="{ paddingRight: '16px' }">
                  <Button href="https://vuemail.dev">
                    <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: '16px' }">
                  <Button href="https://vuemail.dev">
                    <Img
                      alt="Download on the App Store button"
                      :width="164"
                      :height="54"
                      src="/static/download-on-the-app-store.png"
                    />
                  </Button>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </Row>
    </Column>
  </Row>
</template>
```