Appearance

Button ​

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

TIP

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.

Install ​

Install the component from your command line

console
pnpm add jsx-email
pnpm add jsx-email
console
bun add jsx-email
bun add jsx-email
console
npm add jsx-email
npm add jsx-email
console
yarn add jsx-email
yarn add jsx-email

Usage ​

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

jsx
import { Button } from 'jsx-email';

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

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

Component Props ​

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

TIP

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.

ts
href?: string;
href?: string;

The url to navigate to when the button is clicked.

ts
width: number;
width: number;

Specifies the width of the Button in pixels

ts
height: number;
height: number;

Specifies the height of the Button in pixels

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

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

ts
target?: string;
target?: string;

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

ts
backgroundColor?: string;
backgroundColor?: string;

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

ts
borderColor?: string;
borderColor?: string;

Specifies the hex value border-color for the button

ts
borderRadius?: number;
borderRadius?: number;

Specifies the border-radius value for the button in pixels

ts
borderSize?: number;
borderSize?: number;

Specifies the border-width value in pixels

ts
fontSize?: number;
fontSize?: number;

Specifies the font-size value in pixels

ts
textColor?: string;
textColor?: string;

Specifies the hex value for the color of the text

ts
withBackground?: boolean;
withBackground?: boolean;

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

TIP

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