Button

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

Install

Install the component from your command line

pnpm

pnpm add jsx-email

bun

bun add jsx-email

npm

npm add jsx-email

yarn

yarn add jsx-email

Usage

ButtonExample.jsx

import { Button } from 'jsx-email';

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

HTML Output

Renders as an <a> element styled to look like a button.

Props

TypeScript Interface

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;
}

Email Client Compatibility

For optimal compatibility (especially with Outlook), use the component props below instead of CSS, style property, or Tailwind classes.

Required Props

width

width: number;

Button width in pixels.

height

height: number;

Button height in pixels.

Optional Props

href

href?: string;

URL to navigate to when clicked.

align

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

Horizontal alignment in container. Defaults to left.

backgroundColor

backgroundColor?: string;

Button background color (hex value).

borderColor

borderColor?: string;

Border color (hex value).

borderRadius

borderRadius?: number;

Border radius in pixels.

borderSize

borderSize?: number;

Border width in pixels.

fontSize

fontSize?: number;

Text size in pixels.

target

target?: string;

Value for the HTML target attribute.

textColor

textColor?: string;

Text color (hex value).

withBackground

withBackground?: boolean;

Set to true when nested in a Background component for Outlook compatibility.

Additional Props

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