Button

A JSX email component which styles an anchor element to appear as a button

Tips

Semantics: Quite often in the email world we talk about buttons when we actually mean links. Behind the scenes this component is a <a> element which is styled like a <button> element.

pnpm

aube

bun

npm

yarn

pnpm add jsx-email

Usage

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

import { Button } from 'jsx-email';

const Email = () => {
  return (
    <Button width={160} height={60} href="https://jsx.email" target="_blank">
      JOIN US
    </Button>
  );
};

Component Props

export interface ButtonProps extends BaseProps<'a'> {
  width: number;
  height: number;
  href?: string;
  align?: 'left' | 'center' | 'right';
  backgroundColor?: string;
  borderColor?: string;
  borderRadius?: number;
  borderSize?: number;
  fontSize?: number;
  textColor?: string;
  withBackground?: boolean;
}

Tips

It’s highly reccommended for optimal email client compatibility to use the component props below to set styles, rather than CSS, the style property, or Tailwind classes. This is especially important for Outlook.

href?: string;

The url to navigate to when the button is clicked.

width: number;

Specifies the width of the Button in pixels

height: number;

Specifies the height of the Button in pixels

align?: 'left' | 'center' | 'right';

Specifies the horizontal alignment of the Button in the container. Default value is left

target?: string;

Specifies the value of the "target" attribute for the button target.

backgroundColor?: string;

Specifies the hex value for the background-color of the button

borderColor?: string;

Specifies the hex value border-color for the button

borderRadius?: number;

Specifies the border-radius value for the button in pixels

borderSize?: number;

Specifies the border-width value in pixels

fontSize?: number;

Specifies the font-size value in pixels

textColor?: string;

Specifies the hex value for the color of the text

withBackground?: boolean;

Set to true if Button is nested in a Background component. Neccessary for good Outlook compatibility.

Tips

This component also expresses all of the Common Component Props for ComponentProps<'a'>.