Button

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.

Install

Install component from your command line.

npm install @vuemaildev/vuemail -E

yarn add @vuemaildev/vuemail -E

pnpm add @vuemaildev/vuemail -E

Getting started

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

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

<template>
  <Button
    href="https://example.com"
    :style="{ color: '#42b883', padding: '10px 20px' }"
  >Click me</Button>
</template>

In Vue templates, text written over several lines inside a component keeps a single space at each end, where JSX trims it. Write short texts like button labels on one line when exact spacing matters, as above.

Props

string

required

Link to be triggered when the button is clicked

string

default:"_blank"

Specify the target attribute for the button link

Support

All components were tested using the most popular email clients.

Gmail

Apple Mail

Outlook

Yahoo! Mail

HEY

Superhuman

Overview

Getting Started

Guides

Components

Utilities

Integrations

Contributing

Install

Getting started

Props

Support

​Install

​Getting started

​Props

​Support

Install

Getting started

Props

Support