react-bulletproof-button

React component that allows you design and create goregous email buttons that are compatible with modern email clients & Outlook 2007+. HTML output is based on Campaign Monitor's "Bulletproof email buttons" concept.

Table of contents

• Why Do I Need Bulletproof Buttons?
• Screenshots
  • Default Button style
  • Button with updated colors and border radius
• Install
• Usage
• API
  • Props
• Development
• Test
• Coverage
• License

Why Do I Need Bulletproof Buttons?

CSS support for HTML emails differs wildly between email clients, making it difficult to create HTML that will render consistently across a wide range of email clients.

In particular, older Outlook clients (2007/2010/2013) use the Microsoft Word rendering engine which limits HTML emails to a subset of the modern CSS spec.

Bulletproof buttons allow you to design and render gorgeous buttons using progressively enhanced VML and CSS.

Older Outlook clients are supported by the use of VML and conditional rendering via the <!--[if mso]> conditional and mso-hide: all CSS attributes.

Screenshots

Default Button style

Button with updated colors and border radius

Install

yarn add react-bulletproof-button

or for npm users:

npm install react-bulletproof-button

Usage

Using react-bulletproof-button is super simple:

1. Import BulletproofButton.
2. Use the component in your react app, using the various supported props to customize your email button.

import BulletproofButton from 'react-bulletproof-button';

class App extends React.Component {
  render() {
    return (
      <BulletproofButton backgroundColor="#4285F4"
                         borderRadius="10"
                         href="www.google.com"
                         fontColor="#fff"
                         text='Go to google' />
    );
  }
}

API

props

Name	Type	Default	Required	Description
backgroundColor	String	#556270		The hex value used for the buttons' background colour
borderColor	String	#556270		The hex value used for the buttons' border
borderRadius	Number	4		Border radius of the button in pixels
borderStyle	String	solid		A valid [CSS border-style value](https://www.w3schools.com/CSSref/pr_border-style.asp)
borderWidth	Number	1		Border width of the button in pixels
fontColor	String	#fff		The hex value used for the buttons' text colour
fontFamily	String	#fff		A valid [CSS font-family value](https://www.w3schools.com/cssref/pr_font_font-family.asp)
fontSize	String	#fff		Button text font size in pixels
fontWeight	String	bold		A valid [CSS font-weight value](https://www.w3schools.com/cssref/pr_font_weight.asp)
height	Number	40		The height of button in pixels
href	String		Yes	The url that the button will link to
text	String		Yes	Button text
width	Number	200		The width of button in pixels

Development

yarn install
yarn start

Test

yarn test

Coverage

This will output coverage stats to the command line and create coverage reports in the /coverage folder.

yarn coverage

License

react-bulletproof-button is released under the MIT license.